Question

我要在桌子上加上以下特点:

当用户单击一行(选择该行)时,该行将标有颜色 (与 hover 相同) 。我尝试了 >tbody td 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

要在单击的行中添加. sective 类, 您需要一些 JavaScript 。

实例

我用jQuery作为例子,所以代码很少:

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

当然,如果你不想包括jQuery的话,可以不用任何图书馆就可以做到这一点。

我做了另一个版本。 < strong> this one uses no library (no jQuery, no Mootools, no YUI, no Dojo, et so on...), 并选择了多个行。您可以在 < a href=" http://jsfiddle.net/thebabydino/nY5jj/" > http://jsfiddle.net/thebabydino/nY5jj/1/ < a > 上看到, 当再次点击选中的一行时, 变式不会被删除 : < a href="http://jsfiddle.net/thebabydino/nY5jj/1/ a > >

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 I think you can't do this. 您可以使用 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");
    });

When you click on row in your table, jQuery will add background-color for your row, click again, class will be removed. Hope it helps.

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>

友情链接