jQuery 动态显示、隐藏列

 

<html>
    <head>
        <title></title>
        <script type="text/javascript" src="jquery-1.1.3.pack.js"></script>

        <style type="text/css">
            body
            {
                font: normal 11px auto "Trebuchet MS" , Verdana, Arial, Helvetica, sans-serif;
                color: #4f6b72;
                background: #E6EAE9;
            }
            a
            {
                color: #c75f3e;
            }
            #mytable
            {
                width: 700px;
                padding: 0;
                margin: 0;
            }
            caption
            {
                padding: 0 0 5px 0;
                width: 700px;
                font: italic 11px "Trebuchet MS" , Verdana, Arial, Helvetica, sans-serif;
                text-align: right;
            }
            th
            {
                font: bold 11px "Trebuchet MS" , Verdana, Arial, Helvetica, sans-serif;
                color: #4f6b72;
                border-right: 1px solid #C1DAD7;
                border-bottom: 1px solid #C1DAD7;
                border-top: 1px solid #C1DAD7;
                letter-spacing: 2px;
                text-transform: uppercase;
                text-align: left;
                padding: 6px 6px 6px 12px;
                background: #CAE8EA no-repeat;
            }
            th.nobg
            {
                border-top: 0;
                border-left: 0;
                border-right: 1px solid #C1DAD7;
                background: none;
            }
            td
            {
                border-right: 1px solid #C1DAD7;
                border-bottom: 1px solid #C1DAD7;
                background: #fff;
                font-size: 11px;
                padding: 6px 6px 6px 12px;
                color: #4f6b72;
            }
            td.alt
            {
                background: #F5FAFA;
                color: #797268;
            }
            th.spec
            {
                border-left: 1px solid #C1DAD7;
                border-top: 0;
                background: #fff no-repeat;
                font: bold 10px "Trebuchet MS" , Verdana, Arial, Helvetica, sans-serif;
            }
            th.specalt
            {
                border-left: 1px solid #C1DAD7;
                border-top: 0;
                background: #f5fafa no-repeat;
                font: bold 10px "Trebuchet MS" , Verdana, Arial, Helvetica, sans-serif;
                color: #797268;
            }
            /*---------for IE 5.x bug*/
            html > body td
            {
                font-size: 11px;
            }
            body, td, th
            {
                font-family: 宋体, Arial;
                font-size: 12px;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#tbGridView>thead>tr th").each(function(iIndex) {
                    $(this).bind("click", function() {
                        var GridViewIndex = iIndex + 1;
                        $("#tbGridView td:nth-child(" + GridViewIndex + "), #tbGridView th:nth-child(" + GridViewIndex + ")").toggle();
                    });
                });
            });
        </script>
    </head>
    <body>
        <table id="tbGridView">
            <thead>
                <tr>
                    <th scope="col">姓名</th>
                    <th scope="col">年龄</th>
                    <th scope="col">职位</th>
                    <th scope="col">地址</th>
                    <th scope="col">备注</th>
                </tr>
            </thead>
            <tbody>
                 <tr>
                    <td >赵一</td>
                    <td >23</td>
                    <td >.Net开发工程师</td>
                    <td >北京朝阳</td>
                    <td >工作三年</td>
                 </tr>
                 <tr>
                    <td >钱二</td>
                    <td >30</td>
                    <td >.Net开发工程师</td>
                    <td >北京朝阳</td>
                    <td >工作三年</td>
                 </tr>
                 <tr>
                    <td >孙三</td>
                    <td >26</td>
                    <td >C开发工程师</td>
                    <td >北京通州</td>
                    <td >工作二年</td>
                 </tr>
                 <tr>
                    <td >李四</td>
                    <td >25</td>
                    <td >Java开发工程师</td>
                    <td >北京海淀</td>
                    <td >工作四年</td>
                 </tr>
            </tbody>
        </table>
    </body>
</html>

 

转载于:https://www.cnblogs.com/SmartFramework/archive/2009/06/12/1502282.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值