合并table中某一列相邻的相同的行
合并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>
<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<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 goes in the document 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>

合并table中某一列相邻的相同的行的更多相关文章
- 封装Jquery 合并table中任何同列数据
封装代码: jQuery.fn.rowspan = function (colIdx) { //封装JQuery同列值相同合并小插件 return this.each(function () { va ...
- 使用jquery合并表格中相同文本的相邻单元格
一.效果 二.代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <met ...
- JavaScript实现获取table中某一列的值
JavaScript实现获取table中某一列的值 1.实现源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...
- JavaScript获取table中某一列的值的方法
1.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- jquery合并表格中相同文本的相邻单元格
<!DOCTYPE HTML> <html> <head> <title>Example</title> <meta char ...
- 给table中某一列的文字右对齐
一般来说,没写过jquery的前端人员,肯定是定义一个class,给每一行的那列加上align_r{text-align:right}.这是很麻烦的. 所以用jquery来写,可以$("ta ...
- 关于页面中table中相同的列自动合并
代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- 使用js合并table中的单元格
用primefaces做的报表,领导要求合并相同内容的单元格,但是primefaces没有找到可以合并单元格的组件,想来想去,只有页面加载后用js合并了. http://blog.csdn.net/d ...
- HTML锁定Table中某一列
1. 2. 3. function ChangeTable() { var type = document.getElementById("ddl_ReportType").val ...
随机推荐
- 玩具装箱 BZOJ 1010
玩具装箱 [问题描述] P教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的玩具运到北京.他使用自己的压缩器进行压缩,其可以将任意物品变成一堆,再放到一种特殊的一维容器中.P教授有编号为1... ...
- 狗书(flask基础)
为什么选择使用flask? 和其他框架相比, Flask 之所以能脱颖而出,原因在于它让开发者做主,使其能对程序具有全面的创意控制. 在 Flask 中,你可以自主选择程序的组件,如果找不到合适的,还 ...
- Entity Farmework领域建模方式 3种编程方式
一个业务领域由各个实体和各个相互关联且有格子的属性和行为的实体组成,每个实体都有其状态和验证规则需要维护,Entity Framework (后面简称EF)实体框架设计的出现是为了允许开发人员着重关注 ...
- C#/.NET基于Topshelf创建Windows服务的守护程序作为服务启动的客户端桌面程序不显示UI界面的问题分析和解决方案
本文首发于:码友网--一个专注.NET/.NET Core开发的编程爱好者社区. 文章目录 C#/.NET基于Topshelf创建Windows服务的系列文章目录: C#/.NET基于Topshelf ...
- 属性font-family:Font property font-family does not have generic default
以前定义字体都是用的常用的字体,也没注意过会有这个提示,昨天在写界面的时候重新定义了一个本地没有的字体,发现会有提示. W3C的文档: font-family:<family-name>, ...
- git(一):了解、学习、安装git
自述 一直到今天才真正的去了解学习使用git,看<git权威指南>这本书的第一篇,忽然有很多共鸣,比如在大学开始编程的时候,总是把写的所有demo和项目保存在U盘里,内存不够用就改为移动硬 ...
- luogu P1886 滑动窗口(单调队列
题目描述 现在有一堆数字共N个数字(N<=10^6),以及一个大小为k的窗口.现在这个从左边开始向右滑动,每次滑动一个单位,求出每次滑动后窗口中的最大值和最小值. 例如: The array i ...
- Java修饰符关键字的顺序
Java语言规范建议按以下顺序列出修饰符: 1. Annotations 2. public 3. protected 4. private 5. abstract 6. static 7. fina ...
- Go -- 今日头条架构
夏绪宏,今日头条架构师,专注对高性能大规模 Web 架构,云计算.性能优化.编程语言理论等方向,PHP committer,HHVM 项目贡献者.2009 加入百度,先后从事大规模 IDC 自运维设施 ...
- Seven times have I despised my soul 《我曾七次鄙视自己的灵魂》
<我曾七次鄙视自己的灵魂>,纪伯以“自己的灵魂”为名,看穿人性所共有弱点的一首诗.诗句简单有力发人深省,督促人们拥有更高的精神境界,呼吁人们涤荡自己的灵魂,唾弃丑恶,追求高尚. Seven ...