計算表格行中的列數

Question

我有一個類似的表：

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

我想連續計算 td 元素的數量。 我在嘗試：

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

它沒有顯示實際結果。

Answer 1

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

單元格不是表的屬性，行是。 單元格是一行的屬性

Answer 2

你可以做

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

在這里小提琴http://jsfiddle.net/TEZ73/

Answer 3

為什么不使用 reduce 以便我們可以考慮 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
    );
}

Answer 4

統計table1中的所有td ：

 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>

把所有的td都統計到table1的每個tr中。

 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>

Answer 5

計算td元素以獲取表中的列數不是一個好主意，因為td元素可以使用colspan跨越多個列。

這是一個使用 jquery 的簡單解決方案：

 var length = 0; $("tr:first").find("td,th").each(function(){ var colspan = $(this).attr("colspan"); if(typeof colspan;== "undefined" && colspan > 0){ length += parseInt(colspan); }else{ length += 1; } }). $("div"):html("number of columns; "+length);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td>single</td> <td colspan="2">double</td> <td>single</td> <td>single</td> </tr> </table> <div></div>

對於普通的 Javascript 解決方案，請參閱 Emilio 的回答。

Answer 6

首先，當您調用getElementById時，您需要提供一個 ID。 o_O

您的 dom 中唯一具有 id 的項目是table元素。 如果可以，您可以將 id（確保它們是唯一的）添加到您的tr元素。

或者，您可以使用getElementsByTagName('tr')獲取文檔中的tr元素列表，然后獲取 tds 的數量。

這是控制台記錄結果的小提琴......

Answer 7

如果colspan或rowspan都設置為1 ，計算孩子td s 將給出正確答案。 但是，如果有跨度，我們就無法准確計算列數，即使是通過行的最大td數也是如此。 考慮以下示例：

 var mytable = document.getElementById('table') for (var i=0; i < mytable.rows.length; ++i) { document.write(mytable.rows[i].cells.length + "<br>"); }

 table, th, td { border: 1px solid black; border-collapse: collapse; padding: 3px; }

 <table id="table"> <thead> <tr> <th colspan="2">Header</th> <th rowspan="2">Hi</th> </tr> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td colspan="2">hello</td> <td>world</td> </tr> <tr> <td>hello</td> <td colspan="2">again</td> </tr> </tbody> </table>

Answer 8

這是一個考慮到colspan的簡潔腳本。

如果表格沒有行或列，則numCols將為 0，並且無論某些單元格是否跨越多行或多列，只要表格標記有效並且沒有行比表中的列數短或長。

    const table = document.querySelector('table')
    const numCols = table.rows[0]
        ? [...table.rows[0].cells]
            .reduce((numCols, cell) => numCols + cell.colSpan , 0)
        : 0

Answer 9

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

結果：

Row 1 : 1 column
Row 2 : 4 column

Answer 10

$('#table1').find(input).length