Table行合并操作

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

此方法不可取，但几天心血保留，已有新想法，稍后会出一个完善的Table行列合并方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Table 行合并操作</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../../js/CarCube/jquery-1.10.2.min.js"></script>
<style>
* { margin:0; padding:0; outline:0; background:transparent;}
table { border-collapse:collapse; border-spacing:0; line-height:1.5; font-family:"微软雅黑"; font-size:14px; color:#666;}
.dn { display:none;}.bg_fec { background:#fec!important;}
.row_comb { cursor:pointer;}
.row_comb:hover { background:#EEF7FF!important;}.tab_list { border:1px solid #ccc; line-height:1.8;}
.tab_list th { padding:6px 10px; border:1px solid #ccc; background:#eee; text-align:center;}
.tab_list td { padding:6px 10px; border:1px solid #ccc; background:#f9f9f9; font-size:12px; font-family:"宋体"; text-align:center;}
.tab_list tr:nth-of-type(2n) td { background:#fefefe;}
</style>
</head><body style="width:auto; min-width:0;">
<br /><script>
$(function(){ $.tableMerger("#tab1");
});$.tableMerger = function(tab){
var tab = $(tab),
col_sum = getColSum(tab.find("tr").eq(0)); //列总数量 if(col_sum === -1) {
console.log("无法获取合并行数");
return false;
} //Get total columns table
function getColSum(o){
var sum = -1,
tmp;
if (typeof o == "object" && o.length > 0) {
o = o.children();
sum = 0;
for(var i=0; i<o.length; i++) {
var tmp = o.eq(i).attr("colspan");
if (!isNaN(tmp)) {
sum += tmp*1;
} else {
++sum;
}
}
}
return sum;
} //Set data-colspan,data-rowspan value
function childData() {
var o = tab.find("tr").children("[rowspan], [colspan]"),
tmp = -1; for(var i=0; i<o.length; i++) {
tmp = o.eq(i).attr("rowspan");
if(!isNaN(tmp)) {
o.eq(i).attr("data-rowspan", tmp);
}
tmp = o.eq(i).attr("colspan")
if(!isNaN(tmp)) {
o.eq(i).attr("data-colspan", tmp);
}
}
}
childData(); tab.on("click", ".row_comb", function(){
var self = $(this),
comb_sum = self.attr("rowspan")*1,
self_par = self.parents("tr"),
self_tr = self_par.children(),
tmp; //Set rowspan value, child : 表示一个td/th节点
function setRowspanVal(child, isShow) {
var rowspan_val = child.attr("rowspan") * 1;
if (!isNaN(rowspan_val)) {
if (isShow == 2) { //Parent node show
child.attr("rowspan", rowspan_val + comb_sum - 1);
} else if(isShow == 1) { //Show
if (rowspan_val < comb_sum) {
child.attr("rowspan", child.attr("data-rowspan"));
} else {
child.attr("rowspan", rowspan_val + comb_sum - 1);
}
} else if (isShow == 0) { //Hide
if (rowspan_val <= comb_sum) {
child.attr("rowspan", 1);
} else {
child.attr("rowspan", rowspan_val - comb_sum + 1);
}
}
}
} if (comb_sum > 1) { //Hide merge row
for(var i=self_par.index()+1; i<self_par.index() + self.attr("data-rowspan")*1; i++) { //Hide nodes under row
tab.find("tr").eq(i).addClass("dn");
} //self.data("child", self_par.children(":gt("+ self.index() +")")); //Save remove the row child
for(var i=0; i<self_tr.length; i++) { //Set the row rowspan value
setRowspanVal(self_tr.eq(i), 0);
/*
if(i > self.index()) { //Remove the row child
self_tr.eq(i).remove()
}
*/
} //Total replace
/*
var tot_tr = tab.find("tr").eq(self_par.index() + self.attr("data-rowspan")*1 - 1).clone().children();
tot_tr.addClass("tab-mer-off");
self_par.append(tot_tr);
*/ if(self_tr.length < col_sum) { //Set parent node rowspan value
var tr_o = tab.find("tr"),
cur_tr_len; for(var n=0; n<col_sum - self_tr.length; n++) {
for(var i=self_par.index()-1; i>=0; i--) {
cur_tr_len = tr_o.eq(i).children().length;
if(cur_tr_len > self_tr.length + n) {
setRowspanVal(tr_o.eq(i).children().eq(cur_tr_len - self_tr.length - 1 - n), 0);
break;
}
}
}
} } else if (comb_sum == 1) { //Show merge row
if(self.index() != 0 && self_tr.eq(self.index()-1).attr("rowspan") == 1) {
alert("请先展开父级节点！")
return false;
} comb_sum = self.attr("data-rowspan") * 1; //Get Show row number for(var i=self_par.index()+1; i<self_par.index() + comb_sum; i++) { //Show nodes under row
var cur_tr = tab.find("tr").eq(i).children("[rowspan]");
tab.find("tr").eq(i).removeClass("dn");
for(var n=0; n<cur_tr.length; n++) {
cur_tr.eq(n).attr("rowspan", cur_tr.eq(n).attr("data-rowspan")); //Reset the next node rowspan value
}
} for(var i=0; i<self_tr.length; i++) { //Set current row rowspan value
setRowspanVal(self_tr.eq(i), 1);
} /*
var tmp_child = self.data("child");
for(var i=0; i<tmp_child.length; i++) {
tmp_child.eq(i).attr("rowspan", tmp_child.eq(i).attr("data-rowspan"));
console.log("\n"+tmp_child.eq(i).attr("rowspan"))
}
*/ //Total replace
/*
self_par.find(".tab-mer-off").remove();
self_par.append(tmp_child);
*/ if(self_tr.length < col_sum) { //Set parent node rowspan value
var tr_o = tab.find("tr"),
cur_tr_len; for(var n=0; n<col_sum - self_tr.length; n++) {
for(var i=self_par.index()-1; i>=0; i--) {
cur_tr_len = tr_o.eq(i).children().length;
if(cur_tr_len > self_tr.length + n) {
setRowspanVal(tr_o.eq(i).children().eq(cur_tr_len - self_tr.length -1 - n), 2);
break;
}
}
}
} } });
}
</script><table id="tab1" class="tab_list" width="90%" style="margin:0 auto;">
<tr>
<td class="row_comb" rowspan="12">一级</td>
<td class="row_comb" rowspan="6">二级</td>
<td class="row_comb" rowspan="3">三级</td>
<td>1</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>2</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="row_comb" rowspan="3">三级</td>
<td>4</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>5</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>6</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="row_comb" rowspan="6">二级</td>
<td class="row_comb" rowspan="3">三级</td>
<td>7</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>8</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>9</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="row_comb" rowspan="3">三级</td>
<td>10</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>11</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>12</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br /></body>
</html>