如何设置bootstrap-table插件的隔行变色的颜色

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何设置bootstrap-table插件的隔行变色的颜色相关的知识,希望对你有一定的参考价值。

参考技术A 以前在做页面显示列表时候,要做一组数据隔行变色,当时不知道,竟然用来了好多js脚本判断,写了许多像下面的例子。html代码//循环取列表//循环结束后来直接用css控制:.Pop_TRbackground-color:expression(this.rowIndex%2==0?"一种颜色":"另一种颜色");cursor:hand;这样,想展示上面的样式,只需要这样写:Html代码//循环取列表//循环结束css版只适用于低版本的IE,expression会死人的,如果页面很复杂。还不如前面的切换2个class的简单方法可靠。在高级浏览器中可以考虑使用cssselector(流行的js库基本都实现了一套):tr:nth-child(2n+1)/*奇数行*/tr:nth-child(odd)/*奇数行*/tr:nth-child(2n+0)/*偶数行*/tr:nth-child(even)/*偶数行*/Jquery版:JQuery的话也很简单1.通过定义俩个class来实现$("tr:even").addClass("even-row");$("tr:odd").addClass("odd-row");2.或者一行代码$("tr").each(function(i)this.style.backgroundColor['#ccc','#fff'][i%2])table控制:做个table奇偶行区别显示的css类就好了,这东西不复杂的"> 参考技术B striped : true

以上是关于如何设置bootstrap-table插件的隔行变色的颜色的主要内容,如果未能解决你的问题,请参考以下文章

bootstrap-table的使用

开源插件Bootstrap-Table 实现表格的查询分页排序

如何使用JS在`bootstrap-table`生成的`lt;td>标签中添加`data`属性

bootstrap-table - 如何设置表格行背景颜色

Bootstrap_table与Java整合使用

bootstrap table 插件 搜索