Javascript 动态合并table单元格
程序员文章站
2022-03-11 16:35:13
...
本文转载自https://blog.csdn.net/tongyiyi/article/details/51159470
1.合并table单元格
$.fn.extend({
//表格合并单元格，colIdx要合并的列序号，从0开始
"rowspan": function (colIdx) {
return this.each(function () {
var that;
$('tr', this).each(function (row) {
if(colIdx=="0"){
$('td:eq(' + colIdx + ')', this).filter(':visible').each(function (col) {
if (that != null && $(this).html() == $(that).html()) {
rowspan = $(that).attr("rowSpan");
if (rowspan == undefined) {
$(that).attr("rowSpan", 1);
rowspan = $(that).attr("rowSpan");
}
rowspan = Number(rowspan) + 1;
$(that).attr("rowSpan", rowspan);
$(this).hide();
} else {
that = this;
}
});
}else{
$('td:eq(' + colIdx + ')', this).filter(':visible').each(function (col) {
if (that != null && $(this).html() == $(that).html() && $(this).siblings().eq(0).html()==$(that).siblings().eq(0).html() ) {
rowspan = $(that).attr("rowSpan");
if (rowspan == undefined) {
$(that).attr("rowSpan", 1);
rowspan = $(that).attr("rowSpan");
}
rowspan = Number(rowspan) + 1;
$(that).attr("rowSpan", rowspan);
$(this).hide();
} else {
that = this;
}
});
}
});
});
}
});2.使用实例
<!DOCTYPE html>
<html>
<head><title>
表格单元格合并Demo
</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$.fn.extend({
//表格合并单元格，colIdx要合并的列序号，从0开始
"rowspan": function (colIdx) {
return this.each(function () {
var that;
$('tr', this).each(function (row) {
if(colIdx=="0"){
$('td:eq(' + colIdx + ')', this).filter(':visible').each(function (col){
if (that != null && $(this).html() == $(that).html()) {
rowspan = $(that).attr("rowSpan");
if (rowspan == undefined) {
$(that).attr("rowSpan", 1);
rowspan = $(that).attr("rowSpan");
}
rowspan = Number(rowspan) + 1;
$(that).attr("rowSpan", rowspan);
$(this).hide();
} else {
that = this;
}
});
}else{
$('td:eq(' + colIdx + ')', this).filter(':visible').each(function (col) {
if (that != null && $(this).html() == $(that).html() && $(this).siblings().eq(0).html()==$(that).siblings().eq(0).html() ) {
rowspan = $(that).attr("rowSpan");
if (rowspan == undefined) {
$(that).attr("rowSpan", 1);
rowspan = $(that).attr("rowSpan");
}
rowspan = Number(rowspan) + 1;
$(that).attr("rowSpan", rowspan);
$(this).hide();
} else {
that = this;
}
});
}
});
});
}
});
function initLoad() {
$("#tbListTM").rowspan(0); //第一列合并
$("#tbListTM").rowspan(1);//第二列合并
}
$(document).ready(function () {
var data1=[{"DEPT_NAME":"市场部","WEI":"21","XIU":"2","ZHAN":"0.09"},
{"DEPT_NAME":"市场部","WEI":"21","XIU":"1","ZHAN":"0.05"},
{"DEPT_NAME":"研发部","WEI":"21","XIU":"1","ZHAN":"0.11"},
{"DEPT_NAME":"研发部","WEI":"21","XIU":"1","ZHAN":"0.25"},
{"DEPT_NAME":"产品部","WEI":"3","XIU":"0","ZHAN":"0"},
{"DEPT_NAME":"产品部","WEI":"3","XIU":"0","ZHAN":"0"}]
function jizhunchelue(data1) {
var tbodyHtml="";
//循环
for (var i = 0; i < data1.length; i++) {
html = '<tr>\n' +
'\t\t\t<td colspan="">'+data1[i]['DEPT_NAME']+'</td>\n' +
'\t\t\t<td>'+data1[i]['WEI']+'</td>\n' +
'\t\t\t<td>'+(data1[i]['XIU'])+'</td>\n' +
'\t\t\t<td>'+(data1[i]['ZHAN'])+'</td>\n' +
'\t\t\t<td>'+(data1[i]['ZHAN'])+'</td>\n' +
'\t\t</tr>\n';
tbodyHtml+=html;
}
$("#tbListTM").html(tbodyHtml);
}
initLoad();
});
</script>
<style>
.Nlist_con table {
border-left: 1px solid #c9c9c9;
border-top: 1px solid #c9c9c9;
border-collapse: collapse;
}
.Nlist_con table th {
border-right: 1px solid #c9c9c9;
border-bottom: 1px solid #c9c9c9;
background: #ececec;
padding: 10px 5px;
font-size: 14px;
color: #2586d8;
font-family: "宋体";
}
.Nlist_con table td {
border-right: 1px solid #c9c9c9;
border-bottom: 1px solid #c9c9c9;
background: #fff;
padding: 6px 3px;
font-size: 12px;
line-height: 20px;
color: #676767;
}
.Nlist_con table td a {
text-decoration: none;
color: #2586d8;
cursor: pointer;
}
.Nlist_con table td a:hover {
text-decoration: underline;
color: #2586d8;
}
</style>
</head>
<body>
<div class="Nlist_con">
<table border="1" cellspacing="1" cellpadding="0" width="100%" id="tbListTM">
<tr align="center">
<th>
发展领域
</th>
<th>
发展要素
</th>
<th style="width:60px">
年度
</th>
<th style="width:100px">
评价内容
</th>
<th>
分值
</th>
</tr>
<tbody></tbody>
</table>
</div>
</body>
</html>
3.效果图
上一篇： JS动态合并单元格