Compter le nombre de colonnes dans une ligne de tableau

Question

J'ai un tableau similaire à :

<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.

Answer 1

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

cellules n'est pas une propriété d'une table, les lignes sont. Cellules est une propriété d'une rangée cependant

Answer 2

Vous pourriez faire

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

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

Answer 3

Pourquoi ne pas utiliser reduce pour que nous puissions tenir compte du 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
    );
}