6

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

当用户单击一行（选择它）时，该行会用颜色标记#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;
    }
4

4 回答 4

30

为了将 .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;
    });
}​
于 2012-05-26T11:49:20.957 回答
5

我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您的行添加，再次单击，类将被删除。希望能帮助到你。

于 2012-05-26T11:48:32.630 回答
2

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

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

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

于 2012-05-26T11:53:14.063 回答
1 
<!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>
于 2018-09-17T10:33:01.617 回答