精华内容
下载资源
问答
  • js隐藏表格的某一列
    2022-06-08 16:44:10

    antd表格隐藏某一列

    设置 hideInTable: true

    更多相关内容
  • 本文实例讲述了JS实现鼠标点击展开或隐藏表格行的方法。分享给大家供大家参考。具体实现方法如下: 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
  • 主要介绍了JavaScript获取table中某一列的值的方法,需要的朋友可以参考下
  • js单击显示某一列 隐藏某一列

    千次阅读 2019-02-21 17:34:20
     <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, ...

      <!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>

    展开全文
  • JS控制表格列的显示隐藏
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            table {
                border-collapse: collapse;
            }
    
            td,
            th {
                width: 120px;
                height: 60px;
                text-align: center;
            }
    
            .checkbox {
                width: 800px;
                display: flex;
                justify-content: space-between;
            }
    
            .checkbox input {
                width: 20px;
                height: 20px;
            }
    
            .checkbox label {
                display: flex;
                align-items: center;
            }
        </style>
    </head>
    
    <body>
        <div class="table">
            <table border="1" id="tab"></table>
        </div>
        <div class="checkbox"></div>
        <script>
            //多选框勾选的一共有这些
            let checkList = ["日期", "姓名", "省份", "市区", "地址", "邮编"];
            //多选框个数一共有这些
            let checkListAll = ["date", "name", "province", "city", "address", "zip"];
            let tableData = [
                {
                    date: "2016-05-02",
                    name: "王一虎",
                    province: "上海",
                    city: "普陀区",
                    address: "上海市普陀区金沙江路 1518 弄",
                    zip: 200333,
                },
                {
                    date: "2016-05-04",
                    name: "王二虎",
                    province: "上海",
                    city: "普陀区",
                    address: "上海市普陀区金沙江路 1517 弄",
                    zip: 200333,
                },
                {
                    date: "2016-05-01",
                    name: "王三虎",
                    province: "上海",
                    city: "普陀区",
                    address: "上海市普陀区金沙江路 1519 弄",
                    zip: 200333,
                },
                {
                    date: "2016-05-03",
                    name: "王四虎",
                    province: "上海",
                    city: "普陀区",
                    address: "上海市普陀区金沙江路 1516 弄",
                    zip: 200333,
                },
            ];
            //找到这个tab节点,在下边写thead tbody
            const tab = document.getElementById("tab");
            function renderTable() {
                let tab_html = '<thead><tr>';
                checkList.forEach(item => {
                    tab_html += `<th>${item}</th>`
                })
                tab_html += '</tr></thead>';
                tab_html += '<tbody>';
                tableData.forEach(item => {
                    tab_html += `<tr>`
                    // for (let k in item) {
                    //     //这里要判断这一项对应再checkList有没有
                    //     if(checkList.includes("日期"))
                    //     tab_html += `<td>${item[k]}</td>`
                    // }
                    if (checkList.includes("日期")) tab_html += `<td>${item.date}</td>`
                    if (checkList.includes("姓名")) tab_html += `<td>${item.name}</td>`
                    if (checkList.includes("省份")) tab_html += `<td>${item.province}</td>`
                    if (checkList.includes("市区")) tab_html += `<td>${item.city}</td>`
                    if (checkList.includes("地址")) tab_html += `<td>${item.address}</td>`
                    if (checkList.includes("邮编")) tab_html += `<td>${item.zip}</td>`
                    tab_html += '</tr>'
                })
                tab_html += "</tbody>"
                tab.innerHTML = tab_html
            }
            //调用函数,将表格初始化渲染出来
            renderTable()
            function renderCheckbox() {
                const cbx = document.querySelector(".checkbox");
                let cbx_html = "";
                checkListAll.forEach(item => {
                    cbx_html += `<label for='${item}'>${item}<input type="checkbox" name="${item}" id="${item}" /></label>`
                })
                cbx.innerHTML = cbx_html;
                //遍历checkList
                if (checkList.includes("日期")) document.querySelector("input#date").checked = true
                if (checkList.includes("姓名")) document.querySelector("input#name").checked = true
                if (checkList.includes("省份")) document.querySelector("input#province").checked = true
                if (checkList.includes("市区")) document.querySelector("input#city").checked = true
                if (checkList.includes("地址")) document.querySelector("input#address").checked = true
                if (checkList.includes("邮编")) document.querySelector("input#zip").checked = true
            }
            renderCheckbox();
            //现在,当多选按钮改变时,就会导致表格删除某一列
            let inputs = document.querySelectorAll(".checkbox input");
            inputs.forEach(item => {
                item.onchange = function () {
                    //看看现在inputs里有哪些是打钩的,再放进checkList中
                    checkList = [];
                    inputs.forEach(value => {
                        if (value.checked && value.id == "date") checkList.push("日期");
                        if (value.checked && value.id == "name") checkList.push("姓名");
                        if (value.checked && value.id == "province") checkList.push("省份");
                        if (value.checked && value.id == "city") checkList.push("市区");
                        if (value.checked && value.id == "address") checkList.push("地址");
                        if (value.checked && value.id == "zip") checkList.push("邮编");
                    })
                    console.log(checkList);
                    //重新渲染表格
                    renderTable()
                }
            })
            //主要逻辑  checkList => 决定页面中的表格表头有哪些项,然后渲染的时候,选择对应有的项放在tbody中    checkListAll => 决定页面中的多选框有哪些项        inputs为页面所有的勾选框 每当发生变化时,先把checkList变为空数组。再遍历inputs,如果是勾选的并且是某一特定的项,再往checkList数组中末尾插入这一项。注意,一定要按照顺序地来,即日期、姓名、...、邮编。别忘了重新调用renderTable这个函数,调用渲染表格的函数,让表格重新渲染。
        </script>
    </body>
    
    </html>

     js控制表格列的显示隐藏

    _____________________________________________________________________

     vue控制表格列的显示隐藏

    <div class="right-btns">
      <!-- 按钮 -->
      <a-button class="table" @click="handleTable"><a-icon type="table" /></a-button>
      <!-- 弹出框 -->
      <div class="tableSelect" v-if="tableSelectVisible">
        <a-checkbox-group :value="checkValue" :options="colOptions"/>
      </div>
    </div>
    
    <!-- 表格内容 -->
    <a-table :dataSource="expertList">
      <a-table-column v-if="colIsTrue[0]" title="专家ID" key="idAsString" />
      <a-table-column v-if="colIsTrue[1]" title="专家姓名" key="name" />
      <a-table-column v-if="colIsTrue[2]" title="行业" key="industry" />
      <a-table-column v-if="colIsTrue[3]" title="年龄" key="age" />
      <a-table-column v-if="colIsTrue[4]" title="学历" key="education" />
      <a-table-column v-if="colIsTrue[5]" title="工作单位" key="company" />
      <a-table-column v-if="colIsTrue[6]" title="入库时间" key="createAt" />
      <a-table-column title="操作" key="action">
        <template slot-scope="record">
          <a-button size="small" icon="edit" type="primary" @click="openUpd(record.id)">编辑</a-button>
          <a-button size="small" icon="delete" type="primary" @click="openDel(record)">删除</a-button>
        </template>
      </a-table-column>
    </a-table>
    
    
    data(){
      return {
    	colOptions:[
          {label:'专家ID',value:0,onChange:this.colChange},
          {label:'专家姓名',value:1,onChange:this.colChange},
          {label:'行业',value:2,onChange:this.colChange},
          {label:'年龄',value:3,onChange:this.colChange},
          {label:'学历',value:4,onChange:this.colChange},
          {label:'工作单位',value:5,onChange:this.colChange},
          {label:'入库时间',value:6,onChange:this.colChange},
        ],
        colIsTrue:[],
        checkValue:[],
      }
    },
    created(){//当所有数据都加载完成之后,将checkbox设置为全部选中状态
      this.colOptions && this.colOptions.forEach((item,index)=>{
        this.colIsTrue.push(true)
        this.checkValue.push(index)
      })
    },
    mounted(){//菜单栏弹出后,点击其它地方,关闭菜单栏
      let that=this;
      $(document).bind("click", function(e) {
        var target = $(e.target);
        if (target.closest(".tableSelect").length == 0 && target[0].className.indexOf('table')==-1) {
          that.tableSelectVisible=false;
        }
      })
      this.colOptions && this.colOptions.forEach((item,index)=>{
        this.colIsTrue.push(true)
        this.checkValue.push(index)
      })
    },
    methods:{
      colChange(e){//当checkbox有修改时
       const index=e.target.value
       this.colIsTrue[index] ? 
       (this.$set(this.colIsTrue,index,false)) : 
       (this.$set(this.colIsTrue,index,true))
    
       if(e.target.checked) this.checkValue.push(index)
       else{
         this.checkValue.forEach((item,arrIndex)=>{
           if(item==index){
             this.checkValue.splice(arrIndex,1)
           }
         })
       }
     },
     handleTable(){//打开菜单栏
       this.tableSelectVisible=true;
     },
    }
    
    
    .right-btns{
      position:relative;
      .tableSelect{
        position: absolute;
        background:#fff;
        border:1px solid #ecedef;
        display:inline-block;
        top: 33px;
        right: 0;
        z-index: 100;
        padding: 10px;
        width: 156px;
      }
    }
    

    展开全文
  • 最近在搞web前端,现在显示表格的时候,想隐藏一列。通过js实现。这里是借助别的网友的文章。这里记录一下。 var table = document.getElementById("tab"); var trs = table.rows; for(var i = 0, len = trs....

    最近在搞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].cells[12];
           cell.style.display = 'none';
        }
    遍历每一行把对应的列隐藏。这个适用于比较小的表格。如果你的表格比较大不建议使用这种方法。

    展开全文
  • JS-隐藏table中的指定

    千次阅读 2021-08-02 11:18:58
    * table显示隐藏 * @param tableId * @param columns table索引 例: 0,1,2,3 * @param type 显示隐藏列 1.显示table 2.隐藏table */ function hideShowTableTd(tableId, columns, type) { var strs =...
  • 主要介绍了JS实现table表格内针对某列内容进行即时搜索筛选功能,涉及javascript针对HTML元素的遍历、属性动态修改相关操作技巧,需要的朋友可以参考下
  • js 实现 用JavaScript隐藏或显示表格列! 值得下载看看!资源免费,大家分享!!
  • js控制隐藏显示table特定,word文档中有源码实例。
  • Hidof:关于隐藏某列,我想到个办法,即:在页面呈现时,为单元格增加display的隐藏属性。但是这样我试过了,好象没有效果。请帮我看看,有没办法实现通过css来隐藏某列。我知道可以设置的属性Visible=false来...
  • Layui table隐藏某一列

    千次阅读 2020-01-09 15:44:48
    Layui table隐藏某一列 1、使用 【done - 数据渲染完的回调】 ,done(res, curr, count){ $("[data-field='hobby']").css('display', 'none'); ...
  • antd中实现隐藏某一列数据

    万次阅读 热门讨论 2020-05-06 14:38:41
    在工作中我们可能会有这样需求,比如在课程管理中可能...antd中每一列数据都有唯一性,那么我就需要根据自己的需求来改善代码。 1,先配置教师编号列,通过className设置样式将其隐藏 js代码: this.columns = [ ...
  • element表格组件隐藏某个

    千次阅读 2021-07-21 23:48:37
    前端表格组件中想隐藏某个的需求 #今天工作遇到了个这样的需求.根据特定的条件,想要隐藏某些,这种定制化的需求.话不多说,直接上代码 <el-table-column align="center" prop="startDate" width="120" ...
  • New Document     New Document  ...//初始化时一定要隐一列 function initHide(cell) {  obj = document.getElementById("showTb");  for(i=0;i  
  • 在使用 sheetjs 导出 Excel 表格的时候,想要导出表格的数据。但是导出来的表格包含全部的,而我们所有表格的第列都是序号,不需要导出。记录以备查询 // 导出表格 function exportToExcel(table, ...
  • 动态显示和隐藏datagrid中的某一列的方法有很多,在接下来的文章中为大家介绍下jQuery是如何实现的
  • changeSwitch(val){ if(!val){ this.tableColumnsNew.splice(3,1) } else { this.tableColumnsNew.splice(3,0,{ title: '配置要求', fixed: "left", key: 'standardName_5', align: 'c...
  • 想做个点击按钮可以隐藏表格的某个字段 也可以是根据权限控制某列中显示与隐藏 效果: 全部的表格效果, 点击第个 参考代码: 场景:根据不同用户(普通用户,vip用户),展示对应的 思路:将原来...
  • BootstrapTable设置某一列隐藏

    千次阅读 2020-12-01 14:32:50
    visible: false, 隐藏不占格子 { title: "文档资料", field: "user_doc", align: 'center', valign: 'middle', visible: false, },
  • 隐藏表格列 这种方式的效率极低。例如,隐藏个千行表格的某列,在我的笔记本(P4 M 1.4G,768M内存)上执行需要约 4000毫秒的时间,令人无法忍受。
  • 用dataTable的initComplete实现隐藏表格的某些,翻页后失效问题解决办法
  • layui隐藏某一列,通过js控制hide属性

    千次阅读 2021-08-27 13:16:22
    layui控制hide属性,隐藏某一列描述一.通过layui表格列自带的hide属性控制表格列二.利用属性display来控制 描述 我想做一个判断用户是不是管理员,若是管理员,则可以看见所有的表格信息;非管理员,只能观看到少量...
  • 主要JS如下:(兼容browser: IE9, FireFox, Chrome, 360 safe)var row = document.getElementById(rowID);if (row != null) {if (row.style.display == (document.all ? "block" : "table-row")) {row.style.display ...
  • 本文实例讲述了JavaScript控制table某列不显示的方法。分享给大家供大家参考。具体实现方法如下:1、table代码cellpadding="3" cellspacing="1" bgcolor="#dfdfdf">日期媒体名称投放形式曝光次数曝光人数点击次数...
  • vue+element 表格列隐藏

    千次阅读 2020-10-14 10:01:38
    有时候在同个页面加载同表格,但是表格的表头字段不一样,那么我们就可以用vue的v-if指令来控制指定的显示和隐藏,下面就是案例: 表格的相同表头字段是:序号、商品名称、排名、商品价格、评价数、评价率...
  • vue element表格某一列内容过多,超出省略号显示
  • html表格显示隐藏列 I was recently asked to create an report based on an HTML table. The report needed to contain many more columns than could be displayed across the page, but they woul...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,838
精华内容 10,335
关键字:

js隐藏表格的某一列