layui table 数据表格 隐藏列

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

 

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

 

id列的代码是：

, cols: [[ //标题栏
                    {field: 'data_id', title: 'ID', width: 50,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) 之间的不同。

转载于:https://www.cnblogs.com/andu99/p/9070343.html