bootstrap table选中行变色（改变datatable指定行变色）

：暂无数据 2026-08-14 22:30:02 ：0

本篇文章给大家谈谈bootstrap table选中行变色，以及改变datatable指定行变色对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。

本文目录

改变datatable指定行变色
如何在table中调用隔行变色
JQuery：如何使table的某一行变色呢
bootstrap 给table 增加这一行的点击事件,如图,点击某一行时我想触发一个方法
bootstraptable点击行 table怎么触发点击效果
js效果：选中单选按钮，表格中所在行整行变色

改变datatable指定行变色

DataTable最后需要赋值到DataGridView(或其他容器)上，需要修改GridView选中行颜色。 DataGridViewDefaultCellStyleSelectionBackColor = ColorRed; //将DataGridView选中背景色该为红色改变datatable指定行变色

1.新建html页面。如图：
创建table表格。如图：
对表格设置基本样式。如图：
为了增加显示效果对每行添加一个序号，然后在浏览器上打开。如图：
使用伪类选择器—nth-child(n)设置表格隔行变色。效果如图：
代码：
《!DOCTYPE html》《html》《head》《meta charset="UTF-8"》《title》table隔行变色《/title》《style type="text/css"》 table{ border-collapse:collapse;} table tr td{border: 1px solid #e7e7e7; height: 25px; } .w60{width: 60px;} .w100{width: 100px;} .text-c{text-align: center;} table tr:nth-child(2n){background-color: #fbc9a7} 《/style》《/head》《body》《table cellpadding="0" cellspacing="0" 》《tr》《td class="w60 text-c"》1《/td》《td》《/td》《td》《/td》《td》《/td》《td》《/td》《/tr》《tr》《td class="w60 text-c"》2《/td》《td》《/td》《td》《/td》《td》《/td》《td》《/td》《/tr》《tr》《td class="w60 text-c"》3《/td》《td》《/td》《td》《/td》《td》《/td》《td》《/td》《/tr》《tr》《td class="w60 text-c"》4《/td》《td》《/td》《td》《/td》《td》《/td》《td》《/td》《/tr》《tr》《td class="w60 text-c"》5《/td》《td》《/td》《td》《/td》《td》《/td》《td》《/td》《/tr》《/table》《/body》《/html》

JQuery：如何使table的某一行变色呢

jquery使用css3选择器“:nth-child(n)”可以快速选择具有一定规律排列的元素，:nth-child(n) 用于匹配属于其父元素的第 n 个子元素，其中n 可以是数字、关键词或公式。注意：

此过滤器的序号是从1开始的
需要IE8以上浏览器支持

下面实例演示——为table的第1,4,7，...行添加背景色变色：

1、HTML结构

《table id = "test"》
《tr》《td》1《/td》《td》1《/td》《td》2《/td》《td》3《/td》《/tr》
《tr》《td》2《/td》《td》4《/td》《td》5《/td》《td》6《/td》《/tr》
《tr》《td》3《/td》《td》7《/td》《td》8《/td》《td》9《/td》《/tr》
《tr》《td》4《/td》《td》1《/td》《td》2《/td》《td》3《/td》《/tr》
《tr》《td》5《/td》《td》4《/td》《td》5《/td》《td》6《/td》《/tr》
《tr》《td》6《/td》《td》7《/td》《td》8《/td》《td》9《/td》《/tr》
《tr》《td》7《/td》《td》1《/td》《td》2《/td》《td》3《/td》《/tr》
《tr》《td》8《/td》《td》4《/td》《td》5《/td》《td》6《/td》《/tr》
《tr》《td》9《/td》《td》7《/td》《td》8《/td》《td》9《/td》《/tr》
《/table》
《input type=’button’ value=’设置’/》

2、jquery代码

$(function(){
$("input").click(function() {
$("table#test tr:nth-child(3n+1)").css("background","#229922")
});
});

3、效果演示

bootstrap 给table 增加这一行的点击事件,如图,点击某一行时我想触发一个方法

《span style="font-family:’Times New Roman’;font-size:18px;"》$table.bootstrapTable({
//url: ’json/dev.json’,
data: wcssdata,
toolbar: ’#toolbar’, //工具按钮用哪个容器
//striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
//queryParams: postQueryParams,//传递参数（*）
//sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageSize: 20, //每页的记录行数（*）
pageList: , //可供选择的每页的行数（*）
strictSearch: true,
//height: table_h, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度,设置了行高后时标头宽度不会随着下面的行改变，且颜色也不会改变？？？？
uniqueId: "id", //每一行的唯一标识，一般为主键列
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
paginationHAlign: "left",
singleSelect: true,
//search:true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端
//strictSearch: true,
//showColumns: true, //是否显示所有的列
//showRefresh: true, //是否显示刷新按钮
clickToSelect: true, //是否启用点击选中行
paginationPreText: "《《",
paginationNextText: "》》",
columns: [{
checkbox: true,
}, {
field: ’id’,
title: ’序号’,
width: "75px",
}, {
field: ’seq_no’,
title: ’编号’,
}, {
field: ’type’,
title: ’类型’,
}, {
field: ’position’,
title: ’位置’,
}, {
field: ’status’,
title: ’设备状态’,
}, {
field: ’fault’,
title: ’故障现象’,
}, {
field: ’purchase_time’,
title: ’采购时间’,
}, {
field: ’quality_time’,
title: ’出保时间’,
}, {
field: ’maintain_unit’,
title: ’维护单位’,
}, {
field: ’inputer’,
title: ’录入者’,
}, {
field: ’operate’,
title: ’操作’,
width: ’80px’,
events: operateEvents1,
formatter: operateFormatter
}, ],
/*处理json数据需要配置此项
* responseHandler: function (res) {
return res.rows;
}*/
});《/span》

《span style="font-family:’Times New Roman’;font-size:18px;"》window.operateEvents1 = {
’click .RoleOfA’: function(e, value, row, index) {
detailmodal.open();
$("#dev_id").val(row.id);
$("#seq_no").val(row.seq_no);
$("#dev_pos").val(row.position);
$("#dev_type1").val(row.type);
$("#dev_status").val(row.status);
$("#fault").val(row.fault);
$("#buy_time").val(row.purchase_time);
$("#quality_time").val(row.quality_time);
$("#inputer").val(row.inputer);
$("#maintain_unit").val(row.maintain_unit);
for(var i in row) console.log(i);
}
};
function operateFormatter(value, row, index) {
return [
’《button id="btn_detail" type="button" class="RoleOfA btn-default bt-select"》详情《/button》’,
].join(’’);
}《/span》

bootstraptable点击行 table怎么触发点击效果

1、check.bs.table 或 uncheck.bs.table 可触发第一列多选框的选中事件
2、click-row.bs.table 触发行点击事件，但不能触发多选框的选中事件

js效果：选中单选按钮，表格中所在行整行变色

《head》
《title》无标题文档《/title》
《style type="text/css"》
body {
background-color: #CCC;
text-align: left;
}
body div table tr th {
text-align: left;
}
body div table {
font-family: Verdana, Geneva, sans-serif;
font-size: 24px;
}
.background_c{
background-color: red;
}
《/style》
《/head》
《body》
《div align="center"》
  《table width="615" height="157" border="5" align="center"》
    《tr》
      《td width="530" height="48"》1、
        《input type="radio" name="radio" id="radio" value="radio" /》
        a
        《input type="radio" name="radio" id="radio2" value="radio" /》
        b
《/td》
    《/tr》
    《tr》
      《td height="54"》2、
        《input type="radio" name="radio3" id="radio3" value="radio3" /》
        c
        《input type="radio" name="radio3" id="radio4" value="radio3" /》
        d
《/td》
    《/tr》
    《tr》
      《td height="37"》《div align="center"》
        《input type="submit" name="确认" id="确认" value="确认"  /》
      《/div》《/td》
    《/tr》
  《/table》
《/div》
《/body》
《script src="jq.js"》《/script》
《script》
$(’table’).on(’click’, ’input’, function() {
$(this).parent().addClass(’background_c’);
});
《/script》
《/html》