JQuery_利用JQuery实现对表格中的部分列实现隐藏

最新推荐文章于 2023-03-09 15:03:18 发布

高达一号

最新推荐文章于 2023-03-09 15:03:18 发布

阅读量1w

点赞数 8

分类专栏： JQuery应用文章标签： jquery 部分显示与隐藏特效

本文链接：https://blog.csdn.net/u010003835/article/details/50805351

版权

JQuery应用专栏收录该内容

7 篇文章 0 订阅

订阅专栏

我们经常看到如下的页面，页面中有很多的数据项。我们可能只关注某些项，这时候我们就需要部分列显示的效果了。

部分显示与隐藏的设计思路：

1. 对tr的每一项中都放置一个<input type="checkbox"/> 并设置一个相同的name,如list(方便取值)。

2.并设置checkbox的value值，并使value的值等于所在的列的值。

3.当用户点击隐藏选择的列时，通过jquery取得checkbox中的value,将其所对应的列（标题与内容）用 hide函数进行隐藏。

4.当用户点击全部显示的时候，将checked=="checked"的项显示出来，并清空checked标志。

示例代码：用的 jquery-1.11.3 只需所利用的jquery库名字即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .listTable tr{
            text-align: center;
        }
    </style>
    <script type="text/javascript" src="jquery-1.11.3.js">
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#hide").click(function(){
              $("input[name='list']:checked").each(function() {
                  var index = null;
                  if (true == $(this).prop("checked")) {
                      index = $(this).prop('value');
                      console.log($(this).prop('value'));
                  }
                  var strth = ".listTable tr th:nth-child("
                  var strtd = ".listTable tr td:nth-child("
                  $(strtd+index+")").hide();
                  $(strth+index+")").hide();
              })});
            $("#show").click(function(){
                $("input[name='list']:checked").each(function() {
                    var index = $(this).prop('value');
                    var strth = ".listTable tr th:nth-child("
                    var strtd = ".listTable tr td:nth-child("
                    $(strtd+index+")").show();
                    $(strth+index+")").show();

                    $(this).prop("checked",false);//清除checked标记
                })});
               // $(".listTable tr th:nth-child(1)").toggle();
                //$(".listTable tr td:nth-child(1)").toggle(); //设置为0表示不用动画 ，1000就1秒的时间来展示或者隐藏
            });
    </script>
</head>


<body>

    <input id="hide" type="button" value="隐藏所选择的列" />
    <input id="show" type="button" value="显示所有的列" />

    <table class="listTable" width="100%" border="0" cellpadding="0" cellspacing="1">

        <tbody>
        <tr>
            <th width="3%"><input type="checkbox" id="selectAllOrNoneBtn" name="list" value="1" οnclick="listSelectAllOrNone(this,'id');"></th>
            <th width="5%">序号<input type="checkbox" name="list" value="2"/></th>
            <th width="10%">机构名称<input type="checkbox" name="list" value="3"/></th>
            <th width="6%">员工姓名<input type="checkbox" name="list" value="4"/></th>
            <th width="6%">班次名称<input type="checkbox" name="list" value="5"/></th>
            <th width="6%">上班排名<input type="checkbox" name="list" value="6"/></th>
            <th width="10%">上班时间(最早打卡时间)<input type="checkbox" name="list" value="7"/></th>
            <th width="6%">下班排名<input type="checkbox" name="list" value="8"/></th>
            <th width="10%">下班时间(最晚打卡时间)<input type="checkbox" name="list" value="9"/></th>
            <th width="6%">统计日期<input type="checkbox" name="list" value="10"/></th>
        </tr>


        <tr>
            <td>
                <div align="center">
                    <input type="checkbox" οnclick="setSelectAllOrNoneBtn(this,'selectAllOrNoneBtn');" name="id"
                           value="1325">
                </div>
            </td>
            <td>1</td>
            <td>xxxxx（北京）有限公司</td>
            <td>xxxxx</td>
            <td>朝九晚五</td>
            <td>无</td>
            <td>/</td>
            <td>无</td>
            <td>/</td>
            <td>2016-03-03</td>
        </tr>


        <tr>
            <td>
                <div align="center">
                    <input type="checkbox" οnclick="setSelectAllOrNoneBtn(this,'selectAllOrNoneBtn');" name="id"
                           value="1342">
                </div>
            </td>
            <td>2</td>
            <td>燕南xxx（北京）有限公司</td>
            <td>王xxx</td>
            <td>朝九晚五</td>
            <td>无
            </td>
            <td>
                /
            </td>
            <td>
                无
            </td>
            <td>
                /
            </td>
            <td>
                2016-03-03
            </td>
        </tr>

        </tbody>
    </table>

</body>
</html>

高达一号

关注

8
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
JQuery_利用JQuery实现对表格中的部分列实现隐藏

我们经常看到如下的页面，页面中有很多的数据项。我们可能只关注某些项，这时候我们就需要部分列显示的效果了。部分显示与隐藏的设计思路：1. 对tr的每一项中都放置一个并设置一个相同的name,如list(方便取值)。2.并设置checkbox的value值，并使value的值等于所在的列的值。3.当用户点击隐藏选择的列时，通过jquery取得checkbox中
复制链接

扫一扫

专栏目录