jquery动态合并表格行
利用<td rowspan = "num"/>;原理来实现，其中num为要合并的行数。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
td{
border:1px solid red;
}
</style>
</head>
<body>
<table class="table mbn tc-med-1 tc-bold-last tc-fs13-last" id="table1">
<thead>
<tr>
<th>品牌</th>
<th>车型</th>
<th>性别</th>
<th>配额数</th>
<th>完成数</th>
</tr>
</thead>
<tbody>
<tr>
<td>宝马</td>
<td>3系</td>
<td>男</td>
<td>200</td>
<td>100</td>
</tr>
<tr>
<td>宝马</td>
<td>3系</td>
<td>女</td>
<td>100</td>
<td>57</td>
</tr>
<tr>
<td>宝马</td>
<td>5系</td>
<td>男</td>
<td>100</td>
<td>68</td>
</tr>
<tr>
<td>宝马</td>
<td>5系</td>
<td>女</td>
<td>200</td>
<td>94</td>
</tr>
<tr>
<td >宝马</td>
<td>7系</td>
<td>男</td>
<td>100</td>
<td>68</td>
</tr>
<tr>
<td>宝马</td>
<td>7系</td>
<td>女</td>
<td>100</td>
<td>68</td>
</tr>
</tbody>
</table>
</body>
</html>
<script src="design/static/js/jquery.js"></script>
<script src="design/static/js/jquery-ui-1.10.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);
$("#table1").rowspan(2);
$("#table1").rowspan(3);
});
</script>
其它几种方法：
<!DOCTYPE html>
<html>
<head>
<title>merge.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/jquery-ui.css" />
<script src="design/static/js/jquery.js"></script>
<script src="design/static/js/jquery-ui-1.10.min.js"></script>
<script type="text/javascript">
function merge1(){ //可实现单元格，通过给 开始cell的比较
var totalRow = $("#tbl").find("tr").length;
var totalCol = $("#tbl").find("tr").eq(0).find("td").length;
for(var col=totalCol-1;col>=1;col--){
spanNum =1;
startCell = $("#tbl").find("tr").eq(totalRow-1).find("td").eq(col);
for(var row = totalRow-1;row>=1;row--){
targetCell = $("#tbl").find("tr").eq(row-1).find("td").eq(col);
if(startCell.text() == targetCell.text() && startCell.text()!=""){
spanNum++;
targetCell.attr("rowSpan",spanNum);
startCell.remove();
}else{
spanNum =1;
}
startCell = targetCell;
}
}
}
function merge2() { //可实现合并单元格,上下行来比较
var totalCols = $("#tbl").find("tr:eq(0)").find("td").length;
var totalRows = $("#tbl").find("tr").length;
for ( var i = totalCols-1; i >= 1; i--) {
for ( var j = totalRows-1; j >= 1; j--) {
startCell = $("#tbl").find("tr").eq(j).find("td").eq(i);
targetCell = $("#tbl").find("tr").eq(j - 1).find("td").eq(i);
if (startCell.text() == targetCell.text() && targetCell.text() != "") {
targetCell.attr("rowSpan", (startCell.attr("rowSpan")==undefined)?2:(eval(startCell.attr("rowSpan"))+1));
startCell.remove();
}
}
}
}
/*先合并，使用style 的display:none将相同元素隐藏，然后再remove
*/
function merge3(){
var totalCols = $("#tbl").find("tr:eq(0)").find("td").length;
var totalRows = $("#tbl").find("tr").length;
for(var col=totalCols-1;col>=1;col--){
spanNum =1;
startCell = $("#tbl").find("tr").eq(totalRows-1).find("td").eq(col);
for(var row = totalRows-1;row>=1;row--){
targetCell = $("#tbl").find("tr").eq(row-1).find("td").eq(col);
if(startCell.text() == targetCell.text() && startCell.text()!=""){
spanNum++;
targetCell.attr("rowSpan",spanNum);
startCell.attr("style","visibility:hidden");
// startCell.attr("style","display:none");
}else{
spanNum =1;
}
startCell = targetCell;
}
}
for(var j=totalCols-1;j>=1;j--){
for(var i=totalRows-1;i>=1;i--){
cell = $("#tbl").find("tr").eq(i).find("td").eq(j);
if(cell.attr("style")!=undefined){
if(cell.attr("style")=="visibility:hidden"){
cell.remove();
}
}
}
}
}
function merge4(){ //与merge3方法类似，目的是看一下 display:none与visibility:hidden的效果区别
var totalCols = $("#tbl").find("tr:eq(0)").find("td").length;
var totalRows = $("#tbl").find("tr").length;
for(var col=totalCols-1;col>=1;col--){
spanNum =1;
startCell = $("#tbl").find("tr").eq(totalRows-1).find("td").eq(col);
for(var row = totalRows-1;row>=1;row--){
targetCell = $("#tbl").find("tr").eq(row-1).find("td").eq(col);
if(startCell.text() == targetCell.text() && startCell.text()!=""){
spanNum++;
targetCell.attr("rowSpan",spanNum);
startCell.attr("style","display:none");
// startCell.attr("style","display:none");
}else{
spanNum =1;
}
startCell = targetCell;
}
}
for(var j=totalCols-1;j>=1;j--){
for(var i=totalRows-1;i>=1;i--){
cell = $("#tbl").find("tr").eq(i).find("td").eq(j);
if(cell.attr("style")!=undefined){
if(cell.attr("style")=="display:none"){
cell.remove();
}
}
}
}
}
</script>
</head>
<body>
<table id="tbl" cellpadding="3" border=1>
<thead>
<tr>
<td>销售时间</td>
<td>裙子</td>
<td>裤子</td>
<td>风衣</td>
<td>鞋子</td>
</tr>
</thead>
<tbody>
<tr>
<td>8:00-9:00</td>
<td>3</td>
<td>2</td>
<td>4</td>
<td>3</td>
</tr>
<tr>
<td>9:00-10:00</td>
<td>3</td>
<td>2</td>
<td>5</td>
<td>3</td>
</tr>
<tr>
<td>10:00-11:00</td>
<td>3</td>
<td>2</td>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>11:00-12:00</td>
<td>2</td>
<td>2</td>
<td>4</td>
<td>1</td>
</tr>
</tbody>
</table>
<input type="button" value="合并" id="merge" onclick="merge2();">
</body>
</html>
jquery动态合并表格行的更多相关文章
- jquery 动态添加表格行
jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...
- 第84天：jQuery动态创建表格
jQuery动态创建表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- element 动态合并表格
前言 element 官方的例子太简单了,不满足实际的需求 数据肯定是动态的,合并的行数,列数都是动态的,该如何知道每一行的合并数呢 需求 动态合并表格,数据来源于数据库 正文 一开始,我的数据源是单 ...
- 合并表格行---三层for循环遍历数据
合并表格行---三层for循环遍历数据 示例1 json <!DOCTYPE html> <html lang="zh_cn"> <head> ...
- jQuery动态对表格Table进行添加或删除行以及修改列值操作
jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...
- 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理
编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...
- jquery动态创建表格
1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- Jquery动态插入table行
想在一个<table id="table1"></table>标签中动态的插入行,在jquery中可以这样做: $("#table1") ...
- JQuery动态操作表格
新人,小白一枚,刚刚参加工作,所以会在这里记录一些遇到的问题. 最近要做的东西,是对一个表格动态的添加行,删除行,并且对表格中内容进行非空验证. <!DOCTYPE html> <h ...
随机推荐
- div自适应高度
div自适应高度 Div即父容器不根据内容自适应高度,我们看下面的代码: <div id="main"> <div id="content"& ...
- 如何在网页标题栏加入logo图标？
标题栏: <link rel="icon" href="ico地址" type="image/x-icon">收藏夹:<l ...
- weiphp踩坑记录
记录使用weiphp过程中遇到的问题及解决办法: 1.按照网上的教程创建插件怎么没有效果?replyText没有回复信息? 后台清除缓存即可!
- linux文件目录结构
1./ 文件系统的入口,最高一级目录 2./bin 存放基础系统所需的命令 3./boot 包含Linux内核及系统引导程序所需要的文件 4./dev 设备文件存储目录(声卡.磁盘.分区..) 5./ ...
- 今天开始学习java编程
<java>程序设计教程与上机实验
- vue-router2使用
条件:紧接前面vue.js开发环境搭建 1.在cmd输入:npm install vue-router,回车,等待,安装对应版本router: 2.在入口文件用 import vueRouter fr ...
- 关于entityframework 自动生成实体类中加验证的属性重新生成后属性被覆盖解决办法
1.手动创建一个部分类 (你可以手动创建 partial class, 内容为空) [MetadataType(typeof(AppleMetadata))] public partial class ...
- git误删文件找回方法/git版本回退方法
使用git命令 git rm css/\*.css 我删掉了css文件夹下所有以.css结尾的文件,那么要怎样才能把文件找回来呢,下面说说方法,删掉其他的文件也是一样的方式找回. 第一步:使用git ...
- 387. First Unique Character in a String
Given a string, find the first non-repeating character in it and return it's index. If it doesn't ex ...
- 关于MySQL存储过程中遇到的一个错误
执行结果: 查询:)) comment '操作变量' begin set var='MySQL%Orcle%DeLL%IBM'; select replace(var,'%'... 共 行受到影响 执 ...