Puis-je utiliser Javascript pour trouver une ligne de table par son rowIndex?

-2

J'ai un tableau HTML avec plusieurs lignes et colonnes. J'ai aussi une variable appelée userRowIndex qui a l'index d'une certaine ligne enregistrée dans elle. Je veux être en mesure de rendre le contenu de cette ligne entière modifiable en utilisant simplement JavaScript et ma variable userRowIndex. Comment puis-je faire ceci?Puis-je utiliser Javascript pour trouver une ligne de table par son rowIndex?

Source

2017-10-20 S. Jones

Utilisez-vous une bibliothèque JavaScript? –

Non, je n'utilise pas de bibliothèque JS, et je ne suis pas trop désireux d'en utiliser une. –

Vous pouvez utiliser 'document.querySelector' avec le sélecteur CSS' nth-child' pour y parvenir avec JS vanilla. – Amy

var rows = document.getElementById("myTable").getElementsByTagName('tr'); 
 
// whatever your userRowIndex is : 
 
var userRowIndex = 1; 
 

 
rows[userRowIndex].className = 'red';

<html> 
 
<head> 
 
    <style type='text/css'> .red{color:red;}</style> 
 
</head> 
 
<body> 
 
<table id="myTable"> 
 
\t <tr> 
 
\t \t <td>1</td> 
 
\t \t <td>One</td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td>2</td> 
 
\t \t <td>Two</td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td>3</td> 
 
\t \t <td>Three</td> 
 
\t </tr> 
 
</table> 
 
</body> 
 
</html>

Source

2017-10-20 16:00:14 RogerC

Cette méthode est bonne, mais sur une très longue table, elle pourrait causer du retard –

Ceci est un exemple de base comment un particulier td peut être faire modifiable à l'aide rowIndex

// get the table 
 
var getTable = document.querySelector("#demotable"); 
 
// adding event listener 
 
getTable.addEventListener('click', function(event) { 
 
    // current cell index 
 
    var col = event.target.cellIndex, 
 
    // get index of row from td 
 
    row = event.target.parentNode.rowIndex; 
 
    // set the contenteditable property to it 
 
    this.rows[row].cells[col].setAttribute('contenteditable', 'true') 
 
})

<table border id="demotable"> 
 

 

 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    </tr> 
 
    <tr> 
 
    <td>4</td> 
 
    <td>5</td> 
 
    <td>6</td> 
 
    </tr> 
 

 
</table>

Notez également un td peut être modifiable à temps.Même si t il toute la ligne peut être rendre modifiable, mais une seule cellule peut être changé à un moment

Source

2017-10-20 16:13:41 brk

Cela peut être plus rapide:

function getRowByIndex(userRowIndex) 
{ 
    var rows = null; 
    var row = null; 

    try 
    { 
     rows = document.getElementById("myTable").getElementsByTagName('tr'); 

     if(rows!=null) 
     { 
      // This uses 0 based indexing, so assume that the passed value is in that range 
      row = rows[userRowIndex]; 
     } 

    } 
    catch(e) 
    { 
     alert("getRowByIndex Error: " + e.Message); 
    } 
    finally 
    { 

    } 

    return row; 
}

Source

2017-10-20 16:13:55 codemaker

Puis-je utiliser Javascript pour trouver une ligne de table par son rowIndex?

Répondre

Questions connexes