jquery设置table中td隐藏显示

最新推荐文章于 2023-09-23 14:24:23 发布

weixin_34378767

最新推荐文章于 2023-09-23 14:24:23 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 java ViewUI

原文链接：http://www.cnblogs.com/VincentLuo/archive/2012/05/12/juqery-enable-td-in-

本文介绍如何使用jQuery实现根据复选框选择来动态显示或隐藏表格中的指定列，涉及HTML表单元素和jQuery操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要按照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>
&nbsp;
</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>