jquery控制表格跨列单元格显示隐藏
jquery控制表格跨列单元格显示隐藏。表格列很多时，存在跨列跨行合并，如何点击表头实现跨列单元格隐藏，只显示当前第一列的值，从而缩小表格宽度。效果如下
未隐藏原始效果
隐藏其他列，只显示第一列效果
jquery控制表格跨列单元格显示隐藏源代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery控制表格跨列单元格显示隐藏</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
$(".searchChange").click(function () {
var t = this.innerHTML;
var collapse = '-' == t, plus = '+' == t;
this.innerHTML = collapse ? '+' : '-';
if (collapse || plus) {
var td = this.parentNode, colspan = Math.max(parseInt(td.getAttribute('colspan') || 1), parseInt(td.getAttribute('ocol') || 1));
if (colspan == 1 ) return;
var cellIndex = td.cellIndex, endIndex = cellIndex + colspan, tds;
if (collapse) {
if (!td.getAttribute('ocol')) td.setAttribute('ocol', td.getAttribute('colspan') || 1);
$(td).removeAttr('colspan');
}
else $(td).attr({ colspan: colspan });
rows.each(function () {
tds = $('td,th', this);
for (var i = cellIndex ; i < endIndex; i++) {
if (i != cellIndex) tds.eq(i)[collapse ? 'addClass' : 'removeClass']('hidden');
colspan = tds.eq(i).attr('ocol');
if (collapse) {
if (!tds.eq(i).attr('ocol')) tds.eq(i).attr('ocol', tds.eq(i).attr('colspan') || 1);
tds.eq(i).removeAttr('colspan');
}
else tds.eq(i).attr({ colspan: colspan });
}
});
}
});
function getTds(v) { var s = ''; for (var i = 0; i < v; i++) s += '<td class="inserted"></td>'; return s; }
var rows = $('#tb').find('tr');
//补全跨行跨列的td，方便计算位置
$('#tb ').find('th[rowspan],th[colspan],td[rowspan],td[colspan]').each(function () {//补全当前td,th的colspan-1个数的td
var col = parseInt(this.getAttribute('colspan') || 1);
if (col > 1) $(this).after(getTds(col - 1));
}).each(function () {//跨行补全
var row = parseInt(this.getAttribute('rowspan') || 1), col = parseInt(this.getAttribute('colspan') || 1);
if (row < 2) return true;
var rowIndex = this.parentNode.rowIndex, cellIndex = this.cellIndex, s = getTds(col),td;
for (var i = rowIndex + 1, j = rowIndex + row; i < j; i++) {
td = rows.eq(i).find('td,th').eq(cellIndex)
if (td.length) rows.eq(i).find('td,th').eq(cellIndex).before(s)
else rows.eq(i).append(s)
}
});
rows = rows.filter(':gt(0)');
})
</script>
<style>td.inserted,td.hidden{display:none}</style>
</head>
<body>
<div class="row clearfix" style="margin:0">
<table id="tb" width="30%" class="table table-striped table-bordered table-hover" style="width:500px">
<thead>
<!-- 一级标题 -->
<tr id="level1">
<th colspan="5" rowspan="2" bgcolor="#FFFACD">m2x5<br> <a data-type="a" class="searchChange" style="cursor:pointer">-</a></th>
<th colspan="3" bgcolor="yellow">m1x3<br><a data-type="b" class="searchChange" style="cursor:pointer">-</a></th>
<th colspan="2" rowspan="2" bgcolor="#FFFACD">m2x2<br><a data-type="d" class="searchChange" style="cursor:pointer">-</a></th>
<th colspan="2" rowspan="2" bgcolor="#FFFACD">m2x2<br><a data-type="e" class="searchChange" style="cursor:pointer">-</a></th>
<th rowspan="2" bgcolor="#FFFACD">m2x1<br><a data-type="f" class="searchChange" style="cursor:pointer">-</a></th>
<th colspan="8" rowspan="2" bgcolor="#FFFACD">m2x8<br><a data-type="g" class="searchChange" style="cursor:pointer">-</a></th>
<th colspan="5" rowspan="2" bgcolor="#FFFACD">m2x5<br><a data-type="h" class="searchChange" style="cursor:pointer">-</a></th>
<th colspan="4" bgcolor="#FFE4B5">m1x4<br><a data-type="i" class="searchChange" style="cursor:pointer">-</a></th>
<th colspan="4" bgcolor="#FFB6C1">m1x4<br><a data-type="j" class="searchChange" style="cursor:pointer">-</a></th>
<th colspan="8" rowspan="2" bgcolor="#DDA0DD">m2x8<br><a data-type="k" class="searchChange" style="cursor:pointer">-</a></th>
</tr>
<!-- 二级标题 -->
<tr>
<th bgcolor="yellow" colspan="3">r2</th>
<th colspan="4" bgcolor="#FFE4B5">r2</th>
<th colspan="2" bgcolor="#FFB6C1">r2</th>
<th colspan="2" bgcolor="#FFB6C1">r2</th>
<th colspan="3" bgcolor="#8FBC8F">r</th>
<th colspan="3" bgcolor="#8FBC8F">r</th>
</tr>
<!--三级标题 -->
<tr id="xx">
<th bgcolor="#FFFACD">r</th>
<th bgcolor="#FFFACD">r</th>
<th bgcolor="#FFFACD">r</th>
<th bgcolor="#FFFACD">r</th>
<th bgcolor="#FFFACD">r</th>
<th bgcolor="#FFFACD">r1</th>
<th bgcolor="#FFFACD">r1</th>
<th bgcolor="#FFFACD">r1</th>
<th bgcolor="#FFFACD">g</th>
<th bgcolor="#FFFACD">g</th>
<th bgcolor="#FFFACD">g1</th>
<th bgcolor="#FFFACD">g1</th>
<th bgcolor="#FFFACD">g2</th>
<th bgcolor="#FFFACD">f</th>
<th bgcolor="#FFFACD">f</th>
<th bgcolor="#FFFACD">f</th>
<th bgcolor="#FFFACD">f</th>
<th bgcolor="#FFFACD">f</th>
<th bgcolor="#FFFACD">f</th>
<th bgcolor="#FFFACD">f</th>
<th bgcolor="#FFFACD">f</th>
<th bgcolor="#FFFACD">s</th>
<th bgcolor="#FFFACD">s</th>
<th bgcolor="#FFFACD">s</th>
<th bgcolor="#FFFACD">s</th>
<th bgcolor="#FFFACD">s</th>
<th bgcolor="#FFE4B5">x</th>
<th bgcolor="#FFE4B5">x</th>
<th bgcolor="#FFE4B5">x</th>
<th bgcolor="#FFE4B5">x</th>
<th bgcolor="#FFB6C1">x1</th>
<th bgcolor="#FFB6C1">x</th>
<th bgcolor="#FFB6C1">x</th>
<th bgcolor="#FFB6C1">x1</th>
<th bgcolor="#DDA0DD">x</th>
<th bgcolor="#DDA0DD">x</th>
<th bgcolor="#DDA0DD">x</th>
<th bgcolor="#DDA0DD">x</th>
<th bgcolor="#DDA0DD">xx</th>
<th bgcolor="#DDA0DD">x</th>
<th bgcolor="#DDA0DD">x</th>
<th bgcolor="#DDA0DD">x</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" rowspan="2">2x2w</td>
<!--<td>w</td>-->
<td>w</td>
<td>w</td>
<td>w</td>
<td colspan="2" rowspan="2">s2x2</td><!--
<td>s</td>-->
<td>a</td>
<td>a</td>
<td>a</td>
<td>s</td>
<td>a</td>
<td>3a</td>
<td>a</td>
<td>a</td>
<td>aa</td>
<td>s</td>
<td>s</td>
<td>s</td>
<td>s</td>
<td>d</td>
<td>s</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>s</td>
<td>f</td>
<td>f</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<!--<td>w</td>
<td>w</td>-->
<td>w</td>
<td>w</td>
<td>w</td>
<!--<td>s</td>
<td>s</td>-->
<td>a</td>
<td>a</td>
<td>a</td>
<td>s</td>
<td>a</td>
<td>3a</td>
<td>a</td>
<td>a</td>
<td>aa</td>
<td>s</td>
<td>s</td>
<td>s</td>
<td>s</td>
<td>d</td>
<td>s</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>s</td>
<td>f</td>
<td>f</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：jquery控制表格跨列单元格显示隐藏