合并一个表格里面内容相同的单元格 js

<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]来获得。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在 JavaScript 中操作表格可以使用 DOM API,可以通过获取表格元素和单元格元素来进行合并单元格操作。以下是一个简单的示例代码: ```html <table id="myTable"> <tr> <td rowspan="2">1</td> <td>2</td> <td>3</td> </tr> <tr> <td colspan="2">4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> </tr> <tr> <td colspan="3">8</td> </tr> </table> <script> // 获取表格单元格元素 var table = document.getElementById("myTable"); var cell1_2 = table.rows[0].cells[1]; var cell1_3 = table.rows[0].cells[2]; var cell2_1 = table.rows[1].cells[0]; var cell2_2 = table.rows[1].cells[1]; var cell3_1 = table.rows[2].cells[0]; var cell4_1 = table.rows[3].cells[0]; // 合并单元格 cell1_2.colSpan = 2; cell1_3.style.display = "none"; cell2_1.rowSpan = 2; cell4_1.colSpan = 3; </script> ``` 在上面的代码中,我们使用 `rowspan` 和 `colspan` 属性来设置单元格的行跨度和列跨度,通过设置 `style.display` 属性来隐藏某些单元格,实现表格合并单元格操作。 ### 回答2: 在JavaScript中,我们可以使用HTML和CSS来创建和修改表格。要合并单元格,在HTML中使用`rowspan`和`colspan`属性可以实现。 `rowspan`用于合并行,表示单元格将跨越多少行。`colspan`用于合并列,表示单元格将跨越多少列。 首先,我们需要找到要合并单元格。可以通过`document.getElementById()`方法根据表格的ID找到具体的单元格。例如,如果我们的表格ID为`myTable`,然后我们想要合并第一行和第一列的单元格,我们可以这样写: ```javascript let cell = document.getElementById('myTable').rows[0].cells[0]; ``` 接下来,我们可以设置`rowspan`和`colspan`属性来合并单元格。例如,要合并第一行和第一列的单元格,将其跨越3行和2列,可以这样写: ```javascript cell.rowSpan = 3; cell.colSpan = 2; ``` 在实际应用中,我们可以根据实际需求选择要合并单元格,以及要跨越的行和列数。 值得注意的是,当我们合并单元格时,其他单元格的索引会发生变化。因此,如果我们在合并之后想要操作其他单元格,我们需要相应地更新索引。 通过使用`rowspan`和`colspan`属性,我们可以轻松地合并和修改表格中的单元格,以满足我们的设计需求。 ### 回答3: 在JavaScript中,合并表格单元格可以通过以下步骤实现: 1. 获取要合并表格对象和要合并的行和列的索引。 ```javascript var table = document.getElementById("tableId"); //获取表格对象 var startRow = 1; //开始合并的行索引 var endRow = 3; //结束合并的行索引 var column = 0; //要合并的列索引 ``` 2. 循环遍历要合并单元格,将其设置为隐藏。 ```javascript for (var i = startRow; i <= endRow; i++) { var cell = table.rows[i].cells[column]; cell.style.display = "none"; } ``` 3. 将合并后的单元格的行跨度设置为合并的行数。 ```javascript var mergeCell = table.rows[startRow].cells[column]; mergeCell.rowSpan = endRow - startRow + 1; ``` 这样就可以实现表格单元格合并。需要注意的是,以上代码仅适用于简单的合并操作,在处理复杂的表格结构时可能需要更多的代码来实现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值