CSS: customize the color of a highlighted row within a table

Question

CSS: customize the color of a highlighted row within a table

I am struggling to implement a new feature in my table. Specifically, I want the row to change color (#FFCF8B) when a user selects it. I attempted using #newspaper-b tbody tr.selected td, but it was not successful.

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

css colors css-tables

Answer 1

Answer №1

If you want to apply a .selected class to the row you click on, you'll need to use some JavaScript.

Take a look at this example http://jsfiddle.net/thebabydino/KzVfy/

I demonstrated using jQuery in this example, so the code is quite simple:

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

However, if you prefer not to use a library like jQuery, it can also be achieved.

As an alternative, I created another version that doesn't rely on any libraries (no jQuery, no Mootools, no YUI, no Dojo, etc.) and allows for selecting multiple rows. You can view it here: http://jsfiddle.net/thebabydino/nY5jj/. There's also a variation that deselects a row when clicked again: http://jsfiddle.net/thebabydino/nY5jj/1/

The JavaScript code for this version is as follows:

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

To deselect a row when clicked on 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;
    });
}

Answer 2

If you want to apply a .selected class to the row you click on, you'll need to use some JavaScript.

Take a look at this example http://jsfiddle.net/thebabydino/KzVfy/

I demonstrated using jQuery in this example, so the code is quite simple:

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

However, if you prefer not to use a library like jQuery, it can also be achieved.

As an alternative, I created another version that doesn't rely on any libraries (no jQuery, no Mootools, no YUI, no Dojo, etc.) and allows for selecting multiple rows. You can view it here: http://jsfiddle.net/thebabydino/nY5jj/. There's also a variation that deselects a row when clicked again: http://jsfiddle.net/thebabydino/nY5jj/1/

The JavaScript code for this version is as follows:

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

To deselect a row when clicked on 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;
    });
}

Answer 3

Answer №2

Using CSS alone may not achieve this effect, but you can utilize jQuery. Here is a quick example (though there are other methods to accomplish the same):

 <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 the following to your CSS file:

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

Include this jQuery script:

$('.tab tr').click(function() {
      $(this).toggleClass("clicked");
    });

By clicking on a row in your table, jQuery will apply a background-color to that row. Click again to remove the class. Hope this explanation helps.

Answer 4

Using CSS alone may not achieve this effect, but you can utilize jQuery. Here is a quick example (though there are other methods to accomplish the same):

 <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 the following to your CSS file:

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

Include this jQuery script:

$('.tab tr').click(function() {
      $(this).toggleClass("clicked");
    });

By clicking on a row in your table, jQuery will apply a background-color to that row. Click again to remove the class. Hope this explanation helps.

Answer 5

Answer №3

Check out this demonstration using dojo - incorporating familiar concepts discussed by many others.

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

Important to note: In this example, I enabled the selection of multiple rows even though it was not specified in the original question.

Answer 6

Check out this demonstration using dojo - incorporating familiar concepts discussed by many others.

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

Important to note: In this example, I enabled the selection of multiple rows even though it was not specified in the original question.

Answer 7

Answer №4

<!DOCTYPE html>
<html>
<head>
<style>
table, th {
    border: 1px dotted black;
    border-collapse: separate;
    padding: 7px;
    margin: 3px;
}
</style>
</head>
<body onload="initializeTable()">

<table id="myTable" onkeydown="handleKeyPress()">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
    <th>Header 4</th>
    <th>Header 5</th>
  </tr>
  <tr>
    <td>data 1</td>
    <td>data 2</td>
    <td>data 3</td>
    <td>data 4</td>
    <td>data 5</td>
  </tr>
  <tr>
    <td>data 6</td>
    <td>data 7</td>
    <td>data 8</td>
    <td>data 9</td>
    <td>data 10</td>
  </tr>
  <tr>
    <td>data 11</td>
    <td>data 12</td>
    <td>data 13</td>
    <td>data 14</td>
    <td>data 15</td>
  </tr>
  <tr>
    <td>data 16</td>
    <td>data 17</td>
    <td>data 18</td>
    <td>data 19</td>
    <td>data 20</td>
  </tr>
</table>

<script>

var currentRow = 0;
var currentCell = 0;
var selectedCellStyle = "3px solid #ff0000";
var defaultCellStyle = "1px solid #000000";

function initializeTable() {
     var table = document.getElementById("myTable");
  table.rows[currentRow].cells.item(currentCell).style.border = selectedCellStyle;

}

document.addEventListener('keydown', handleKeyPress);
function handleKeyPress(event){
  console.log(event.keyCode);
  var table = document.getElementById("myTable");
  var previousRow = table.rows[currentRow];
  var nextRow = null;
  var nextCell = null;
  
  if(event.keyCode == 40){
    if(previousRow){
      previousRow.cells.item(currentCell).style.border = defaultCellStyle;
    }
    currentRow++;
    nextRow = table.rows[currentRow];
    
    if(nextRow){
        nextRow.cells.item(currentCell).style.border = selectedCellStyle;
    }else{
      currentRow = 0;
      nextRow = table.rows[currentRow];
      nextRow.cells.item(currentCell).style.border = selectedCellStyle;
    }
  } else if(event.keyCode == 38){
    previousRow.cells.item(currentCell).style.border = defaultCellStyle;
    currentRow--;
    
    if(currentRow < 0){
      currentRow = table.rows.length - 1;
    }
    
    table.rows[currentRow].cells.item(currentCell).style.border = selectedCellStyle;
  } else if(event.keyCode == 39){
    previousRow.cells.item(currentCell).style.border = defaultCellStyle;
    currentCell++;
    nextCell = previousRow.cells.item(currentCell);
    
    if(nextCell){
      previousRow.cells.item(currentCell).style.border = selectedCellStyle;
    }else{
      currentCell = 0;
      previousRow.cells.item(currentCell).style.border = selectedCellStyle;
    }
  } else if(event.keyCode == 37){
    previousRow.cells.item(currentCell).style.border = defaultCellStyle;
    currentCell--;
    
    if(currentCell < 0){
      currentCell = previousRow.cells.length - 1;
    }
    
    previousRow.cells.item(currentCell).style.border = selectedCellStyle;
  }

}
</script>

</body>
</html>

Answer 8

<!DOCTYPE html>
<html>
<head>
<style>
table, th {
    border: 1px dotted black;
    border-collapse: separate;
    padding: 7px;
    margin: 3px;
}
</style>
</head>
<body onload="initializeTable()">

<table id="myTable" onkeydown="handleKeyPress()">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
    <th>Header 4</th>
    <th>Header 5</th>
  </tr>
  <tr>
    <td>data 1</td>
    <td>data 2</td>
    <td>data 3</td>
    <td>data 4</td>
    <td>data 5</td>
  </tr>
  <tr>
    <td>data 6</td>
    <td>data 7</td>
    <td>data 8</td>
    <td>data 9</td>
    <td>data 10</td>
  </tr>
  <tr>
    <td>data 11</td>
    <td>data 12</td>
    <td>data 13</td>
    <td>data 14</td>
    <td>data 15</td>
  </tr>
  <tr>
    <td>data 16</td>
    <td>data 17</td>
    <td>data 18</td>
    <td>data 19</td>
    <td>data 20</td>
  </tr>
</table>

<script>

var currentRow = 0;
var currentCell = 0;
var selectedCellStyle = "3px solid #ff0000";
var defaultCellStyle = "1px solid #000000";

function initializeTable() {
     var table = document.getElementById("myTable");
  table.rows[currentRow].cells.item(currentCell).style.border = selectedCellStyle;

}

document.addEventListener('keydown', handleKeyPress);
function handleKeyPress(event){
  console.log(event.keyCode);
  var table = document.getElementById("myTable");
  var previousRow = table.rows[currentRow];
  var nextRow = null;
  var nextCell = null;
  
  if(event.keyCode == 40){
    if(previousRow){
      previousRow.cells.item(currentCell).style.border = defaultCellStyle;
    }
    currentRow++;
    nextRow = table.rows[currentRow];
    
    if(nextRow){
        nextRow.cells.item(currentCell).style.border = selectedCellStyle;
    }else{
      currentRow = 0;
      nextRow = table.rows[currentRow];
      nextRow.cells.item(currentCell).style.border = selectedCellStyle;
    }
  } else if(event.keyCode == 38){
    previousRow.cells.item(currentCell).style.border = defaultCellStyle;
    currentRow--;
    
    if(currentRow < 0){
      currentRow = table.rows.length - 1;
    }
    
    table.rows[currentRow].cells.item(currentCell).style.border = selectedCellStyle;
  } else if(event.keyCode == 39){
    previousRow.cells.item(currentCell).style.border = defaultCellStyle;
    currentCell++;
    nextCell = previousRow.cells.item(currentCell);
    
    if(nextCell){
      previousRow.cells.item(currentCell).style.border = selectedCellStyle;
    }else{
      currentCell = 0;
      previousRow.cells.item(currentCell).style.border = selectedCellStyle;
    }
  } else if(event.keyCode == 37){
    previousRow.cells.item(currentCell).style.border = defaultCellStyle;
    currentCell--;
    
    if(currentCell < 0){
      currentCell = previousRow.cells.length - 1;
    }
    
    previousRow.cells.item(currentCell).style.border = selectedCellStyle;
  }

}
</script>

</body>
</html>

CSS: customize the color of a highlighted row within a table

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How can I use HTML code to style the header cell values of a table?

Adjust the initial slider according to the values displayed in the following four sliders

Is there a term similar to "Rise above the Rest" in the world of Web Development?

Image link in HTML / CSS not functional on one half of the image

Incorporate a fresh button into the Tinymce toolbar using C# programming

div that adjusts its max-width to always perfectly match the width of its contents

Problem with datepicker interface not aligning properly with Bootstrap grid

Ways to move the cursor to the search field after the placeholder text

Mobile responsiveness issues with Bootstrap 4 row

What is the best way to stack a canvas box on top of another canvas box?

I want to use flexbox to center three divs on my webpage

The issue with rendering CSS styles from <style></style> tags in Visual Studio while debugging in VB is causing a problem

Transform Arabic numerals into Roman numerals using only CSS styling

Design your own custom up and down arrow icons or buttons using CSS styling techniques

Unable to reduce the height of the li element

Troubles encountered when wrapping columns in bootstrap framework

To prevent flickering when using child flex elements, it's best to use position fixed along with a dynamically updated scrollbar position using Javascript

Modifying the colors of my navigation links is not within my control

Text Alignment Issue in Icon Bar of Zurb Foundation 5

Gap created between two td or tr elements