转载：不记得了，等下次有时间我去翻翻；
表格的数据是用jquery-datatable从后台获取；
目的：达到相同行单元格的数据自动合并；
1.先建立一个datatable表格：
<table class="table table-striped table-bordered" cellspacing="0"
width="100%" id="datatable"
style="text-align: center;">
<thead>
<tr>
<th>grade</th>
<th>class</th>
<th>name</th>
<th>english</th>
<th>math</th>
<th>history</th>
<th>science</th>
</tr>
</thead>
</table>
2.通过ajax获得表格数据，我只截取了简单的一段，如果不知道用datatablle的可以去百度一下用法，这个我主要是想说明在数据初始化的时候调用hide方法，然后将多余单元格去掉。这个是表格是没有分页的；
var table;
$(document)
.ready(
function() {
table = $('#datatable')
.DataTable(
{
"dom" : '<"top"i>rt<"bottom"flp><"clear">',
"scrollX": true,
"searching" : false,
"bJQueryUI" : true,
"sPaginationType" : "full_numbers",
"paging":false,
"ordering" :false, //去除排序
"serverSide" : true,//开启服务器模式，使用服务器端处理配置datatable
"processing" : true,//开启读取服务器数据时显示正在加载中……特别是大数据量的时候，开启此功能比较好
//"ajax": '${ss}/user/userList.do',
ajax : function(data, callback,settings) {
$.ajax({
type : "GET",
url : 'merge',
cache : false, //禁用缓存
dataType : "json",
success : function(result) {
var returnData = {};
// returnData.recordsTotal = result.length;//result.recordsTotal;//总记录数
returnData.data = result;
returnData.recordsFiltered = result.length;//result.recordsFiltered;//后台不实现过滤功能，每次查询均视作全部结果
// returnData.length = result.length;
//调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
callback(returnData);
hide(0);
hide(1);
$(".remove").remove();
$(".marge").css("vertical-align","middle");
},
error : function(
XMLHttpRequest,
textStatus,
errorThrown) {
alert("查询失败");
}
});
},
"columns" : [
{
"data" : "grade"
},
{
"data" : "classes"
},
{
"data" : "name"
},
{
"data" : "english"
},
{
"data" : "math"
},
{
"data" : "history"
},
{
"data" : "science"
}
]
});
});
3.合并单元格的方法，hide方法
function hide(v) {//参数：输入要隐藏的列数，要查第几列，我的是第一列和第二列，所以上面是hide(0)和hide(1)
tr = $("#datatable tr").length;// 获取当前表格中行数
var mark = 0; //要合并的单元格数
var index = 0; //起始行数
/*
* 要合并单元格，需要存储两个参数，
* 1，开始合并的单元格的第一行的行数，
* 2.要合并的单元格的个数
**/
//判断 若只有一行数据，就是表头，则不做调整
if (tr > 1) {
//var i=1 比较当前的tr和上一个tr的值
for (var i = 0; i < tr; i++) {
var ford = $("#datatable tr:gt(0):eq(" + i + ") td:eq("+ parseInt(v) + ")").text();
//根据下标获取单元格的值
// tr:gt(0) 从下标0 开始获取
// tr:gt(0):eq( i ) :i 标识 当前行的下标 ，0 开始
// td:eq(0) 当前行的第一个单元格，下标从0开始
var behind = $("#datatable tr:gt(0):eq(" + (parseInt(i) + 1)+ ") td:eq(" + parseInt(v) + ")").text();
if (ford != "" && ford == behind) {
$("#datatable tr:gt(0):eq(" + (parseInt(i) + 1)+ ") td:eq(" + parseInt(v) + ")").attr("class","remove");
mark = mark + 1;
} else if (ford != behind) {
index = i - mark;
$("#datatable tr:gt(0):eq(" + index + ") td:eq("+ parseInt(v) + ")").attr("rowspan",mark + 1);//将当前的行加入属性rowspan，合并 mark+1行
$("#datatable tr:gt(0):eq(" + index + ") td:eq("+ parseInt(v) + ")").attr("class","marge");
//rowspan 列上横跨， colspan 行上横跨
//后面的参数，表示横跨的单元格个数，
//合并单元格就是将其他的单元格隐藏（hide）,或删除（remove）。
//将一个单元格的rowspan 或colsspan 加大
mark = 0;
}
}
}
}
4.大功告成，看下成果，原谅我不太清晰，因为公司网络管控比较严，我手机用手机拍的照片。
datatable 动态合并相同行单元格
网友评论