版权声明:本文为博主原创文章,如若转载,请注明文章出处。 https://blog.csdn.net/qq_34129814/article/details/80255444
页面的table表格中又是需要将相同的数据栏合并,今天就学到了一个简单实用有效的方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table id="table1">
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td>111</td>
<td>555</td>
<td>333</td>
</tr>
<tr>
<td>111</td>
<td>888</td>
<td>333</td>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>333</td>
</tr>
</table>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件
return this.each(function(){
var that;
$('tr', this).each(function(row) {
$('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;
}
});
});
});
}
$(function() {
$("#table1").rowspan(0);//传入的参数是对应的列数从0开始 第一列合并相同
// $("#table1").rowspan(1);//传入的参数是对应的列数从0开始 第二列合并相同
});
</script>
</script>
</html>
合并前:(手绘和以上HTML代码不同)
111 222 333 111 555 333 444 111 333 222 666 888
合并后:(合并第一列中相同的数据)
111 222 333 555 333 444 111 333 222 666 888
其实合并的数据默认居中显示
该方法较为实用,进行封装后,其他页面引用调用较为简单 且可以根据具体需求去改变大赞!!!