CSS: set color for selected row in a table

前端未结

关注

 4  628

無奈伤痛

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

相关标签:

4条回答

醉酒成梦

2020-12-31 23:47

Here's a fiddle using dojo. Same concepts that everyone else has mentioned.

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

NOTE: I allowed multiple rows to be selected. Question didn't state the requirement.

0 讨论(0)
发布评论:

提交评论
- 加载中...

挽巷

2020-12-31 23:56

<!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 讨论(0)

忘掉有多难

2020-12-31 23:57

With CSS i 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):

 <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 CSS file this:

tr.clicked {
      background-color: #abc;
}

Add this jQuery code:

$('.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.

0 讨论(0)

抹茶落季

2021-01-01 00:06
In order to add a .selected class to your clicked row you need a bit of JavaScript.

Example http://jsfiddle.net/thebabydino/KzVfy/

I used jQuery for the example, so there is very little code:
```
$("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.

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/

The JavaScript is:
```
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;
    });
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...