您的位置:首页 > 其它

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

2017-05-27 14:48 381 查看
不说了直接贴代码原来的表格如下:

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

可以直接下面调用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]];
}
}
}

}

执行成功之后得到的效果如图
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: