您的位置:首页 > Web前端 > JQuery

jquery设置table中td隐藏显示

2012-05-12 22:26 489 查看
需要按照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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: