现在国内的模板,也就layui一家独大了,其中的数据表格功能强大,但我不会用python或者django拼接json,输出发送给数据表格,那只好用笨办法,循环遍历吧。

数据表格中保留id列,是为了编辑修改的时候获取改行数据的id值,但又不需要展示出来,所以需要隐藏。

id列的代码是:

, cols: [[ //标题栏
                    {field: ,style:'display:none;'}

这个代码就可以把下面的id列的值隐藏起来,但标题栏的id还在,那么,问题来了,就用强大的jquery解决呗。

 $('table.layui-table thead tr th:eq(0)').addClass('layui-hide');

当有多个表格的时候,发现上面的代码只能把第一个表的第一列标题栏给隐藏起来,如果一个页面有多个表格需要用:

 $('table.layui-table thead tr th:nth-child(1)').addClass('layui-hide');

ok,完美解决。

哦,还有问题,如果表格中有选择框,默认会占据表格第一列,这个时候,上面的代码就出错了。只能推到,使用第一个代码,一个一个的选择。注意,layui的数据表格,自动会生成5个表格

我当前页面只有两个表格,一个常规,一个有选择框,搜索发现里面竟然有10个 <table  开头,所以隐藏列只能:

            $('table:eq(1).layui-table thead tr th:eq(0)').addClass('layui-hide');
            $('table:eq(6).layui-table thead tr th:eq(1)').addClass('layui-hide');

终于完结……

------------------------------------------------------------------------

jQuery :nth-child() 选择器

 jQuery 选择器

实例

选取属于其父元素的第三个子元素的每个 <p> 元素:

$("p:nth-child(3)")

尝试一下 »


定义和用法

:nth-child(n) 选择器选取属于其父元素的不限类型的第 n 个子元素的所有元素。

提示:请使用 :nth-of-type() 选择器来选取属于其父元素的特定类型的第 n 个子元素的所有元素。


语法

:nth-child(n|even|odd|formula)
参数 描述
n 要匹配的每个子元素的索引。

必须是一个数字。第一个元素的索引号是 1。

even 选取每个偶数子元素。
odd 选取每个奇数子元素。
formula 规定哪个子元素需通过公式 (an + b) 来选取。 
实例:p:nth-child(3n+2) 选取每个第三段,从第二个子元素开始。

尝试一下 - 实例

选取所有 <div> 元素的第二个子元素的每个 <p> 元素
如何选取所有 <div> 元素的第二个子元素的每个 <p> 元素。

使用公式 (an + b)
如何使用公式 (an + b) 来选取不同的子元素。

使用"偶数"和"奇数"
如何使用偶数和奇数来选取不同的子元素。

:nth-child()、:nth-last-child()、:nth-of-type() 和 :nth-of-last-type() 之间的不同
p:nth-child(2)、p:nth-last-child(2)、p:nth-of-type(2) 和 p:nth-last-of-type(2) 之间的不同。

layui table 数据表格 隐藏列的更多相关文章

  1. layui table 数据表格固定列的行高和table其他列的行高不一致

    1.问题描述:使用layui的table数据表格,固定某一列,这样表格中数据的宽度超出屏幕宽度时,固定列可以一直显示在屏幕中,不会随着底部滚动栏左右的拖动而变化位置.但是遇到一个问题,就是固定列的行高 ...

  2. layui table数据表格reload where参数保留问题

    layui table数据表格reload where参数保留问题 在使用layui过程中多多少少会遇到些问题 table reload 有个坑:reload时where参数会保留上次的参数,如果用 ...

  3. 项目总结17-使用layui table分页表格

    项目总结17-使用layui table分页表格总结 前言 在项目中,需要用到分页的表格来展示数据,发现layui的分页表格,是一个很好的选择:本文介绍layui table分页表格的前后端简单使用 ...

  4. Saiku设置展示table数据不隐藏空的行数据信息(二十六)

    Saiku设置展示table数据不隐藏空的行数据信息 saiku有个 非空的字段 按钮,点击这个后,会自动的把空的行数据信息给隐藏掉,这里我们来设置一下让其行数据不隐藏,为空的就为空. 主要更改两个文 ...

  5. LayUI之table数据表格获取行、行高亮等相关操作

    前言 目前LayUI数据表格既美观有不乏一些实用功能.基本上表格应有的操作已经具备,LayUI作者[贤心]肯定是煞费苦心去优化,此处致敬.但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格 ...

  6. layui中,同一个页面动态加载table数据表格

    效果图: 前端代码: <div class="layui-fluid" id="record-user" hidden="hidden" ...

  7. layui:数据表格如何合并单元格

    layui.use('table', function () { var table = layui.table; table.render({ elem: '#applyTab' , url: '$ ...

  8. SAP ABAP编程 Table Control动态隐藏列

    在SAP DIALOG设计中,有时候须要动态的隐藏某些列,以下是方法. ***数据定义 CONTROLS: table_control TYPE TABLEVIEW USING SCREEN 0100 ...

  9. layui的数据表格加上操作

    数据表格加上操作. <script type="text/html" id="barDemo"> <a class="layui-b ...

随机推荐

  1. 用Python实现的数据结构与算法:队列

    一.概述 队列(Queue)是一种先进先出(FIFO)的线性数据结构,插入操作在队尾(rear)进行,删除操作在队首(front)进行. 二.ADT 队列ADT(抽象数据类型)一般提供以下接口: Qu ...

  2. HDU1757:A Simple Math Problem(矩阵快速幂)

    http://acm.hdu.edu.cn/showproblem.php?pid=1757 Problem Description Lele now is thinking about a simp ...

  3. 线程,协程,IO模型

    理论: 1.每创造一个进程,默认里面就有一个线程 2.进程是一个资源单位,而进程里面的线程才是CPU上的一个调度单位 3.一个进程里面的多个线程,是共享这个进程里面的资源的 4.线程创建的开销比进程要 ...

  4. 4.5 Routing -- Setting Up A Controller

    1. 改变URL可能也会改变屏幕显示哪个模板.然而,如果它们有信息去显示,模板才是有用的. 2. 在Ember.js中,一个模板从一个controller检索信息去显示. 3. 为了告诉control ...

  5. 手把手教你学node.js之学习使用外部模块

    学习使用外部模块 目标 建立一个 lesson2 项目,在其中编写代码. 当在浏览器中访问 http://localhost:3000/?q=alsotang 时,输出 alsotang 的 md5 ...

  6. pycharm添加git ignore

    pycharm现在提供了git ignore,很方便 从这里下载扩展 https://plugins.jetbrains.com/plugin/7495--ignore 放到pycharm根目录\pl ...

  7. python webdriver 显示等待-自动登录126邮箱,添加联系人

    脚本内容:#encoding=utf-8#author-夏晓旭from selenium import webdriverimport timefrom selenium.webdriver.supp ...

  8. iOS开发之开发者申请

      一.对于真机调试,首先要在苹果网站上注册APP ID,以及购买iPhone Develop Program(iDP) 开发者授权,99美元.然后要创建证书请求CSR,创建步骤如下: 1.Mac O ...

  9. 这才是官方的tapable中文文档

    起因 搜索引擎搜索tapable中文文档,你会看见各种翻译,点进去一看,确实是官方的文档翻译过来的,但是webpack的文档确实还有很多需要改进的地方,既然是开源的为什么不去github上的tapab ...

  10. 20145118 《Java程序设计》 第2周学习总结

    20145118 <Java程序设计> 第2周学习总结 教材学习内容总结 起初翻开课本看到第三章的章节题目”基础语法”时,我就明白这是一章需要我们牢牢掌握并理解的学科.通过看课本我了解到, ...