bootstrap table自定义隔行颜色

已于 2022-08-04 15:05:12 修改
阅读量778 收藏 1
点赞数 1
文章标签： bootstrap
于 2022-05-09 12:03:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_65970232/article/details/124663286
版权

在给table加上striped属性后，它其实是生效了的，只是其默认的css颜色为白色。我们只需自定义一个css文件，里面写：

.table-striped>tbody>tr:nth-of-type(odd){background-color:#你要的颜色;}

然后在需要的页面引入就能使用了。

效果如下:

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pe2556sNjM5,size_20,color_FFFFFF,t_70,g_se,x_16

时瞬639
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrapTable 自定义可编辑每页显示的记录数
03-02
引用在table.js后面，把原来的下拉选择每页数量变为输入框输入
表格插件-bootstrap table的隔行换色
祈澈菇凉
11-18 1万+
在写表格插件的时候，要不断的进行表格优化，才会让界面的感观变得越来越好看，bootstrap table的隔行换色功能也是其中的一个，几行代码就OK了。 代码如下： #mytable tr:nth-child(even){ background: #fafafa; } #mytable th{ background: #efe...
bootstrap表格实现隔行换色
weixin_44434307的博客
07-15 1604
bootstrap表格实现隔行换色 <table id="GeneralAccountTable" class="table-striped"></table> 给table加“class="table-striped"即可 注意！还需引入bootstrap-table-fixed-columns.css
bootstraptable动态修改行/列的背景颜色或字体颜色
Odinpeng的博客
07-25 4088
JavaScript/HTML/CSS/bootstrap/bootstraptable动态修改行的背景颜色，修改行字体的颜色rowStyle: function (row, index) { //row：行对象， index ：第几行 // 逻辑 return {css: {"background-color": 'rgb(0,0,0)'}}; }
如何修改Bootstrap Table中table-striped的颜色
沐沐
06-20 1万+
table-striped可以使table每一行颜色不同，但是如果不想用默认的，想自己自定义颜色该怎么写呢 只需要在自己的css里面写上： .table-striped &gt; tbody &gt; tr:nth-child(2n+1) &gt; td, .table-striped &gt; tbody &gt; tr:nth-child(2n+1) &gt; th { back...
bootstrap 黑边框表格样式_设置Bootstrap Table表格样式并隔行变色
weixin_30666313的博客
12-31 2079
设置Bootstrap Table表格样式并隔行变色设置bootstrap-table表格样式可以通过设置classess属性进行设置，官方默认支持黑色主题、隔行变色等样式，你也可以自定义样式把你的样式类名传进去。table-bordered设置表格边框$('#table').bootstrapTable({columns: columns,data: getData(),classes: "ta...
Bootstrap-Table改变行背景颜色或行文字样式方法及踩坑
Hello博客
07-06 694
// bootstrap-table表格加载成功后执行的函数 onLoadSuccess: function(){ var tableId = $(selector); // 以下循环会报错 for(var i = 1;i &amp;lt; tableId[1].rows.length;i++) { if(tableId[1].rows[i].cells[4].in...
bootstrapTable 动态设置行（rowStyle）的颜色 和 列（cellStyle 单元格）的颜色
猎人在吃肉
04-19 1万+
function load() { $('#exampleTable').bootstrapTable({ url : "/config/list", queryParams : function(params) { return { limit: params.limit, offset: params.offset, } }, onClickRow : function(row, $element){ addSelectedRowJsonDat
Bootstrap-table自定义可编辑每页显示记录数.docx
01-12
Bootstrap-table自定义可编辑每页显示记录数.docx
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
01-19
废话不多说了，直接给大家贴代码了，具体代码如下所示： <%@ page language=java import=java..../resources/css/bootstrap.min.css> </head> <body> <div class=table-responsive> <tabl
bootstrap设置某列背景色和前景色
07-12
bootstrap设置某列背景色和前景色
Bootstrap table使用方法记录
08-29
主要为大家详细介绍了Bootstrap table的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrapTable使用示例.rar
04-14
bootstrapTable组件的使用示例，里面包含父子表、treegrid以及结合knockoutjs的使用示例。博客园博主本人资源，有问题可以联系。
Bootstrap3基础 bg-danger/info... 辅助类样式 背景文本颜色
weixin_33991727的博客
03-17 1194
  内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor   Visual Studio Code 1.32.1     typesetting   Markdown   code <!DOCTYPE html> ...
bootstrap table表格 设置背景颜色 设置字体颜色cellStyle 显示隐藏列(更换工具栏图标) 固定列 导出(兼容全部导出时(all)) 调整列宽 日期格式化1970-01-01bug
tanzongbiao的专栏
12-15 6758
cellStyle: function (value, row, index){ return {css:{'background-color':'#F3F3F4'}}; }
bootstrapTable设置行样式(背景颜色)
cxu123321的博客
06-04 2万+
bootstrapTable设置行样式(背景颜色) 2018-09-03 11:13:50来源：原创作者：寂静的神经4471 bootstrap table定义代码： $table.bootstrapTable({ showExport: true, height: 540, rowStyle:rowStyle,//通过自定义函数设置行样式 co...
bootstrapTable隔行变色
qq_40308101的博客
07-26 923
rowStyle: function (row, index) {//隔行变色 let classesArr = ['success', 'info']; let strClass; if (index % 2 === 0) {//偶数行 strClass = classesArr[0]; } else {//奇数行 strClass = classesArr[1]; } return {classes: strClass};
bootstrap-table.js如何根据单元格数据不同显示不同的字体的颜色
热门推荐
qq_31540195的博客
07-06 3万+
在bootstrap-table.js里面列属性 formatter就是用来格式化单元格的，其默认值是undefined 类型是function，function(value,  row, index), value：该cell本来的值，row：该行数据，index：该行序号（从0开始）；table的标签属性是为：data-formatter 可以再bootstrap-table.js直接设
node-v10.22.0-darwin-x64.tar.xz
最新发布
05-03
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
bootstraptable 自定义函数
06-08
var rows = $('#table').bootstrapTable('getSelections'); // 获取选中的行数据 var data = $('#table').bootstrapTable('getData'); // 获取表格所有数据 ``` 可以根据需要编写自定义的操作逻辑，例如删除选中的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值