javascript - 计算表格行中的列数

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

首先，当你打电话时getElementById，你需要提供一个 id。o_O

您的 dom 中唯一具有 id 的项目是table元素。tr如果可以，您可以为元素添加 id（确保它们是唯一的） 。

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

这是控制台记录结果的小提琴......

Answer 5

计算表 1 中的所有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 6

如果colspan或rowspan都设置为1，则计算孩子td的 s 将给出正确答案。但是，如果有跨度，我们无法准确计算列数，即使按td行的最大数量 s 也是如此。考虑以下示例：

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 7

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 8

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

这是一个简洁的脚本，考虑到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 10

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