JSP中table表格合并列相同的内容

最新推荐文章于 2020-11-09 19:34:42 发布

转载最新推荐文章于 2020-11-09 19:34:42 发布 · 2.7k 阅读

文章标签：

#table合并列

JSP 同时被 2 个专栏收录

12 篇文章

订阅专栏

table

1 篇文章

订阅专栏

博客介绍了页面table表格中合并相同数据栏的方法。通过封装的JQuery小插件，可实现指定列相同数据的合并。代码中给出了示例表格及具体的合并操作代码，传入对应列数即可完成合并。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自：https://blog.youkuaiyun.com/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>