table表格合并跨行中相同元素的列

来源:互联网 发布:galgame游戏删除数据 编辑:程序博客网 时间:2024/05/22 13:21

不说了直接贴代码原来的表格如下:


现在我要合并第二行和第三行的第二列:

可以直接下面调用js方法合并即可:

首先表格的页面

<table width="100%" border="1" align="center" cellpadding="0" cellspacing="1" table1>
  <thead>
  <th>1</th>
  <th>2</th>
  <th>3</th>
  </thead>
  <tbody>
  <tr>
  <td>第一条</td><td>元素B</td><td>第三个数据</td>
  </tr>
  <tr>
  <td>第二条</td><td>元素B</td><td>第三个数据内容</td>
  </tr>
  </tbody>
  </table>

$(function(){
var table1 = document.getElementById("table1");//合并相同元素的列
mergeTableColumn(table1,1,table1.rows.length-1,[1]);//参数自己调试
});
function mergeTableColumn(obj, startRow, endRow, cols) {
var lineobj = new Array();
var rowIndex = -1;
var nowobj = new Array();
for (var i = startRow; i <= endRow; i++) {
for (var j = 0; j < cols.length; j++) {
nowobj[j] = obj.rows[i].cells[cols[j]].innerText;
}
var same = true;
if (rowIndex != -1) {
for (var j = 0; j <= cols.length; j++) {
if (lineobj[j] != nowobj[cols[j]]) {
same = false;
break;
}
}
} else {
same = false;
}

if (same) {
for (var j = cols.length - 1; j >= 0; j--) {
$(obj.rows[rowIndex].cells[cols[j]]).prop("rowspan", i - rowIndex + 1);
$(obj.rows[rowIndex].cells[cols[j]]).attr("mergeRow", i - rowIndex + 1);
$(obj.rows[i].cells[cols[j]]).remove();
}
} else {
rowIndex = i;
for (var j = 0; j < cols.length; j++) {
lineobj[j] = nowobj[cols[j]];
}
}
}
}


执行成功之后得到的效果如图


阅读全文
0 0
原创粉丝点击