js隐藏表格的某一列

js隐藏表格的某一列

2022-06-08 16:44:10

antd表格隐藏某一列

设置 hideInTable: true

更多相关内容
JS实现鼠标点击展开或隐藏表格行的方法
2020-12-02 14:29:07

本文实例讲述了JS实现鼠标点击展开或隐藏表格行的方法。分享给大家供大家参考。具体实现方法如下：代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...

收起
JavaScript获取table中某一列的值的方法
2020-10-25 23:34:09

主要介绍了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控制表格列的显示隐藏

2022-06-23 22:54:38

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;
  }
}

收起

展开全文

大数据

利用js隐藏表格中的一列（采用一列一列隐藏）
万次阅读 2017-01-04 14:37:54
最近在搞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表格内针对某列内容进行即时搜索筛选功能
2020-10-18 13:21:31

主要介绍了JS实现table表格内针对某列内容进行即时搜索筛选功能,涉及javascript针对HTML元素的遍历、属性动态修改相关操作技巧,需要的朋友可以参考下

收起
js 实现用JavaScript隐藏或显示表格列
2010-03-31 11:52:22

js 实现用JavaScript隐藏或显示表格列! 值得下载看看!资源免费,大家分享!!

收起
js控制隐藏显示table特定列
2010-08-02 15:45:34

js控制隐藏显示table特定列，word文档中有源码实例。

收起
用css如何控制某列隐藏？
2021-06-11 13:34:38

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'); ...

收起

layui table
antd中实现隐藏某一列数据
万次阅读 热门讨论 2020-05-06 14:38:41

在工作中我们可能会有这样需求，比如在课程管理中可能...antd中每一列数据都有唯一性，那么我就需要根据自己的需求来改善代码。 1，先配置教师编号列，通过className设置样式将其隐藏 js代码： this.columns = [ ...

收起

react reactjs css3 es6
element表格组件隐藏某个列
千次阅读 2021-07-21 23:48:37

前端表格组件中想隐藏某个列的需求 #今天工作遇到了一个这样的需求.根据特定的条件,想要隐藏某些列,这种定制化的需求.话不多说,直接上代码 <el-table-column align="center" prop="startDate" width="120" ...

收起

css elementui
用Js，DHTML控制表格的某一列的显示与隐藏
千次阅读 2016-01-10 14:38:05

New Document New Document ...//初始化时一定要隐一列 function initHide(cell) { obj = document.getElementById("showTb"); for(i=0;i

收起
使用 sheetjs 导出表格数据隐藏指定列
2022-01-21 10:14:32

在使用 sheetjs 导出 Excel 表格的时候，想要导出一个表格的数据。但是导出来的表格包含全部的列，而我们所有表格的第一列都是序号列，不需要导出。记录以备查询 // 导出表格 function exportToExcel(table, ...

收起
jQuery动态显示和隐藏datagrid中的某一列的方法
2020-10-26 13:28:37

动态显示和隐藏datagrid中的某一列的方法有很多，在接下来的文章中为大家介绍下jQuery是如何实现的

收起
表格某列实现动态隐藏展示
2022-04-08 18:08:28

changeSwitch(val){ if(!val){ this.tableColumnsNew.splice(3,1) } else { this.tableColumnsNew.splice(3,0,{ title: '配置要求', fixed: "left", key: 'standardName_5', align: 'c...

收起
Vue控制表格的某行/某列显示和隐藏（通用）
千次阅读 2022-04-19 16:54:02

想做一个点击按钮可以隐藏表格的某个字段也可以是根据权限控制某列中显示与隐藏效果：全部的表格效果，点击第一个参考代码：场景：根据不同用户（普通用户，vip用户），展示对应的列思路：将原来...

收起
BootstrapTable设置某一列隐藏
千次阅读 2020-12-01 14:32:50

visible: false, 隐藏不占格子 { title: "文档资料", field: "user_doc", align: 'center', valign: 'middle', visible: false, },

收起
javascript 极速隐藏/显示万行表格列只需 60毫秒
2020-10-30 01:11:27

隐藏表格列 这种方式的效率极低。例如，隐藏一个千行表格的某列，在我的笔记本（P4 M 1.4G，768M内存）上执行需要约 4000毫秒的时间，令人无法忍受。

收起
用dataTable的initComplete实现隐藏表格某些列，翻页后隐藏失效的解决办法
2021-07-21 14:21:24

用dataTable的initComplete实现隐藏表格的某些列，翻页后失效问题解决办法

收起
layui隐藏某一列，通过js控制hide属性
千次阅读 2021-08-27 13:16:22

layui控制hide属性，隐藏某一列描述一.通过layui表格列自带的hide属性控制表格列二.利用属性display来控制描述我想做一个判断用户是不是管理员，若是管理员，则可以看见所有的表格信息；非管理员，只能观看到少量...

收起

layui html jquery
js控制隐藏或显示table的某一行
2021-06-13 08:24:47

主要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某列不显示的方法
2021-06-10 16:28:06

本文实例讲述了JavaScript控制table某列不显示的方法。分享给大家供大家参考。具体实现方法如下：1、table代码cellpadding="3" cellspacing="1" bgcolor="#dfdfdf">日期媒体名称投放形式曝光次数曝光人数点击次数...

收起
vue+element 表格的列隐藏
千次阅读 2020-10-14 10:01:38

有时候在同一个页面加载同一个表格，但是表格的表头字段不一样，那么我们就可以用vue的v-if指令来控制指定列的显示和隐藏，下面就是案例：表格的相同表头字段是：序号、商品名称、排名、商品价格、评价数、评价率...

收起
vue element表格某一列内容过多，超出省略号显示
2022-03-15 08:46:23

vue element表格某一列内容过多，超出省略号显示

收起
html表格显示列与隐藏列_在宽表上隐藏/显示HTML表格列
千次阅读 2020-07-18 04:37:01

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

收起

html css java jquery

JS实现鼠标点击展开或隐藏表格行的方法

JavaScript获取table中某一列的值的方法

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

JS控制表格列的显示隐藏

利用js隐藏表格中的一列（采用一列一列隐藏）

JS-隐藏table中的指定列

JS实现table表格内针对某列内容进行即时搜索筛选功能

js 实现用JavaScript隐藏或显示表格列

js控制隐藏显示table特定列

用css如何控制某列隐藏？

Layui table隐藏某一列

antd中实现隐藏某一列数据

element表格组件隐藏某个列

用Js，DHTML控制表格的某一列的显示与隐藏

使用 sheetjs 导出表格数据隐藏指定列

jQuery动态显示和隐藏datagrid中的某一列的方法

表格某列实现动态隐藏展示

Vue控制表格的某行/某列显示和隐藏（通用）

BootstrapTable设置某一列隐藏

javascript 极速隐藏/显示万行表格列只需 60毫秒

用dataTable的initComplete实现隐藏表格某些列，翻页后隐藏失效的解决办法

layui隐藏某一列，通过js控制hide属性

js控制隐藏或显示table的某一行

JavaScript控制table某列不显示的方法

vue+element 表格的列隐藏

vue element表格某一列内容过多，超出省略号显示

html表格显示列与隐藏列_在宽表上隐藏/显示HTML表格列

js隐藏表格的某一列

JS实现鼠标点击展开或隐藏表格行的方法

JavaScript获取table中某一列的值的方法

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

JS控制表格列的显示隐藏

利用js隐藏表格中的一列（采用一列一列隐藏）

JS-隐藏table中的指定列

JS实现table表格内针对某列内容进行即时搜索筛选功能

js 实现 用JavaScript隐藏或显示表格列

js控制隐藏显示table特定列

用css如何控制某列隐藏？

Layui table隐藏某一列

antd中实现隐藏某一列数据

element表格组件隐藏某个列

用Js，DHTML控制表格的某一列的显示与隐藏

使用 sheetjs 导出表格数据隐藏指定列

jQuery动态显示和隐藏datagrid中的某一列的方法

表格某列实现动态隐藏展示

Vue控制表格的某行/某列显示和隐藏（通用）

BootstrapTable设置某一列隐藏

javascript 极速 隐藏/显示万行表格列只需 60毫秒

用dataTable的initComplete实现隐藏表格某些列，翻页后隐藏失效的解决办法

layui隐藏某一列，通过js控制hide属性

js控制隐藏或显示table的某一行

JavaScript控制table某列不显示的方法

vue+element 表格的列隐藏

vue element表格某一列内容过多，超出省略号显示

html表格显示列与隐藏列_在宽表上隐藏/显示HTML表格列

js隐藏表格的某一列

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

js 实现用JavaScript隐藏或显示表格列

javascript 极速隐藏/显示万行表格列只需 60毫秒