计算表格行中的列数答案

【问题标题】：Count number of columns in a table row计算表格行中的列数
【发布时间】：2012-04-06 12:54:31
【问题描述】：

我有一个类似的表：

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

它没有显示实际结果。

【问题讨论】：

通过以下方式可以得到一个表的行数：document.getElementById('someid').getElementsByTagName('tr').length;
@pinouchon 当有人在 Javascript 中寻求解决方案时，“你必须使用 jQuery”不是答案。

标签： javascript html-table

【解决方案1】：

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

单元格不是表格的属性，行是。单元格是行的属性

【讨论】：

这仅适用于简单的情况，其中 colspan=1 对于所有单元格，并且所有行具有相同的列数。（HTML 允许行有不同的列数，在这种情况下，列数太少的行最后会出现空白。）
不确定你的意思。问题是关于连续的单元格。如果 colspan=2 并且缺少两个仍然意味着只有一个单元格。虽然在使用 rowspan 时会有点混乱，但它仍然是正确的，请参见这个小提琴：jsfiddle.net/GF6Dr 如果你想要一个表格中有多少个单元格，那么就取所有单元格的最大值。
问题标题为“count number of columns”。在他的示例中，所有 tds 的 colspan 均为 1，因此计算单元格就足够了。但是，如果 colspan 可能是 1 之外的任何内容，那么忽略 colspan（一个单元格跨越的列的数量）并不是一个好主意。

【解决方案2】：

你可以的

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

在这里摆弄http://jsfiddle.net/TEZ73/

【讨论】：

【解决方案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
    );
}

【讨论】：

【解决方案4】：

首先，当您拨打getElementById 时，您需要提供一个ID。 o_O

你的 dom 中唯一带有 id 的项目是 table 元素。如果可以的话，您可以将 ID（确保它们是唯一的）添加到您的 tr 元素中。

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

here is a fiddle that console logs the results...

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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>

【讨论】：

【解决方案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 的回答。

【讨论】：

【解决方案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

【讨论】：

【解决方案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

【讨论】：

【解决方案10】：

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

【讨论】：

更详细地描述你的答案！