jquery设置table中td隐藏显示
需要按照checkbox选中条件来隐藏、显示table中的某一列数据
以下是脚本与html,做个笔记!
$(document).ready(function () {
$("#cblAllParamList input[type='checkbox']").each(function (i) {
$(this).click(function () {
var j = i + 2;
if (!showParam) {
$("#tbData tr").find('td:eq(' + j + ')').hide();
$("#trHeader").find('th:eq(' + j + ')').hide();
}
else {
$("#tbData tr").find('td:eq(' + j + ')').show();
$("#trHeader").find('th:eq(' + j + ')').show();
}
});
});
});
View Code
<table id="cblList" border="0">
<tr>
<td>
<input type="checkbox" name="cblList0" checked="checked" />语文
</td>
<td>
<input type="checkbox" name="cblList1" checked="checked" />数学
</td>
<td>
<input type="checkbox" name="cblList2" checked="checked" />英语
</td>
<td>
<input type="checkbox" name="cblList3" checked="checked" />历史
</td>
<td>
<input type="checkbox" name="cblList4" checked="checked" />化学
</td>
<td>
<input type="checkbox" name="cblList5" checked="checked" />政治
</td>
</tr>
</table>
<table rules="all" class="tbShow" cellspacing="1" cellpadding="4" border="1">
<thead>
<tr>
<th class="thIndex">
序号
</th>
<th class='tdFirst'>
名字
</th>
<th colspan='9'>
课程
</th>
</tr>
<tr id="trHeader">
<th>
</th>
<th class='tdFirst'>
</th>
<th class='thData'>
语文
</th>
<th class='thData'>
数学
</th>
<th class='thData'>
英语
</th>
<th class='thData'>
历史
</th>
<th class='thData'>
化学
</th>
<th class='thData'>
政治
</th>
</tr>
</thead>
<tbody id="tbData">
<tr>
<td>
1
</td>
<td class='tdFirst'>
asp.net</td>
<td class='tdData'>
66</td>
<td class='tdData'>
66</td>
<td class='tdData'>
44
</td>
<td class='tdData'>
99</td>
<td class='tdData'>
100
</td>
<td class='tdData'>
80</td>
</tr>
<tr>
<td>
2
</td>
<td class='tdFirst'>
Java
</td>
<td class='tdData'>
55</td>
<td class='tdData'>
22</td>
<td class='tdData'>
77</td>
<td class='tdData'>
120</td>
<td class='tdData'>
110</td>
<td class='tdData'>
60
</td>
</tr>
</tbody>
</table>