Naviguer (mettre en surbrillance) une ligne spécifiée dans un tableau

Comment puis-je créer une fonction ou un bâtiment spécifique sur le code existant ci-dessous qui me permettrait d'aller (mettre en surbrillance) une ligne spécifique dans une table. Il est à noter que les en-têtes de table doivent toujours être exemptés, par conséquent, commencer le nombre de lignes à '0' après les en-têtes de table.Naviguer (mettre en surbrillance) une ligne spécifiée dans un tableau

Ie. function goToRow('3')

et cette fonction mettrait en évidence la ligne 3

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
#mstrTable { 
    border: 1px solid black 
} 
#mstrTable td, th { 
    border: 1px solid black 
} 

#mstrTable tr.normal td { 
    color: black; 
    background-color: white; 
} 
#mstrTable tr.highlighted td { 
    color: white; 
    background-color: gray; 
} 
</style> 
</head> 
<body> 
    <table id="mstrTable"> 
    <thead> 
     <tr> 
     <th>File Number</th> 
     <th>Date1</th> 
     <th>Date2</th> 
     <th>Status</th> 
     <th>Num.</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>KABC</td> 
     <td>09/12/2002</td> 
     <td>09/12/2002</td> 
     <td>Submitted</td> 
     <td>0</td> 

     </tr> 
     <tr> 
     <td>KCBS</td> 
     <td>09/11/2002</td> 
     <td>09/11/2002</td> 
     <td>Approved</td> 
     <td>1&nbsp;</td> 
     </tr> 

     <tr> 
     <td>WFLA</td> 
     <td>09/11/2002</td> 
     <td>09/11/2002</td> 
     <td>Submitted</td> 
     <td>2</td> 
     </tr> 
     <tr> 
     <td>WTSP</td> 
     <td>09/15/2002</td> 
     <td>09/15/2002</td> 
     <td>In-Progress</td> 
     <td>3</td> 
     </tr> 
    </tbody> 
    </table> 

<script type="text/javascript"> 

var table = document.getElementById("mstrTable"); 
var thead = table.getElementsByTagName("thead")[0]; 
var tbody = table.getElementsByTagName("tbody")[0]; 

tbody.onclick = function (e) { 
    e = e || window.event; 
    var td = e.target || e.srcElement; //assumes there are no other elements inside the td 
    var row = td.parentNode; 
    alert('Row is ' + (row.rowIndex - 1)) 
    if (this.lst&&this.lst!=row){ 
    this.lst.className=''; 
    } 
    row.className = row.className==="highlighted" ? "" : "highlighted"; 
    this.lst=row; 
} 

thead.onclick = function (e) { 
    e = e || window.event; 
    var th = e.target || e.srcElement; //assumes there are no other elements in the th 
    alert(th.innerHTML); 
} 
</script> 
</body> 
</html>

Source

2013-01-18 user1959234

Qu'avez-vous essayé ou recherché jusqu'à présent? http://msmvps.com/blogs/jon_skeet/default.aspx –

Here est un petit exemple de la façon dont vous pouvez obtenir avec jQuery.

Source

2013-01-18 20:24:42 madhead

Puisque je ne veux pas utiliser jQuery, quelle serait la manière manuelle d'accomplir ceci? – user1959234

Il y a plusieurs façons. [Voici un exemple mis à jour] (http://jsfiddle.net/RWxJX/3/). C'est beaucoup plus simple avec jQuery. – madhead

Naviguer (mettre en surbrillance) une ligne spécifiée dans un tableau

Répondre

Questions connexes