web-dev-qa-db-fra.com

Compter le nombre de colonnes dans une ligne du tableau

J'ai une table semblable à:

<table id="table1">
<tr>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
</tr>
<tr>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
</tr>
<table>

Je veux compter le nombre d'éléments td dans une ligne. J'essaie: 

document.getElementById('').cells.length;
document.getElementById('').length;
document.getElementById('').getElementsByTagName('td').length;

Il n'a pas montré le résultat réel.

javascripthtml-table
31
Muhammad Imran Tariq
document.getElementById('table1').rows[0].cells.length

les cellules ne sont pas une propriété d'un tableau, mais les lignes. Cells est une propriété d'une rangée si

51
Martin Hansen

Vous pourriez faire

alert(document.getElementById('table1').rows[0].cells.length)

violon ici http://jsfiddle.net/TEZ73/

4
Nicola Peluchetti

Pourquoi ne pas utiliser réduire pour prendre en compte colspan? :)

function getColumns(table) {
    var cellsArray = [];
    var cells = table.rows[0].cells;

    // Cast the cells to an array
    // (there are *cooler* ways of doing this, but this is the fastest by far)
    // Taken from https://stackoverflow.com/a/15144269/6424295
    for(var i=-1, l=cells.length; ++i!==l; cellsArray[i]=cells[i]);

    return cellsArray.reduce(
        (cols, cell) =>
            // Check if the cell is visible and add it / ignore it
            (cell.offsetParent !== null) ? cols += cell.colSpan : cols,
        0
    );
}
1
Emilio Venegas

Compter tout td dans le tableau 1:

console.log(
table1.querySelectorAll("td").length
)
<table id="table1">
<tr>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
</tr>
<tr>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
</tr>
<table>

Comptez tous les td dans chaque tr de la table1.

table1.querySelectorAll("tr").forEach(function(e){
 console.log( e.querySelectorAll("td").length )
})
<table id="table1">
<tr>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
</tr>
<tr>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
</tr>
<table>

1
Cryptopat

Tout d'abord, lorsque vous appelez getElementById, vous devez fournir un identifiant. o_O

L'élément table est le seul élément de votre dom portant un identifiant. Si vous le pouvez, vous pouvez ajouter des identifiants (assurez-vous qu'ils sont uniques) à vos éléments tr.

Vous pouvez également utiliser getElementsByTagName('tr') pour obtenir une liste d'éléments tr dans votre document, puis obtenir le nombre de tds.

Voici un violon qui console enregistre les résultats ...

1
hvgotcodes
<table id="table1">
<tr>
  <td colspan=4><input type="text" value="" /></td>

</tr>
<tr>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>

</tr>
<table>
<script>
    var row=document.getElementById('table1').rows.length;
    for(i=0;i<row;i++){
    console.log('Row '+parseFloat(i+1)+' : '+document.getElementById('table1').rows[i].cells.length +' column');
    }
</script>

Résultat: 

Row 1 : 1 column
Row 2 : 4 column
0
Nam Le