精华内容
下载资源
问答
  • 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表格显示列与隐藏列

    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 would all be needed.

    最近有人要求我根据HTML表创建报告。 该报告需要包含的列数比该页面上显示的列数还多,但是将需要全部这些列。

    Fortunately, it was possible to group the columns of data into related subjects that would be viewed altogether or not at all.

    幸运的是,有可能将数据列分组为相关主题,这些主题将被完全查看或根本不会查看。

    I needed a simple way of hiding or displaying the groups of columns, that would also indicate that there was a hidden group of columns that was available for display.

    我需要一种简单的方法来隐藏或显示列组,这也将表明存在可供显示的隐藏列组。

    My solution looks like the screen shot below.

    我的解决方案如下图所示。

    Column group1 & 3 are both expanded, Group 2 is collapsed, indicated by the narrow blue column.

    列组1和3均已展开,组2折叠,如蓝色窄列所示。

    The 'ID' column is a fixed column that is always present

    “ ID”列是始终存在的固定列

    To expand Group 2, or collapse Group 1 and 3, it is simply necessary to double click in one of the header cells

    要展开组2或折叠组1和3,只需双击其中一个标题单元格

    Screenshot of table
        // This value is updated when the document is loaded is inline-table style is not supported
        var showStyle = "inline-table";
        function expcoll(cell) {
            var className = cell.className;
            var classType = className.substr(0, 2);
            var classID = className.substr(2); 
            var ctrlClass = ((classType == "ct") ? "cg" : "ct") + classID;
           
            $("." + className).css("display", "none");
            $("." + ctrlClass).css("display", showStyle);
        }
        function cssTest() {
            // inline-table doesn't work properly in IE8 (and presumably older versions)
            // The data columns get hidden, but the control columns don't appear.
            // I suspect this style is not recognised at all, and is ignored when it is seen in the default style sheet
            // Just using 'inline' breaks the table in Firefox and Opera -
            // the cell widths shrink to the minimum size required to show the contents
            
            // If inline-table is not supported (as with IE) the initial style is 'block', so use 'inline' instead of 'inline-table'
            if ($("#testCell").css("display") == "block") showStyle = "inline";
        }
    

    This function parses the CSS class name of the cell that has been double-clicked. All the cells in the column need the same class name. The first two letters of the class name indicate the column type - 'cg' is a column group, 'ct' is a control column (displayed when the other columns are hidden). Whatever letters you choose, use the same number of letters for each type, as this simplifies parsing the name.

    此函数解析已双击的单元格CSS类名称。 列中的所有单元格都需要相同的类名。 类名的前两个字母表示列类型-'cg'是列组,'ct'是控制列(其他列隐藏时显示)。 无论选择哪种字母,每种类型都使用相同数量的字母,因为这样可以简化名称解析。

    The rest of the class name is the column group number. So, each group will have a number of columns with a class cg1 (for example) and one control column ct1

    类名称的其余部分是列组号。 因此,每个组将具有许多列,这些列具有一个类cg1(例如)和一个控制列ct1

    The function uses JQuery to get a reference to all the cells with the selected class name, and hides them. It then gets a reference to all the columns with the other class name (cg or ct) and makes them visible.

    该函数使用JQuery来获取对具有所选类名的所有单元格的引用,并将其隐藏。 然后,它获得对具有其他类名(cg或ct)的所有列的引用,并使它们可见。

    IE does not seem to support 'inline-table' as an option for the 'display' style. Rather than clumsy user-agent parsing to detect support, I've developed a way of detecting CSS support. See my related tutorial Detecting cross browser CSS style support

    IE似乎不支持将“内联表”作为“显示”样式的选项。 我没有笨拙的用户代理解析来检测支持,而是开发了一种检测CSS支持的方法。 请参阅我的相关教程“ 检测跨浏览器CSS样式支持”

    You will need to download JQuery  to make it work.

    您将需要下载JQuery才能使其工作。

    (JQuery is a JavaScript library; it is "... a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.")

    (JQuery是一个JavaScript库;它是“ ...一个快速简洁JavaScript库,可简化HTML文档的遍历,事件处理,动画和Ajax交互,以实现快速的Web开发。”)

    Complete solution:

    完整的解决方案:

    <html>
    <head>
    	<style type="text/css">
    	table td
    	{
    	    border:solid 1px black; 
    	    border-collapse:collapse;
    	    padding: 1px;
    	}
    	.cc1 {
    		width:150px;
    		background-color:LightBlue;
    		display:inline-table;
    	}	
    	.cg1 {
    		width:150px;
    		background-color:LightGreen;
    		display:inline-table;
    	}	
    	.cg2 {
    		width:150px;
    		background-color:LightSkyBlue;
    		display:inline-table;
    	}	
    	.cg3 {
    		width:150px;
    		background-color:LightSeaGreen;
    		display:inline-table;
    	}	
    	.ct1 {
    		width:10px;
    		display:none;
    		background-color:LightGreen;
    	}
    	.ct2 {
    		width:10px;
    		display:none;
    		background-color:LightSkyBlue;
    	}
    	.ct3 {
    		width:10px;
    		display:none;
    		background-color:LightSeaGreen;
    	}
    	
    </style>
     
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        // This value is updated when the document is loaded is inline-table style is not supported
        var showStyle = "inline-table";
        function expcoll(cell) {
            var className = cell.className;
            var classType = className.substr(0, 2);
            var classID = className.substr(2); 
            var ctrlClass = ((classType == "ct") ? "cg" : "ct") + classID;
           
            $("." + className).css("display", "none");
            $("." + ctrlClass).css("display", showStyle);
        }
        function cssTest() {
            // inline-table doesn't work properly in IE8 (and presumably older versions)
            // The data columns get hidden, but the control columns don't appear.
            // I suspect this style is not recognised at all, and is ignored when it is seen in the default style sheet
            // Just using 'inline' breaks the table in Firefox and Opera -
            // the cell widths shrink to the minimum size required to show the contents
            
            // If inline-table is not supported (as with IE) the initial style is 'block', so use 'inline' instead of 'inline-table'
            if ($("#testCell").css("display") == "block") showStyle = "inline";
        } 
    </script>
    	
    </head>	
    <body onload="cssTest()">
    	
    	<table>
    		<tr>
    			<td class="cc1">ID</td>
    			<td class="cg1" ondblclick="expcoll(this)" id="testCell">Group 1</td>
    			<td class="cg1" ondblclick="expcoll(this)">Group 1</td>
    			<td class="ct1" ondblclick="expcoll(this)">&nbsp;</td>
    			<td class="cg2" ondblclick="expcoll(this)">Group 2</td>
    			<td class="cg2" ondblclick="expcoll(this)">Group 2</td>
    			<td class="ct2" ondblclick="expcoll(this)">&nbsp;</td>
    			<td class="cg3" ondblclick="expcoll(this)">Group 3</td>
    			<td class="cg3" ondblclick="expcoll(this)">Group 3</td>
    			<td class="ct3" ondblclick="expcoll(this)">&nbsp;</td>
    		</tr>
    		<tr>
    			<td class="cc1">Row 1</td>
    			<td class="cg1">Row 1</td>
    			<td class="cg1">Row 1</td>
    			<td class="ct1">&nbsp;</td>
    			<td class="cg2">Row 1</td>
    			<td class="cg2">Row 1</td>
    			<td class="ct2">&nbsp;</td>
    			<td class="cg3">Row 1</td>
    			<td class="cg3">Row 1</td>
    			<td class="ct3">&nbsp;</td>				
    		</tr>
    		<tr>
    			<td class="cc1">Row 2</td>
    			<td class="cg1">Row 2</td>
    			<td class="cg1">Row 2</td>
    			<td class="ct1">&nbsp;</td>
    			<td class="cg2">Row 2</td>
    			<td class="cg2">Row 2</td>
    			<td class="ct2">&nbsp;</td>
    			<td class="cg3">Row 2</td>
    			<td class="cg3">Row 2</td>
    			<td class="ct3">&nbsp;</td>				
    		</tr>
    		<tr>
    			<td class="cc1">Row 3</td>
    			<td class="cg1">Row 3</td>
    			<td class="cg1">Row 3</td>
    			<td class="ct1">&nbsp;</td>
    			<td class="cg2">Row 3</td>
    			<td class="cg2">Row 3</td>
    			<td class="ct2">&nbsp;</td>
    			<td class="cg3">Row 3</td>
    			<td class="cg3">Row 3</td>
    			<td class="ct3">&nbsp;</td>				
    		</tr>
    	</table>
     
    </body>
    </html>
    

    翻译自: https://www.experts-exchange.com/articles/1692/Hiding-displaying-HTML-table-columns-on-wide-tables.html

    html表格显示列与隐藏列

    展开全文
  • 本文为大家详细介绍下关于指定表格及指定隐藏显示、获取表格数等等表格相关的使用技巧,感兴趣的朋友可以参考下哈,希望对大家有所帮助
  • [b]表格显示/隐藏列[/b] 参考示例:[url=http://www.miniui.com/demo/datagrid/hidecolumn.html]显示/隐藏列[/url] 通过设置表格的showColumn和hideColumn方法,可以显示、隐藏表格列。 给列对象设置一个...
    [b]表格:显示/隐藏列[/b]
    

    参考示例:[url=http://www.miniui.com/demo/datagrid/hidecolumn.html]显示/隐藏列[/url]

    通过设置表格的showColumn和hideColumn方法,可以显示、隐藏表格列。

    给列对象设置一个name:
    <div name="loginnameColumn" field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>

    在运行时调用方法显示和隐藏列:

    //显示列
    grid.showColumn("loginnameColumn");
    //隐藏列
    grid.hideColumn("loginnameColumn");
    展开全文
  • datatables,当把表格整列隐藏时,用js是无法取得隐藏列的数据以及属性,我们只能通过操作表格的列index才可操作表格列的隐藏或显示。 ...1 //显示隐藏列,toggle-vis类加要进行操作的列...

        在datatables中,当把表格整列隐藏时,用js是无法取得隐藏列的数据以及属性,我们只能通过操作表格的列index才可操作表格列的隐藏或显示。

        没注意看官方文档,以为类和data-column属性是加入表格th中,其实并不是,是加入要进行操作的列表项,通过对列表项进行监听来显示及隐藏列。

        

    1 //显示隐藏列,toggle-vis类加在要进行操作的列表项中,监听列表项,data-column是列的index
    2  $('.toggle-vis').on('change', function (e) {
    3       e.preventDefault();
    4       console.log($(this).attr('data-column'));
    5       var column = table.column($(this).attr('data-column'));
    6        column.visible(!column.visible());
    7  });

     

         还是小白,走了很多弯路,记一次愚蠢的浪费时间的错误,下次要注意看文档。

     

    转载于:https://www.cnblogs.com/echospace-/p/9235330.html

    展开全文
  • Vue控制表格列显示隐藏

    千次阅读 2020-11-03 16:57:31
    table控制列显示隐藏的功能 当选时 table显示,未选中时隐藏该 首先造轮子 全局拿来用 // 这是子组件 <template> <div style="text-align: right;"> <el-popover placement="right" title...

    table控制列显示隐藏的功能

    在这里插入图片描述

    当选中时 table列显示,未选中时隐藏该列
    首先造轮子 全局拿来用

    // 这是子组件
    <template>
      <div style="text-align: right;">
        <el-popover placement="right" title="列筛选" trigger="click" >
          <el-checkbox-group v-model="checkList" @change="filter" style="max-width:1500px;">
            <el-checkbox
              v-for="(item, index) in tableList"
              :key="index"
              :label="item.value"
            ></el-checkbox>
          </el-checkbox-group>
          <el-button type="button" size="small" slot="reference"
            ><i class="el-icon-arrow-down el-icon-menu"></i
          ></el-button>
        </el-popover>
      </div>
    </template>
    
    <script>
    // import AddOrUpdate from "./advert-add-or-update";
    
    export default {
      data() {
        return {
            tableList:[],
            checkList:[],
            result:[],
            list:[],
        };
      },
      props:{
          datas:{
    
        }
      },
      created(){
        //   console.log(this.datas)
          this.tableList = this.datas
      },
     mounted(){
        this.tableList.forEach((item,index)=>{
          this.checkList.push(item.value)
        })
      },
      methods:{
        filter(val) {
          this.tableList.forEach((item,index)=>{
            this.list.push(item.value)
          })
          this.result = this.list.filter(number => !val.includes(number))
          // console.log('result',result)
          if(this.result.length>=1){
            this.result.forEach((item,index)=>{
              this.tableList.forEach((items,indexs)=>{
                if(items.value == item){
                  items.isTrue = false
                }
              })
            })
          }
          // console.log('val',val)
          val.forEach((item,index)=>{
            // console.log(item)
            this.tableList.forEach((items,indexs)=>{
                if(items.value == item){
                  items.isTrue = true
                }
              })
          })
        },
      },
    };
    </script>
    <style lang="scss" scoped>
    </style>
    
    
    // 这是父组件 
    //!!!!!!!!!!!!!!!!引入<省略>   
    // 调用
    <screen :datas='tableList'></screen>
    //例如这是你的table
    <el-table :data="dataList" border row-key="categoryId" style="width: 100%;" v-loading="dataListLoading">
          <el-table-column prop="id" header-align="center" align="center" label="ID" width="80" v-if="tableList[0].isTrue"></el-table-column>
          <el-table-column prop="status" header-align="center" align="center" label="状态" width="100" v-if="tableList[1].isTrue"></el-table-column>
          <el-table-column prop="prodName" header-align="center" align="center" label="产品名" width="200" v-if="tableList[2].isTrue"></el-table-column>
    </el-table>
    
    //在需要进行切换显示的列后面加上 v-if="tableList[*].isTrue" 这个
    

    然后js部分 在return 中加入这些

    //下面tableList中对象的数量要和table中加入v-if的数量一致
    // 因为用不到label 就直接删掉了
    tableList:[
            {
              value: 'ID',
              isTrue:true,
            },
            {
              value: '状态',
              isTrue:true,
            },
            {
              value: '产品名',
              isTrue:true,
            },
          ],
          checkList:[],
          result:[],
          list:[],
    
    // components中别忘了注册
      components: {
        screen
      },
    

    加油 !

    展开全文
  • Ant Design of Vue 表格嵌套子表格表格显示隐藏 开发过程一定会遇到一对多的开发关系 最常见的就是表格嵌套 效果如下 表格嵌套 有一个重要属性expandedRowKeys 属性 和一个重要事件 expand 事件 首先 ...
  • vue表格某一显示隐藏

    万次阅读 2019-05-23 17:13:29
    初始是默认为显示全部信息: 点击隐藏,结果如下图: 完整代码如下:(表格数据:https://www.easy-mock.com/mock/5ce57090f2fc446b5d8ffe18/blog/blogdata) < template> < div class=“show-examples”&...
  • excel表格第一隐藏起来了怎么办选中B往前拉,然后右键“取消隐藏”还有一种针对只有A隐藏的情况,点左上角全选表格,点右键,“取消隐藏”。exo表格下面的图标隐藏起来了怎么办按照下面图文操作快捷方式上...
  • Vue动态控制表格列显示隐藏

    千次阅读 2020-06-29 09:56:32
    如上图所示,点击table右上方的表格按钮,弹出菜单栏,进行勾选,从而达到表格对应列显示隐藏 1.HTML部分(ant design) <div class="right-btns"> <!-- 按钮 --> <a-button class="table" @click=...
  • 如图,为要实现的需求,即右键table的表头弹出菜单栏,通过勾选多选框的内容来控制表格列显示隐藏。 1. HTML部分(elemen-ui): <el-table :data="list" border fit @header-contextmenu="contextmenu"> ...
  • 隐藏表格列 这种方式的效率极低。例如,隐藏一个千行表格的某我的笔记本(P4 M 1.4G,768M内存)上执行需要约 4000毫秒的时间,令人无法忍受。
  • 关于显示隐藏,只要加上下面代码就可以了。 multiselect: false,//不显示每一前面的复选框
  • 实现过程:将显示隐藏抽离出来做组件,通过 checkbox+ v-if 进行显示隐藏,但是单用v-if会出现表格抖动(闪动)的现象,查了好多CSDN都说是column添加key值, 我添加了,底部确实不会影响,但是表头抖动了,又...
  • 网页表格显示隐藏技巧 在表格的 1)不显示表格边框 2)只显示表格上边框 3)只显示表格下边框 4)只显示表格的上下边框 5)只显示表格的左右边框 6)只显示表格的右边框 7)只显示表格的左右边框   8)显示...
  • html表格隐藏行的方法:1、在表格的tr(行)标签,使用style属性添加“display:none”样式;2、在表格的tr(行)标签,使用style属性添加“visibility:hidden”样式。本教程操作环境:windows7系统、CSS3&&...
  • layui表格中显示图片

    万次阅读 2019-06-17 16:10:33
    开发工具与关键技术:Visual Studio 2015 LINQ 作者:孙水兵 撰写时间:2019年6月16 ...JS代码除了图片那一和其他不同之外,其他列都是基本类似,当然如果你写了一些固定,你会发现你写的固...
  • 返回数据格式 动态生成表格数据
  • vue+elementUI配置表格列显示隐藏 描述: 表格过多时,可以根据需要控制显示隐藏,目前是采用Vue+elementUI(适配Vue3的Element Plus)实现的,具体效果与代码如下: 效果图: 完整代码: <...
  • 上面这种方法略显繁琐,如果要在表格中添加某一,要修改的地方会比较多,所以我给优化了一下 优化之后,要添加或者调整的顺序只需要改data里面的内容,不需要html里一个一个修改index的值了 data...
  • JS控制表格列显示隐藏

    千次阅读 2011-08-26 22:50:08
    JS控制表格列显示隐藏 /* * 控制表格列显示隐藏 * 使用方法:网页读取时调用control_show()方法即可。 * 说明: * table_cell_dis()方法为获取 显示/隐藏 控制栏。 * tb_showbox()方法为显示隐藏...
  • Vue动态控制表格列显示隐藏

    千次阅读 2020-07-17 17:37:00
    v-if=“lists[0].ispass” 来判断表格列的状态每一是否显示隐藏 勾选则展示、取消勾选隐藏、默认勾选 <el-dropdown :hide-on-click="false"> <i class="iconfont icon-shaixuan" ></i> <...
  • 前一段时间老大给了一个纯前端需要实现的,大概是有一个表格,基于表格有一个功能主要实现对表格的控制,控制表格列显示隐藏已经的顺序。 原型长这样:用一个弹出的框,表格的所有属性,对弹窗里面选中不...
  • //data-field的值就是你想要隐藏的某一的field }, response: { dataName: 'data'//不加这个没有数据 , msgName: 'msg' , statusName: 'status' , statusCode: 0 } }); }); }  
  • Layui 实现表格横滚动条隐藏,悬停显示
  • jQuery.dataTables 提供了显示隐藏方法。  做过企业管理项目前台的程序员可能都知道,许多用户查看一些业务数据的时候,喜欢将表格不关心的数据进行隐藏。便于信息的比对与查看。此我对jquery.dataTables...
  • 工作的记录 一、html部分(一定要有key值) <div class="table-box"> <el-table :data="tableData" max-width="430px"> <el-table-column type="index" label="序号" width="50px"></el...
  • 本文将实现element的动态显示隐藏筛选表格列数据,功能很简单,这里简单的记录一下,效果图如下: 二、功能实现 主要使用element的 多选框组checkbox-group + popover弹出框 来实现 checkbox-group: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 55,574
精华内容 22,229
关键字:

在表格中显示已隐藏的列