table 合并表格

最新推荐文章于 2024-06-12 14:08:25 发布

yangyanjava

最新推荐文章于 2024-06-12 14:08:25 发布

阅读量113

点赞数

分类专栏：前端文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/yangyanjava/article/details/84614900

版权

32 篇文章 0 订阅

订阅专栏

jquery-latest.js"
!function($){
$.fn.rowspan=function(options){
var defaults = {}
var options = $.extend(defaults, options);
this.each(function () {
var tds=$(this).find("tbody td:nth-child("+options.td+")");
var current_td=tds.eq(0);
var k=1;
tds.each(function(index, element) {
if($(this).text()==current_td.text()&&index!=0){
k++;
$(this).remove();
current_td.attr("rowspan",k);
current_td.css("vertical-align","middle");
}else{
current_td=$(this);
k=1;
}
});
})
}
}( window.jQuery );
-------------------------------------------------------------------------------------------------------------------------
html 页面
<html>
<head>
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery-latest1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#my-table").rowspan({td:1});
});
</script>
</head>
<body>
<table id="my-table" cellpadding="2" cellspacing="0" border="1">
<thead>
<tr>
<th>姓名</th>
<th>学科</th>
<th>学分</th>
</tr>
</thead>
<tbody>
<tr>
<td>小铭</td>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td>小铭</td>
<td>英语</td>
<td>100</td>
</tr>
<tr>
<td>小铭</td>
<td>化学</td>
<td>100</td>
</tr>
<tr>
<td>小铭</td>
<td>美术</td>
<td>100</td>
</tr>
<tr>
<td>小红</td>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td>小红</td>
<td>英语</td>
<td>100</td>
</tr>
<tr>
<td>小红</td>
<td>化学</td>
<td>100</td>
</tr>
<tr>
<td>小红</td>
<td>美术</td>
<td>100</td>
</tr>
</tbody>
</table>
</body>
</html>

关注