Jquery隐藏/显示表格内容

最新推荐文章于 2023-03-09 15:03:18 发布
最新推荐文章于 2023-03-09 15:03:18 发布
阅读量3.7k 收藏 2
点赞数 4
分类专栏： 生活杂谈
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aoxiangzhe/article/details/45057701
版权

点击展开详细信息按钮,显示/隐藏该条数据详细信息,下面是源代码,仅供参考!

<html>
  <head>
    <style>
      .panel {
        background-color:green;
        width : 600px;
        height : 80px;
        display:none;
      }
      .tips{
        width:60px;
      }
    th,td{
          border:1px solid blue;
          margin:0px 10px;
          border-bottom:none;
      }
      table{
        border-collapse:collapse;
        border:1px solid blue;
        cellspacing:0px;
        cellpadding:0px;
      }
    </style>
    <script src="jquery.js"></script>
    <script> 
      $(document).ready(function(){
		$(".tips").parents("tr").next().find(".panel").parents().parents("tr").hide();
       $(".tips").click(function(){
		  $(this).parents("tr").next().find(".panel").toggle();
		  $(this).parents("tr").next().find(".panel").parents().parents("tr").toggle();
          //$(".panel").toggle();//
            });
            });
    </script>
   </head>
  <body align="center">
      <h2>
          效果演示
      </h2>
      <table align="center" width="600px;">
          <tr>
            <td>123</td>
            <td>456</td>
            <td>798</td>
            <td>000</td>
            <td class="tips">
              <input type="button" value="展开详细信息"/>
            </td>
          </tr>
          <tr >
            <td  colspan="5">
                <div class="panel">
                 This is my testing page
                </div>
            </td>
          </tr>
          <tr>
            <td>123</td>
            <td>456</td>
            <td>798</td>
            <td>000</td>
            <td class="tips">
              <input type="button" value="展开详细信息"/>
            </td>
          </tr>
           <tr>
            <td colspan="5">
                <div class="panel">
                  This is my testing page
                </div>
            </td>
          </tr>
      <table>
  </body>
</html>

//记得引用jQuery插件....

Aaron莫言
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery 显示隐藏列
Breaking_xu的博客
02-20 1541
需求：展示到页面的数据列表可以让用户自己配置显示哪列 先去网上查了一些资料，实现这个效果可以用jquery，datatables。 相对来说datatables实现要更简单一些，我用的是jquery。 datatables官网http://www.datatables.club/ 如果说只是单纯的在jsp页面使用写死的数据显示隐藏列不涉及java，这样是非常简单的，而我们需要实...
jquery实现表格内容筛选
zhang_yang_43的专栏
05-08 5244
对于表格来说，当数据比较多的时候，我们无法一页一页的查找，这时可以通过一个搜索框来实现搜索。 对于这个搜素框，我们为了更好的体验可以利用keyup事件实现在用户输入的时候就开始筛选，而不是填完以后点击搜索按钮再执行。   DOCTYPE html> html lang="en" xmlns="http://www.w3.org/1999/xhtml"> head>
前端Jquery表格显示信息
qq1024609194的博客
05-04 741
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格显示信息</title> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/> </head> <body> ...
关于jquery js读取excel文件内容 xls xlsx格式 纯前端
weixin_30530339的博客
12-28 5633
附带参考：http://blog.csdn.net/gongzhongnian/article/details/76438555 更详细导入导出：https://www.jianshu.com/p/74d405940305 　　　　　　　　https://www.jianshu.com/p/044c183edf42 ///////////////////////////////...
使用jQuery读取Excel表格
秃头y的博客
09-04 9879
在项目中用到了使用jQuery读取Excel表格内容并存储到数据库内，于是乎上网找了找诸位大牛写的解决方案，发现都不是特别符合我的需求，顺着诸位大牛的思路自己屡了屡思路，实现了符合自己的需求的代码，话不多说，上代码先。 //定义一个上传文件空间 id就叫excel-file，通过onchange事件触发读取Excel表数据 <input type="file" id="excel-fil...
jq实现隐藏和显示table的列——前端笔记
最新发布
weixin_42128648的博客
03-09 1515
jquery隐藏和显示table的某些列
jquery关于表格及表格列隐藏和显示问题探讨
10-27
本文为大家详细介绍下关于指定表格及指定列的隐藏或显示、获取表格的列数等等表格相关的使用技巧，感兴趣的朋友可以参考下哈，希望对大家有所帮助
jQuery表格行展开隐藏代码
06-24
这个函数通常会改变行的样式，比如添加或移除一个“展开”类，这将通过CSS控制显示或隐藏嵌套的内容。 例如，可以使用以下jQuery代码： ```javascript $(document).ready(function() { $('table tbody tr').click...
jQuery表格行展开隐藏特效代码
03-20
而“jQuery表格行展开隐藏特效代码”是利用jQuery的功能实现的一种交互式表格功能，旨在提升用户体验，使得大量数据在有限的空间内能够更有效地展示。 这个代码示例基于Bootstrap.js，这是一个广泛使用的前端框架，...
jq 隐藏table中的tr或td
02-23
在不知道table的ID的情况下。隐藏table里面的tr td
jQuery控制TR显示隐藏的几种方法
10-25
在网页开发中，jQuery是一个非常常用的JavaScript库，它极大地简化了DOM操作，包括对表格（Table）中的行（TR）进行显示和隐藏的控制。在本文中，我们将深入探讨使用jQuery来控制TR显示隐藏的几种方法。 首先，最...
JQuery_利用JQuery实现对表格中的部分列实现隐藏
迎难而上
03-04 1万+
我们经常看到如下的页面，页面中有很多的数据项。我们可能只关注某些项，这时候我们就需要部分列显示的效果了。 部分显示与隐藏的设计思路： 1. 对tr的每一项中都放置一个 并设置一个相同的name,如list(方便取值)。 2.并设置checkbox的value值，并使value的值等于所在的列的值。 3.当用户点击隐藏选择的列时，通过jquery取得checkbox中
jquery 实现 表格动态显示与隐藏
漂泊的云的专栏
09-26 6185
 先给看张效果这是没有点击的时候第二张就点击后会展开。这样给用户的体验就非常棒了。主要实现的功能其实非常简单。$(document).ready(function()  ".first").click(                  //先找到这个需要点击的TR，的单击事件，选择用类选择器的好处就是可以重复出现。当然你可以
jquery关于表格隐藏和显示问题
柳絮纷飞--毕竟不是雪
06-26 2522
1. 关于指定表格指定列隐藏显示 $(":checkbox[name*=month]").each(function(){ if(!$(this).attr("checked")){ var colnum = $(this).val(); $("#listPage").find('tr').find("td:eq(" + colnum.toString() + ")
jQuery实现table列的隐藏和展示
热门推荐
03-28 1万+
$(document).ready(function(){               $("td:eq(2)",$("tr")).hide();              $("td:eq(3)",$("tr")).hide();               $("td:eq(4)",$("tr")).hide();             $("#button1").click
jQuery 隐藏表格列
weixin_30855761的博客
04-13 209
隐藏表格第四列 $('tr').find('td:eq(3)').hide(); $('tr td:nth-child(4)').hide(); 另外 :nth-child 还支持 :nth-child(2n+1) 这种写法, 返回奇数项, 2n 返回偶数项, 或者用 odd 和 even 代替公式. 当然, 类似 3n+5, 4n 这样的写法也是可以的. nth-child 的...
隐藏和显示 table 某几行 jQuery
zhuqiuguang的博客
09-21 8513
数据从后台传输过来进行显示，对数据进行拼接在前台以表格形式显现但需要对某些行的数据进行隐藏和显示操作。解决办法：给table中的 tr标签拼接合适的class 起一个合适变化的class名 如果不是批量的话可以起一个静态class名 并添加 hiddenhid"+data.d[i].id+"' hidden='hidden'> 黄色部分为名称\"hid"+data.d[i].id+"\")'>展开
jquery控制table的行显示和隐藏
u013186343的博客
12-11 1790
jquery控制table的行显示和隐藏 一、开发记录 我们经常会遇到需要在html中控制元素进行隐藏或显示的场景： 隐藏： $('#id').css('display','none'); 显示： $('#id').css('display','block'); 但是对于table下tbody中的行使用直接使用这个方法有可能会导致宽度不对，引起排版混乱，应该使用 $('#trid').css('display','table-row'); ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值