CSS：为表格中的选定行设置颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10765854/
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
CSS: set color for selected row in a table
提问by Klausos Klausos
I need to add the following feature to my table:
我需要将以下功能添加到我的表中：
When the user clicks on a row (selects it), the row is marked with the color #FFCF8B(the same as hover). I tried #newspaper-btbody tr.selected td, but it does not work.
当用户单击一行（选择它）时，该行会用颜色标记#FFCF8B（与 相同hover）。我试过了#newspaper-btbody tr.selected td，但它不起作用。
#newspaper-b {
border-collapse: collapse;
border-color: #B7DDF2;
border-style: solid;
border-width: 1px;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
margin: 0;
text-align: left;
width: 480px;
}
#newspaper-b th {
background: none repeat scroll 0 0 #EBF4FB;
border-color: lightgray;
font-size: 11px;
font-weight: bold;
padding: 15px 10px 10px;
}
#newspaper-b tbody tr td {
background: none repeat scroll 0 0 #FFFFFF;
}
#newspaper-b td {
border-top: 1px dashed #FFFFFF;
color: #000000;
padding: 10px;
}
#newspaper-b tbody tr:hover td {
background: none repeat scroll 0 0 #FFCF8B;
color: #000000;
}
#newspaper-b tbody tr.selected td {
background: none repeat scroll 0 0 #FFCF8B;
color: #000000;
}
回答by Ana
In order to add a .selected class to your clicked row you need a bit of JavaScript.
为了将 .selected 类添加到您单击的行，您需要一些 JavaScript。
Example http://jsfiddle.net/thebabydino/KzVfy/
示例http://jsfiddle.net/thebabydino/KzVfy/
I used jQuery for the example, so there is very little code:
我使用 jQuery 作为例子，所以代码很少：
$("tr").click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
});?
Of course, it can be done without using any library if you don't wish to include jQuery.
当然，如果您不想包含 jQuery，则可以在不使用任何库的情况下完成。
Just for variation, I did another version. This one uses no library(no jQuery, no Mootools, no YUI, no Dojo, and so on...) and selects multiple rows. Can be seen at http://jsfiddle.net/thebabydino/nY5jj/with a variation that unselelects a selected row when clicking on it again http://jsfiddle.net/thebabydino/nY5jj/1/
只是为了变化，我做了另一个版本。这个不使用库（没有 jQuery、没有 Mootools、没有 YUI、没有 Dojo 等等......）并选择多行。可以在http://jsfiddle.net/thebabydino/nY5jj/上看到，当再次单击它时会取消选择选定的行http://jsfiddle.net/thebabydino/nY5jj/1/
The JavaScript is:
JavaScript 是：
var trs = document.querySelectorAll("tr");
for(var i = 0; i < trs.length; i++){
trs[i].addEventListener("click", function(){this.className += " selected";});
}?
To unselect a selected row when clicking on it a second time :
要在第二次单击选定行时取消选择它：
var trs = document.querySelectorAll("tr");
for(var i = 0; i < trs.length; i++){
trs[i].addEventListener("click", function(){
var cn = this.className, thc = " selected", start_idx = cn.indexOf(thc);
if(start_idx == -1) cn += thc;
else cn = cn.replace(thc,"");
this.className = cn;
});
}?
回答by Simon Dorociak
With CSSi think you can't do this. You can use jQuery. I wrote fast basic example(but there is more ways how you can do it):
随着CSS我认为你不能做到这一点。您可以使用jQuery. 我写了快速的基本示例（但有更多方法可以做到）：
<table class="tab" cellpading="0" cellspacing="0" border="1">
<tr>
<td>lol</td>
<td>lol</td>
</tr>
<tr>
<td>lol</td>
<td>lol</td>
</tr>
<tr>
<td>lol</td>
<td>lol</td>
</tr>
</table>
Add to your CSSfile this:
添加到您的CSS文件：
tr.clicked {
background-color: #abc;
}
Add this jQuerycode:
添加此jQuery代码：
$('.tab tr').click(function() {
$(this).toggleClass("clicked");
});
When you click on row in your table, jQuerywill add background-colorfor your row, click again, class will be removed.
Hope it helps.
当您单击 中的行时table，jQuery将为background-color您的行添加，再次单击，类将被删除。希望能帮助到你。
回答by Craig Swing
Here's a fiddle using dojo. Same concepts that everyone else has mentioned.
这是一个使用 dojo 的小提琴。其他人提到的相同概念。
http://jsfiddle.net/cswing/SG9dp/
http://jsfiddle.net/cswing/SG9dp/
NOTE: I allowed multiple rows to be selected. Question didn't state the requirement.
注意：我允许选择多行。问题没有说明要求。
回答by guntupallisiva sankar
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 2px solid black;
border-collapse: collapse;
padding: 5px;
marging: 2px;
}
</style>
</head>
<body onload="initSelection()">
<table id="myTable" onkeydown="fn">
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
<td>cell 5</td>
<td>cell 6</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 5</td>
<td>cell 6</td>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 7</td>
<td>cell 8</td>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 1</td>
<td>cell 2</td>
</tr>
</table>
<script>
var row = 0;
var cell = 0
var selectedStyle = "5px solid #c68305";
var deleSelectedStyle ="2px solid #000000" ;
function initSelection() {
var x = document.getElementById("myTable");
x.rows[row].cells.item(cell).style.border = selectedStyle;
}
document.addEventListener('keydown',fn);
function fn(event){
console.log(event.keyCode);
var x = document.getElementById("myTable");
var prev = x.rows[row];
var cur = null;
var next = null;
if(event.keyCode ==40){
if(prev){
prev.cells.item(cell).style.border = deleSelectedStyle;
}
row++;
cur = x.rows[row];
if(cur){
cur.cells.item(cell).style.border = selectedStyle;
}else{
row =0;
cur = x.rows[row];
cur.cells.item(cell).style.border = selectedStyle;
}
}else if(event.keyCode==38){
prev.cells.item(cell).style.border = deleSelectedStyle;
row--;
if(row<0){
row = x.rows.length-1;
}
x.rows[row].cells.item(cell).style.border = selectedStyle;
}else if(event.keyCode==39){
prev.cells.item(cell).style.border = deleSelectedStyle;
cell++;
next = prev.cells.item(cell);
if(next){
prev.cells.item(cell).style.border = selectedStyle;
}else{
cell = 0;
prev.cells.item(cell).style.border = selectedStyle;
}
}else if(event.keyCode==37){
prev.cells.item(cell).style.border = deleSelectedStyle;
cell--;
if(cell<0){
cell = prev.cells.length-1;
}
prev.cells.item(cell).style.border = selectedStyle;
}
}
</script>
</body>
</html>
