jquery设置table中td隐藏显示
2012-05-12 22:26
489 查看
需要按照checkbox选中条件来隐藏、显示table中的某一列数据
以下是脚本与html,做个笔记!
View Code
以下是脚本与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>
相关文章推荐
- jquery设置table中td隐藏显示 俗称动态列
- 用js操作table(tr,td) (包括TD内容的隐藏,背景颜色和字体的设置)
- div\table\tr\th\td显示内容不换行设置
- 解决JQuery中datatables设置隐藏显示列多次提交后台刷新数据的问题
- table中td隐藏溢出文字,鼠标停留显示
- jQuery 设置控件的显示与隐藏
- JQuery 设置show/hide显示隐藏属性无效的原因
- Jquery-1.3.2在IE8中用toggle控制table 的 tr td显示和隐藏问题
- css和jquery设置文字的显示和隐藏
- IE兼容问题之一:table--td设置背景颜色or背景图片,border不能正常显示(用的框架是layui)
- table的td内容超出隐藏并显示省略号
- Table里td中的文本过长,设置不换行,随内容同行显示
- Table里td中的文本过长,设置不换行,随内容同行显示(转载)
- 如何设置table,使单元格内容无论多少,只显示一行,超过单元格宽度的部分自动隐藏,当鼠标放到单元格上,内容自动显示完整?
- 扩展bootstrap-table插件,使其在设置显示/隐藏列时,将设置保存至cookie或者服务器端
- js动态控制td隐藏显示 jquery 动态控制td被另一个td代替,非常实用
- jQuery如何设置下拉框显示与隐藏
- HTML:table中的td文字隐藏并实现hover显示全部文字
- table里面怎么设置td的样式和Excel里面的表格一样&&当光标浮动td上到元素上时如何显示全部文本。
- jquery设置DIV显示和隐藏