通过Jquery动态隐藏或显示表格列

最新推荐文章于 2024-04-09 14:22:17 发布
最新推荐文章于 2024-04-09 14:22:17 发布
阅读量265 收藏
点赞数
文章标签： javascript ui xhtml ViewUI
原文链接：http://www.cnblogs.com/zlbBlog/archive/2012/11/24/2785325.html
版权
通过Jquery动态隐藏或显示表格列

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryFrm.aspx.cs" Inherits="WebTest.JqueryFrm" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Js/jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $().ready(function ()
        {
            $("#HideTd").children().each(function ()
            {
                $(this).children().each(function ()
                {
                    $(this).children().eq(0).dblclick(function ()
                    {
                        $(this).toggle(
                            function () {
                                $("#HideTd").children().each(function () {
                                    $(this).children().each(function () {
                                        $(this).children().eq(1).hide();
                                    });
                                });
                            },
                            function () {
                                $("#HideTd").children().each(function () {
                                    $(this).children().each(function () {
                                        $(this).children().eq(1).show();
                                    });
                                });
                            }
                            );
                    });
                });
            });
        });
    </script>
    <style type="text/css">
        .style1
        {
            width: 38px;
        }
        .style2
        {
            width: 40px;
        }
        .style3
        {
            width: 49px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table id="HideTd">
            <tr>
                <td bgcolor="#666699" class="style1">
                    1
                </td>
                <td class="style2">
                    2
                </td>
                <td class="style3">
                    3
                </td>
            </tr>
            <tr>
                <td bgcolor="#669999" class="style1">
                    1
                </td>
                <td class="style2">
                    2
                </td>
                <td class="style3">
                    3
                </td>
            </tr>
              <tr>
                <td bgcolor="#666699" class="style1">
                    1
                </td>
                <td class="style2">
                    2
                </td>
                <td class="style3">
                    3
                </td>
            </tr>
            <tr>
                <td bgcolor="#669999" class="style1">
                    1
                </td>
                <td class="style2">
                    2
                </td>
                <td class="style3">
                    3
                </td>
            </tr>
              <tr>
                <td bgcolor="#666699" class="style1">
                    1
                </td>
                <td class="style2">
                    2
                </td>
                <td class="style3">
                    3
                </td>
            </tr>
            <tr>
                <td bgcolor="#669999" class="style1">
                    1
                </td>
                <td class="style2">
                    2
                </td>
                <td class="style3">
                    3
                </td>
            </tr>
              <tr>
                <td bgcolor="#666699" class="style1">
                    1
                </td>
                <td class="style2">
                    2
                </td>
                <td class="style3">
                    3
                </td>
            </tr>
            <tr>
                <td bgcolor="#669999" class="style1">
                    1
                </td>
                <td class="style2">
                    2
                </td>
                <td class="style3">
                    3
                </td>
            </tr>
              <tr>
                <td bgcolor="#666699" class="style1">
                    1
                </td>
                <td class="style2">
                    2
                </td>
                <td class="style3">
                    3
                </td>
            </tr>
            <tr>
                <td bgcolor="#669999" class="style1">
                    1
                </td>
                <td class="style2">
                    2
                </td>
                <td class="style3">
                    3
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

posted on 2012-11-24 01:44 潜心编程 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/zlbBlog/archive/2012/11/24/2785325.html

weixin_30273931
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现表格动态修改和隐藏 实例
09-20
jQuery实现表格动态修改和隐藏jQuery实现表格动态修改和隐藏jQuery实现表格动态修改和隐藏
jQuery 动态显示、隐藏列
asd3318118的博客
06-12 171
<html> <head> <title></title> <script type="text/javascript" src="jquery-1.1.3.pack.js"></script> <style type="text/css">...
jquery入门之动态隐藏显示列
大烟斗的BLOG
12-25 163
首先 去下载一个jquery.js. 其他看代码吧： [code="java"] $(document).ready(function(){ $("td:eq(2)",$("tr")).hide(); $("td:eq(3)",$("tr")).hide(); $("td:eq(4)",$("tr")).hide();
js 实现 用JavaScript隐藏或显示表格列
03-31
js 实现 用JavaScript隐藏或显示表格列! 值得下载看看!资源免费,大家分享!!
jQuery怎么动态显示和隐藏datagrid中的某一列
u013106433的专栏
12-11 601
$(function(){     $('#tt').datagrid({       title:'报表统计',       width:1020,       height:400,       url:'',       fitColumns:true,       loadMsg:'正在获取,请稍侯...',       singleSelect:true,
jQuery动态显示和隐藏datagrid中的某一列的方法
10-26
在jQuery中，动态显示和隐藏`datagrid`中的某一列是一项常用的功能，这使得用户可以根据需要选择展示或隐藏数据列，从而提高数据展示的灵活性。在本文中，我们将深入探讨如何利用jQuery实现这一功能。 首先，我们...
jquery关于表格及表格列隐藏和显示问题探讨
12-09
1.关于指定表格指定列隐藏显示 代码如下: $(“:checkbox[name*=month]”).each(function(){ if(!$(this).attr(“checked”)){ var colnum = $(this).val(); $(“#listPage”).find(‘tr’).find(“td:eq(” + colnum...
layui按条件隐藏表格列的实例
10-16
在某些情况下，我们可能需要根据特定的业务逻辑或用户需求动态地显示或隐藏表格中的某些列。以下是一个关于如何实现这一功能的具体实例。 首先，我们需要引入layui的库文件，包括`table`、`form`和`laypage`模块。...
Jquery dataTable显示指定列
08-09
该demo的最终实现效果是：有一个选择弹框，在弹框中选择想要显示的列，最后使用Jquery dataTable插件显示出用户想要显示的列
jqgrid动态显示，隐藏指定列
最新发布
showerin的博客
04-09 342
【代码】jqgrid动态显示，隐藏指定列。
jquery.dataTables表格列动态显示隐藏封装(二)
飞天代码的博客
05-24 1万+
jquery.dataTables 列动态显示隐藏
JQuery_利用JQuery实现对表格中的部分列实现隐藏
迎难而上
03-04 1万+
我们经常看到如下的页面，页面中有很多的数据项。我们可能只关注某些项，这时候我们就需要部分列显示的效果了。 部分显示与隐藏的设计思路： 1. 对tr的每一项中都放置一个 并设置一个相同的name,如list(方便取值)。 2.并设置checkbox的value值，并使value的值等于所在的列的值。 3.当用户点击隐藏选择的列时，通过jquery取得checkbox中
JS控制表格的列显示和隐藏
cntnn11的专栏
08-26 5306
JS控制表格的列显示和隐藏 /* * 控制表格的列显示和隐藏 * 使用方法：在网页读取时调用control_show()方法即可。 * 说明： * table_cell_dis()方法为获取 显示/隐藏 控制栏。 * tb_showbox()方法为显示和隐藏的效果具体实现 * 注：目前该功能仅适用于表格操作！ * 该方法在功能上没问题！但是chrome和火狐的显示效果会出问题！目
jqgrid动态显示/隐藏某一列
热门推荐
LuanTaiLang001的专栏
12-11 2万+
jQuery("#grid_id").setGridParam().showCol("colname").trigger("reloadGrid"); jQuery("#grid_id").setGridParam().hideCol("colname").trigger("reloadGrid");
jquery实现表单操作根据某列数据状态进行显示和隐藏
zcc513830917的博客
03-14 2322
jquery实现表单操作根据某列数据状态进行显示和隐藏 > ${e.value} ${e.valu
jQuery实现简单点击隐藏和点击显示列表的功能
weixin_34034261的博客
12-29 3168
实现功能为:列表内容较长 隐藏部分内容 点击按钮显示隐藏内容 再次点击隐藏内容 jQ代码如下: $(function(){ var $cate = $("ul li:gt(5):not(':last')") ;//获取大于第五行的内容不包括最后一行为对象 $cate.hide();//将对象隐藏 var...
jQuery之动态为表格添加数据
a1k2l45k的博客
05-19 2万+
项目需求 需要一个页面，包括一张表格，一个button(id=”button1”) button1点击事件是会在页面上方出现用来为表格添加显示框，背景为灰色 显示框中也有一个button(id=”button2),其点击事件是将显示框中的数据添加到页面 的表格中 显示框中需要包括一个div,其点击事件是关闭显示框 步骤 HTML结构和CSS美化 ...
markdown表格可以通过点击隐藏和显示，且表格居中
03-31
Markdown语法本身不支持点击隐藏和显示表格的功能，但可以通过HTML语言中的JavaScript实现。具体做法如下： 1. 在Markdown中插入HTML代码，用`<div>`标签包裹表格，并为`<div>`标签添加`id`属性，如下所示： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值