Jquery DataTable 实现换行交替变色，实现根据单元格内容变换单元格背景颜色，实现 01 替换成是否

yaomengjia

已于 2023-12-16 17:00:19 修改

阅读量667

点赞数 6

文章标签： jquery 前端 javascript

于 2023-12-16 15:26:52 首次发布

本文链接：https://blog.csdn.net/u014393500/article/details/135033106

版权

本文详细介绍了如何使用Jquery DataTables实现行交替变色、根据单元格内容改变背景颜色以及将01转换为'是'或'否'的显示。通过createdRow和createdCell方法，可以实现对行和单元格的动态样式调整，同时针对特定数据字段进行内容转换。

摘要由CSDN通过智能技术生成

Jquery DataTable常用知识点

1.实现换行交替变色

1.1.createdRow方法在每行数据生成时触发一次，
1.2.row表示整行数据，dataIndex表示索引，从0开始。
1.3.通过取模运算符%，结果为0的就是索引为偶数，就会变色
1.4. 第一行，第三行。。。索引为偶数，会变色

"createdRow": function( row, data, dataIndex){
   
			if(dataIndex % 2 === 0)
			$(row).css("background-color", "#E3ECEB");
		},

2.实现根据单元格内容变换单元格背景颜色-只变化文字所在区域

2.1.数据库中字段为color，字符型，根据数据库内容，变换颜色，这个只能变换文字所在span颜色，整个单元格还是原来的颜色
2.2 data表示当前单元格数据，type表示当前单元格数据类型，row表示整行数据，
第一种写法指定了data为color，即"data": “color”, 所以后面代码直接用data
第二种data为空，即"data": “”,所以后面代码要用row.color

 "columns": [
           {
   
              "data": "color",
              "defaultContent": "",
              "render": function(data,type,row){
   
                   if(data==='red')
                   {