Question

我需要在表格中添加以下功能：

当用户点击一行（选择它）时，该行标有颜色#FFCF8B（与hover相同）。我尝试了#newspaper-b tbody 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;
    }

Answer 1

为了向您点击的行添加.selected类，您需要一点JavaScript。

示例http://jsfiddle.net/thebabydino/KzVfy/

我使用jQuery作为示例，因此代码非常少：

$("tr").click(function(){
    $(this).addClass("selected").siblings().removeClass("selected");
});

当然，如果你不想包含jQuery，可以在不使用任何库的情况下完成。

只是因为变异，我做了另一个版本。 这个没有使用库（没有jQuery，没有Mootools，没有YUI，没有Dojo等等）并且选择了多行。可以在http://jsfiddle.net/thebabydino/nY5jj/处看到，其变体会在再次点击时取消选择所选行http://jsfiddle.net/thebabydino/nY5jj/1/

JavaScript是：

var trs = document.querySelectorAll("tr");
for(var i = 0; i < trs.length; i++){
    trs[i].addEventListener("click", function(){this.className += " selected";});
}

要在第二次单击时取消选择所选行：

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;
    });
}

Answer 2

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>

将CSS文件添加到您的tr.clicked { background-color: #abc; }文件中：

jQuery

添加此$('.tab tr').click(function() { $(this).toggleClass("clicked"); });代码：

table

当您点击jQuery中的行时，background-color会为您的行添加{{1}}，再次点击，该类将被删除。希望它有所帮助。

Answer 3

这是使用dojo的小提琴。其他人都提到的相同概念。

http://jsfiddle.net/cswing/SG9dp/

注意：我允许选择多行。问题没有说明要求。

Answer 4

<!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>

CSS：为表格中的选定行设置颜色

4 个答案: