Javascript Jquery dataTable 更改行颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25742133/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery dataTable change row color
提问by Nk SP
I am using JQuery datatable,
I need to change the color of the row on the mouse over event (the highligthed row)
I tried:
我正在使用 JQuery 数据表，
我需要更改鼠标悬停事件（突出显示的行）上的行颜色，
我尝试过：
table.display tr.even.row_selected td {
background-color: red;
}
table.display tr.odd.row_selected td {
background-color: blue;
}
回答by reuelab
Try this CSS:
试试这个CSS：
table.display tbody tr:nth-child(even):hover td{
background-color: red !important;
}
table.display tbody tr:nth-child(odd):hover td {
background-color: blue !important;
}
回答by LS11
One of the JS snippets I write at the start of each project is to add some basic formatting to tables. Include this inside your $(function() { ... });block
我在每个项目开始时编写的 JS 片段之一是向表格添加一些基本格式。将此包含在您的$(function() { ... }); 中 堵塞
$('table tr').mouseover(function() {
$(this).addClass('row_selected');
});
$('table tr').mouseout(function() {
$(this).removeClass('row_selected');
});
Similarly, this bit will take away the hassle of adding odd/even markup to every row in the table, as your are building it
同样，这一点将消除为表中的每一行添加奇数/偶数标记的麻烦，因为您正在构建它
$('table').each(function() { $(this).find('tr:even').addClass('even'); });
$('table').each(function() { $(this).find('tr:odd').addClass('odd'); });
回答by Roi
This?
这个？
table.display tbody .odd:hover {
background-color: red !important;
}
table.display tbody .even:hover {
background-color: blue !important;
}
回答by aabiro
I was having an issue with the table css being overwritten if setting the styles with javascript, using the createdRow callback in the initialization of the table with jQuery worked:
如果使用 javascript 设置样式，在使用 jQuery 的表初始化中使用 createdRow 回调工作时，我遇到了表 css 被覆盖的问题：
var table = $('#myTable').DataTable({...
createdRow: function( row, data, dataIndex ) {
if (dataIndex%2 == 0) {
$(row).attr('style', 'background-color: red;');
} else {
$(row).attr('style', 'background-color: blue;');
}
}
});
see the docsfor Datatable createdRow
请参阅数据表 createdRow的文档
回答by Manish J
Try this
尝试这个
table.display tr.even td:hover{
background-color: red;
}
table.display tr.odd td:hover{
background-color: blue;
}
回答by Richa
回答by Quince
If you want the whole row to change colour you can do this
如果你想让整行改变颜色，你可以这样做
#example tr td {
height: 50px;
}
table#example tr.even:hover td {
background-color: red;
}
table#example tr.odd:hover td {
background-color: blue;
}
回答by Punitha Subramani Yoganyaa S
Can you try it? In CSS, td only changing color. This will be changing row color
你可以试试吗？在 CSS 中，td 只改变颜色。这将改变行颜色
Somthing like this
像这样的东西
$(document).ready(function() {
$('#example').dataTable();
$('table.display tr.even').hover(function(){
$(this).css('background-color','#f00');
});
$('table.display tr.even').mouseout(function(){
$(this).css('background-color','#f9f9f9');
});
} );
If it is not mandatory, remove it sorting_1 class name in first td. or can overwrite the css.
如果它不是强制性的，则在第一个 td 中将其删除 sort_1 类名。或者可以覆盖css。
