js单击显示某一列 隐藏某一列

最新推荐文章于 2021-08-02 11:19:42 发布
最新推荐文章于 2021-08-02 11:19:42 发布
阅读量1.9k 收藏 2
点赞数
分类专栏： 前端

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
 
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
    table, tr, td, caption{
        border:1px solid #666;
        border-collapse:collapse;
        background-color:rgb(210, 219, 236);
    }
 
    td, caption{
        font-family:'微软雅黑';
        font-size:12px;
        text-align:center;
        padding:3px 15px;
    }
 
    caption{
        border-bottom:none;
        cursor:pointer;
    }
  </style>
 
  <script type="text/javascript">
    window.onload = function(){
        var tab = document.getElementsByTagName('table')[0];
        tab.caption.onclick = function(){
            var trs = tab.rows;
            for(var i = 0, len = trs.length; i < len; i++){
                var cell = trs[i].cells[1];
                if(cell.style.display == 'none'){
                    cell.style.display = '';
                }else{
                    cell.style.display = 'none';
                }
            }
        }
    }
  </script>
 </head>
 
 <body>
  <table>
    <caption>显示/隐藏价格</caption>
    <tr>
        <td>产品</td>
        <td>价格</td>
        <td>销量</td>
    </tr>
    <tr>
        <td>A</td>
        <td>88元</td>
        <td>2</td>
    </tr>
    <tr>
        <td>B</td>
        <td>77元</td>
        <td>3</td>
    </tr>
    <tr>
        <td>C</td>
        <td>66元</td>
        <td>4</td>
    </tr>
  </table>
 </body>
</html>

yuanblog
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS控制表格列的显示隐藏
m0_63446289的博客
06-23 1890
JS控制表格列的显示隐藏
jq实现隐藏和显示table的列——前端笔记
weixin_42128648的博客
03-09 1515
jquery隐藏和显示table的某些列
利用js隐藏表格中的一列（采用一列一列隐藏）
热门推荐
小菜的笔记
01-04 2万+
最近在搞web前端，现在显示表格的时候，想隐藏一列。通过js实现。这里是借助别的网友的文章。这里记录一下。 var table = document.getElementById("tab"); var trs = table.rows; for(var i = 0, len = trs.length; i < len; i++){ var cell = trs[i].c
用Javascript，DHTML控制表格的某一列的显示与隐藏
duansamve的博客
08-31 620
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;me
js如何隐藏表格的行与列
weixin_33905756的博客
09-27 652
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;&lt;html&gt;&lt;head&gt;    &lt;title&gt;显示隐藏列 &lt;/title&gt;     &lt;script language="JavaScript"&gt;         functio
layui实现给某一列加点击事件
10-16
要注意的是，layui的表格点击事件默认是对整个单元格生效的，如果想要只对某一列响应点击事件，我们需要在渲染时对这一列进行特殊处理。例如，如果我们只想让“地址”列响应点击事件，可以这样做： ```javascript ...
JS实现点击参数面板按钮显示或隐藏数据
08-31
总结来说，通过JavaScript和报表工具的结合，我们可以轻松地实现在网页应用中点击按钮控制数据显示或隐藏的功能。这种技术不仅限于FineReport，也可以应用于其他类似的Web应用程序，只要支持JavaScript和类似的操作...
jqgrid 编辑表格 一列
09-05
例如，将某一列设置为日期选择器： ```javascript { name: 'date', index: 'date', width: 120, editable: true, edittype: 'date', formatter: 'date', formatoptions: { newformat: 'Y-m-d' } } ``` 然后，注册...
JavaScript 在网页上单击鼠标的地方显示层及关闭层
12-09
在这个特定的示例中，JavaScript 被用来实现在网页上点击鼠标位置时显示一个层（Div），并允许用户选择一个地点，然后将所选地点显示在文本框中。以下是这个功能的关键知识点： 1. **层（Div）的显示与隐藏**： - ...
在GirdView行上单击获取该行第一列的值
12-21
标题提到的“在GridView行上单击获取该行第一列的值”是一个常见的需求，它可以简化数据操作，提高用户体验。 要实现这个功能，首先我们需要为GridView添加一个事件监听器，通常我们会选择RowCommand或RowDataBound...
js 实现 用JavaScript隐藏或显示表格列
03-31
js 实现 用JavaScript隐藏或显示表格列! 值得下载看看!资源免费,大家分享!!
js控制隐藏显示table特定列
08-02
js控制隐藏显示table特定列，word文档中有源码实例。
js 显示/隐藏某些列
07-26
NULL 博文链接：https://jsufly.iteye.com/blog/650925
原生js隐藏table列
王野
08-27 2660
var editable = document.getElementById('editable') //获取表格 function changeTable(editable) { var trs = editable.rows; //获取行 for (var i = 0, len = trs.length;...
js隐藏table 列
zhuyu19911016520
06-30 7457
var tab = document.getElementById("datatable"); function changeTable(tab){       var trs = tab.rows;       for(var i = 0, len = trs.length; i           var cell = trs[i].cells[3];           cell
JS-隐藏table中的指定列
咏絮
08-02 3018
/** * table列显示隐藏 * @param tableId * @param columns table列索引 例： 0,1,2,3 * @param type 显示隐藏列 1.显示table列 2.隐藏table列 */ function hideShowTableTd(tableId, columns, type) { var strs = new Array(); //定义一数组 strs = columns.split(","); //字符分割 .
js 动态流沙_JS隐藏行或列（多种可行方法）
weixin_33087827的博客
12-30 834
一、/p>"-//W3C//DTD HTML 4.0 Transitional//EN"> 显示隐藏列border="1">width="20%">00bgcolor="#E3E3E3">01width="20%">02bgcolor="red">10bgcolor="green">11bgcolor="red">12width="20%"&g...
js显示隐藏 table 的行和列
ALL TECHNOLOGIES ARE CLOUDS
11-14 615
&lt;SCRIPT LANGUAGE="JavaScript"&gt;     &lt;!--     function setHiddenCol(oTable,iCol) {         for (i=0;i &lt; oTable.rows.length ; i++)         { oTable.rows[i].cells[iCol].style.display =...
bootstarp js设置列隐藏_bootstrap table getHiddenColumns获取隐藏的列的方法
weixin_36215736的博客
12-30 1709
bootstrap table getHiddenColumns获取隐藏的列的方法bootstrap table getHiddenColumns获取表格隐藏的列，即获取哪些列当前不可见的列，因为有的列可以通过工具栏或者方法可以设置列隐藏，如何隐藏某个列请查看左侧菜单。getHiddenColumns方法参数名称参数说明无代码例子//获取隐藏的列 返回值为数组var cols= $('#table...
bootstrap jqgrid 某一列实现删除和修改
最新发布
05-27
对于Bootstrap和JqGrid，它们是用于前端开发的框架和插件。关于如何实现删除和修改某一列，可以通过以下步骤实现： 1. 添加Bootstrap和JqGrid的CSS和JS文件到HTML页面中。 2. 在HTML页面中创建一个div元素，用于显示JqGrid的表格。 3. 使用ajax请求从后端获取数据，将数据填充到JqGrid的表格中。 4. 在JqGrid的参数中配置需要显示的列，并且设置列的类型、宽度、对齐方式、格式等属性。 5. 编写JqGrid的事件方法，如单击某一列实现删除和修改的功能。可以使用JqGrid提供的函数（如setCell）来实现对某一列数据的修改。 以上是简单的实现方式，具体要根据实际需求进行修改和调整。希望可以帮助您解决问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值