如何使得一列内容点击一个按钮显示与隐藏

最新推荐文章于 2022-08-23 20:09:36 发布
最新推荐文章于 2022-08-23 20:09:36 发布
阅读量855 收藏
点赞数
文章标签： jquery css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a741102896/article/details/80969683
版权
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>通讯录</title> 
                       <input type="button" id="butn" />
                        <table class="table display" id="datatable">
                                     
                          </table>        
                         <script>

                 con+="<th><div id='a'>类型</div></th>";   
 con+="<td style='height:70px;'><div  class='a' style='width:100px;'>"+json.result[i].type+"</div>  
                      $(function(){
                          $("#butn").click(function name() {
  $(this).toggleClass("class22");
  tar=document.getElementById("a");
                                   if(tar.style.display=="block"){
           $(".a").css("display","none")
   $("#a").css("display","none");
                                     } else {
                                    $(".a").css("display","block")
        $("#a").css("display","block");  
                                     }    
            });
                                    });
                             </script>
                             <style type="text/css">
        .a{            
            display:none;
        }
        #a{
            display:none;
        }
        .class22{
        background:url("assets/img/uuu.png");
        width:25px;
        height:20px;
        }
         #butn{
         width:25px;
         height:20px;
         }
    </style>
    </body>
</html>
       
a741102896
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
js点击实现显示和隐藏效果
luckybuling
07-12 3万+
1、html结构 &lt;img src="images/xingxing.jpg" alt="" id="img"&gt; &lt;button id="btn_show" &gt; 显示 &lt;/button&gt; &lt;button id="btn_hidden"&gt; 隐藏 &lt;/button
点击按钮显示隐藏内容
cpfor
03-17 3914
&lt;li&gt; &lt;input type="radio" onclick="ydiaosai()"&gt; &lt;label &gt;点击显示&lt;/label&gt; &lt;/li&gt; &lt;li&gt; &lt;input type="radio" onclick="ndiaosai()
CSS-显示与隐藏
z_Ever1的博客
10-26 482
display  visibility              div{             width: 100px;             height: 100px;             background-color: skyblue;         }         div:first-child/*:hover*/{             /*bac
JS实现点击显示/隐藏
qq_52006379的博客
08-23 5436
JS实现点击显示/隐藏。
用HTML和CSS实现点击内容显示再点击隐藏
weixin_34290096的博客
09-02 3063
实现思路： 1.display:none,隐藏元素;点击时display:black; 2.设置隐藏元素高度为0，overflow:hidden;点击时overflow:visible; 由于第一条只能实现点击时显示，不能实现继续隐藏；排除方法1。 考虑复选框特性，点击时样式框内有小勾，再点击时小勾消失。 HTML实现代码： <div> &l...
JS实现点击参数面板按钮显示或隐藏数据
08-31
用户点击按钮后，数据会根据标签控件的状态切换显示或隐藏，从而提供了一种灵活的交互方式。 总结来说，通过JavaScript和报表工具的结合，我们可以轻松地实现在网页应用中点击按钮控制数据显示或隐藏的功能。这种...
layui 表格操作列按钮动态显示的实现方法
10-16
每个按钮都有`lay-event`属性，用于指定当用户点击按钮时要触发的事件。例如，`lay-event="known"`表示点击该按钮时会触发名为`known`的事件。在layui中，可以通过监听表格的`events`属性来处理这些自定义事件。你...
vue 点击展开显示更多(点击收起部分隐藏)
01-19
这里就需要一开始只显示6个数据，点击展开才显示全部 HTML里调用showdetailList： (item,> <span>{{item.title}} <span>{{item.name}} <div v-if=detailList.length> 6 v-on:click=changeFoldState> ...
vue根据条件不同显示不同按钮的操作
10-15
在这个例子中，如果 `isDeleted` 为 0，我们将显示一个“下架”按钮，点击该按钮会调用 `lowerShelf` 方法并传入当前商品的 ID。反之，如果 `isDeleted` 为 1，我们将显示一个“已下架”的按钮，表示商品已被移除。 ...
点击按钮显示和隐藏列表内容
sunnyfan的博客
11-01 6690
点击按钮显示和隐藏列表内容<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点击展开和隐藏</title> <link rel="stylesheet" type="text/css" href="../reset.css"> <link rel="stylesheet" typ
前端收起和展示按钮功能实现简述
wuqingdeqing的博客
01-07 2956
近期做可视化配置时，深感对用户而言，原先系统的配置流程太过复杂，初始可见的配置项过多，容易产生一种畏难的情绪。 为提高系统的易用性，故决定设置一个按钮，在用户进入此界面时只显示必要配置项，点击后展示高级配置。如此增加了配置功能的层次感，使用户不必花费更多的时间去关注一般情况下用不到的配置项，简化了配置图表的流程。以下简述实现方式。 按钮的话你可以通过项目的静态文件引入。我这边是依此网站直接引入
html点击显示隐藏层,Jquery 点击按钮显示和隐藏层的代码
weixin_35910782的博客
06-03 315
代码：#choice_list_district{ height:50px;}#tab td{cursor:pointer;}$(function () {//绑定事件处理$("#choice_list_district a").click(function (e) {if ($("#divObj").css("display") == "none") {e.stopPropagation();/...
js动态控制表单的显示和隐藏
zhengqiqiqinqin的专栏
10-09 1万+
文章一： 无论是事先写好的，还是动态生成的，要找到指定的tr或td都必须知道其相关的一个属性，未必必须是id或name，然后无论是在一个table还是多个 table都可以通过document.getElementsByTagNames( "tr ")或td，取得集合，……再根据知道的属性再找，最后设置显示/隐藏   方法一：  document.getElementById( "控件ID
点击标题显示相应内容
shenqh
07-18 9412
点击标题显示相应内容的功能就是将页面分成上下两部分，其中上面部分全都是标题，可能会有多个标题。下面部分就是标题的内容部分，根据标题部分的选中情况展示对应标题的内容。因为本功能是静态页面，所以实现原理依然是控制页面的显示和隐藏。在实际应用中也会有这样的场景，但是如果应用场景是实时读取后台内容建议不要使用这种方式。 同样的节奏，先上预览图，再上代码，然后对代码进行讲解。因为后面会对内容进行讲解，所以...
datatable的动态列隐藏按钮及实现方式
MelodyFreedom的博客
05-31 1万+
以下参照datatable中文网api中的例子编写而成。 1、添加按钮事件                                                                                                       服务器名称      IP      CPU/内存      数据盘大小      操作系统
html 隐藏button_jQuery 效果 隐藏和显示
weixin_36302350的博客
01-20 2327
jQuery 效果-隐藏和显示在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素，以及使用 toggle() 方法能够切换 hide() 和 show() 方法。隐藏、显示、切换，滑动，淡入淡出，以及动画，哇哦！点击 显示/隐藏面板实例jQuery hide()简单的jQuery hide()方法演示。jQuery hide()另一个hi...
css中实现显示和隐藏
热门推荐
limengmeng9006的专栏
11-08 7万+
CSS中的display和visibility      在平时的开发过程中，总是会遇到一些文字在特定的场景下显示或者隐藏来达到我们想要的效果，css中display和visibility语法，他们都可以隐藏和显示html元素。看起来貌似一样，但是他们还是有一定的区别的。     首先先来看一下display和visibility的属性     display属性设置元素的显示方式
JS 点击按钮显示和隐藏div
夏沐的博客
01-12 9945
CSS代码部分： &lt;style&gt; div { width: 300px; height: 200px; background-color: yellow; border: 2px solid red; } .cls { display: none; } &lt;/style&gt; ...
html文字点击隐藏显示出来了,HTML5--》点击显示隐藏内容
weixin_30082211的博客
06-03 4232
浏览器支持比较差，可以用JavaScript实现这种功能。js点击显示隐藏内容body{font-size:12px;}span{font-weight:bold;}details{overflow:hidden;height:0;padding-left:200px;position:relative;display:block;}details[open]{height:auto;}点击显示内...
vue表格某一列可点击按钮隐藏
最新发布
06-08
您好！要实现 Vue 表格中某一列可点击按钮隐藏，可以使用以下步骤： 1. 在表格的 `thead` 中，为需要隐藏的列添加一个 `class`，例如 `hide-column`。 2. 在表格的 `tbody` 中，为每一行的需要隐藏的列也添加同样的 `class`。 3. 在 Vue 组件的 `data` 中，添加一个 `hiddenColumns` 数组，用于存储需要隐藏的列的索引。 4. 在表格中动态绑定 `v-bind:class`，根据 `hiddenColumns` 数组中是否包含当前列的索引来决定是否添加 `hide` 类名，从而实现列的隐藏和显示。 5. 在每一行需要隐藏的列后面添加一个按钮，点击按钮时触发 `hideColumn(index)` 方法，将该列的索引加入到 `hiddenColumns` 数组中，从而实现隐藏该列。 下面是一个示例代码： ```html <template> <table> <thead> <tr> <th>列1</th> <th>列2</th> <th class="hide-column">列3 <button @click="hideColumn(2)">隐藏</button></th> </tr> </thead> <tbody> <tr v-for="(item, index) in items" :key="item.id"> <td>{{ item.col1 }}</td> <td>{{ item.col2 }}</td> <td class="hide-column">{{ item.col3 }}</td> </tr> </tbody> </table> </template> <script> export default { data() { return { hiddenColumns: [], items: [ { id: 1, col1: '行1列1', col2: '行1列2', col3: '行1列3' }, { id: 2, col1: '行2列1', col2: '行2列2', col3: '行2列3' }, { id: 3, col1: '行3列1', col2: '行3列2', col3: '行3列3' } ] } }, methods: { hideColumn(index) { this.hiddenColumns.push(index) } } } </script> <style> .hide-column.hide { display: none; } </style> ``` 在上面的示例中，我们通过为表格中需要隐藏的列添加 `hide-column` 类名来标识这些列。然后在表格中绑定 `v-bind:class`，根据 `hiddenColumns` 数组中是否包含当前列的索引来决定是否添加 `hide` 类名。最后在样式中设置 `.hide-column.hide` 的样式为 `display: none;`，即可实现列的隐藏。 在每一行需要隐藏的列后面添加一个按钮，点击按钮时触发 `hideColumn(index)` 方法，将该列的索引加入到 `hiddenColumns` 数组中，从而实现隐藏该列。 希望这个回答对您有所帮助！如果您有其他问题，欢迎随时提出。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值