如何用javascript检查给定的html表有多少列？

Posted 2023-03-05

【中文标题】如何用javascript检查给定的html表有多少列？

【英文标题】：how to check with javascript how many columns given html table has?

【发布时间】：2011-09-15 15:52:48

【问题描述】：

最大colspan是怎么算的，例如：

<table>
 <tr>
  <td> 1 </td>
  <td> 2 </td>
  <td> 3 </td>
 </tr>
 <tr>
  <td> 1 </td>
  <td> 2 </td>
 </tr>
 <tr>
  <td> 1 </td>
 </tr>
</table>

应该给3

【问题讨论】：

纯 JS 或使用特定框架（jQuery/mootools/etc）？

每个表格行不应该有相同的列数吗？或者在列最少的行的单元格上至少有一个 colspan？

我更喜欢纯 JS。抱歉没有指定。

@Jan 这就是我的想法。如果这是提问者的网站，他可能应该修复一些问题，使所有行都有same number of columns。如果不是，当然，这是正确的方法。

我还发现colspan='100%' 将<td> 标签设置为最大可用colspan。 -> 这里***.com/questions/398734/colspan-all-columns

【参考方案1】：

使用“getElementsByTagName()”查找每个<tr> 对于每个<tr>，以类似方式查找每个<td> 计算<td> 元素，然后遍历并为每个<td> 添加“colspan - 1”和“colspan”属性 保持所有行的最大计数。

【讨论】：

@Guffa 是的，我讨厌那些 :-) 不过你是对的；那会让它……很奇怪。

【参考方案2】：

请参阅此jsFiddle 以获取示例。根据您的要求，它是纯 javascript：

var table = document.getElementById("myTable");
var max = 0;

for (var i = 0, iLen = table.rows.length; i < iLen; i++) 
  var temp = 0;
  var cells = table.rows[i].cells;

  for (var j = 0, jLen = cells.length; j < jLen; j++) 
    // This is very important. If you just take length you'll get the
    // the wrong answer when colspan exists
    temp += cells[j].colSpan;
  

  if (temp > max) 
    max = temp;
  


alert(max);

【参考方案3】：

每个表都有一个rows数组，每一行都有一个cells数组。然后就是找到最大值的问题。

function calculateCells()
    var table = document.getElementById("table");
    var max = 0;
    for(var i=0;i<table.rows.length;i++) 
        if(max < table.rows[i].cells.length)
            max = table.rows[i].cells.length;
    
    return max;

【参考方案4】：

有关 jQuery 版本，请参阅 this fiddle。它计算每个tr 中td 元素的数量，并检查每次是否遇到更大的数量。 max 变量存储当前找到的最大列数：

var max = 0;
$("tr").each(function() 
   var count = $(this).find("td").length;
    if(count > max) max = count;
);
alert(max);