合并table中某一列相邻的相同的行

最新推荐文章于 2024-07-12 16:27:40 发布

weixin_30950887

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量207

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xkzy/p/3881235.html

版权

合并table中某一列相邻的相同的行
1. [代码]合并table中某一列相邻的相同的行
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
<script id="jquery_183" type="text/javascript" class="library" src="http://sandbox.runjs.cn/js/sandbox/jquery/jquery-1.8.3.min.js"></script>

<style type="text/css">
table.hovertable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
}
table.hovertable th {
background-color:#c3dde0;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.hovertable tr {
background-color:#d4e3e5;
}
table.hovertable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
</style>
<script>
$(function(){
$("table tr").live("mouseover",function(){
$(this).css("backgroundColor","#ffff66");
})
$("table tr").live("mouseout",function(){
$(this).css("backgroundColor","#d4e3e5");
})
hebingRows(2);
})
function hebingRows(col){
var trs = $("table tr");
var rows = 1;
for(var i=trs.length;i>0;i--){
var cur = $($(trs[i]).find("td")[col]).text();
var next = $($(trs[i-1]).find("td")[col]).text();
if(cur==next){
rows++;
$($(trs[i]).find("td")[col]).remove();
} else {
$($(trs[i]).find("td")[col]).attr("rowspan",rows);
rows=1;
}
}
}
</script>
</head>
<body>

<table class="hovertable">ppt素材
<tr>http://www.huiyi8.com/ppt/
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr >
<td>Item 1A</td><td>Item 1B</td><td>Item 1C</td>
</tr>
<tr >
<td>Item 2A</td><td>Item 2B</td><td>Item 1C</td>
</tr>
<tr >
<td>Item 3A</td><td>Item 2B</td><td>Item 1C</td>
</tr>
<tr >
<td>Item 4A</td><td>Item 4B</td><td>Item 2C</td>
</tr>
<tr >
<td>Item 5A</td><td>Item 5B</td><td>Item 2C</td>
</tr>
<tr >
<td>Item 4A</td><td>Item 5B</td><td>Item 3C</td>
</tr>
<tr >
<td>Item 5A</td><td>Item 4B</td><td>Item 4C</td>
</tr>
<tr >
<td>Item 4A</td><td>Item 5B</td><td>Item 4C</td>
</tr>
<tr >
<td>Item 5A</td><td>Item 5B</td><td>Item 5C</td>
</tr>
</table>
</body>
</html>

转载于:https://www.cnblogs.com/xkzy/p/3881235.html

weixin_30950887

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
合并table中某一列相邻的相同的行

合并table中某一列相邻的相同的行1. [代码]合并table中某一列相邻的相同的行 <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Run...
复制链接

扫一扫