合并一个表格里面内容相同的单元格 js-优快云博客

本文链接：https://blog.youkuaiyun.com/lishushan/article/details/83531671

本文介绍了一种使用JavaScript实现表格中相同数据的上下合并的方法。通过定义一个名为MergeCellsVertical的函数，可以有效地减少表格中重复的数据展示，提高表格的可读性。文章还解决了在调用该函数时出现的'rows.length'为空或不是对象的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script> 
function MergeCellsVertical(tbl, cellIndex) //相同数据上下合并 
{ 
  if (tbl.rows.length < 2) return; 
  var i, j; 
  var last = tbl.rows(0).cells(cellIndex).innerHTML; 
  var lastIndex = 0;  
  for (i = 1; i < tbl.rows.length; i++) 
  {  
    if (tbl.rows(i).cells(cellIndex).innerHTML != last) // 发现新的值 
    {  
      if (i > lastIndex + 1) 
      { 
        for (j = lastIndex + 1; j < i; j++) 
        { 
          tbl.rows(j).cells(cellIndex).removeNode(); 
        } 
        tbl.rows(lastIndex).cells(cellIndex).rowSpan = i - lastIndex; 
      } 
  //alert(tbl.rows(i).cells(cellIndex).innerHTML); 
      last = tbl.rows(i).cells(cellIndex).innerHTML; 
      lastIndex = i; 
    } 
  } 
  // 最后一行要特别处理 
  if (lastIndex != tbl.rows.length - 1) 
  {  
    for (j = lastIndex + 1; j < tbl.rows.length; j++) 
    {    
      tbl.rows(j).cells(cellIndex).removeNode(); 
    } 
    tbl.rows(lastIndex).cells(cellIndex).rowSpan = tbl.rows.length - lastIndex + 1; 
  } 
} 
</script>

然后我在页面写了一个简单的表格：

<table  name="test"> 
        <tr> 
                <td>数据 </td> 
                <td>数据 </td> 
                <td>数据 </td> 
                <td>数据 </td> 
                <td>数据 </td> 
                <td>数据 </td> 
        </tr> 
        <tr> 
                <td>数据 </td> 
                <td>数据 </td> 
                <td>数据 </td> 
                <td>数据 </td> 
                <td>数据 </td> 
                <td>数据 </td> 
        </tr> 
</table>

现在我调用js方法

<script> 
MergeCellsVertical(test,0);//按行进行合并 
</script>

页面报javascript 错误 'rows.length' 为空或不是对象并且一直取不到表格的length

将table的dom对象传进去

<table name="test"> ,MergeCellsVertical(test,0);这样是不能将table对象传过去的。最好table id="test"；如果用name，需要用document.getElementsByName("test")[0]来获得。