web-dev-qa-db-ja.com

CSS：テーブル内の選択した行の色を設定します

次の機能をテーブルに追加する必要があります。

ユーザーが行をクリック（選択）すると、その行は#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;
    }
csscolorscss-tables
5
Klausos Klausos

クリックした行に.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;
    });
}​
23
Ana

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が追加されます。もう一度クリックすると、クラスが削除されます。それが役に立てば幸い。

3
Simon Dorociak

これが道場を使ったフィドルです。他の誰もが言及したのと同じ概念。

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

注：複数の行を選択できるようにしました。質問は要件を述べていませんでした。

1
Craig Swing
<!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>
0
guntupallisiva sankar