Using HTML to dynamically alter a row's background color depending on its value

Question

Using HTML to dynamically alter a row's background color depending on its value

I have a table within an HTML page that I would like to color all rows in red when the first column reaches a specific value.

After researching on StackOverflow, I found suggestions to add these two attributes (border-collapse and border-spacing) to my table:

<table id="my-table" style="border-collapse:collapse; border-spacing:0 1px">

Now, how can I use JavaScript to set the background color based on a new value?

I attempted the following approaches:

 if (value == 'broken') {my-table[i].css('background-color','red');} // OR   
 if (value == 'broken') {my-table[i].cells.style.background = 'red';}

where i is the index of the row I am targeting. However, no changes are visible! Can anyone provide me with advice? Thank you.

javascript jquery html css

Answer 1

Answer №1

Here is an example showcasing a tutorial on navigating a grid...

Feel free to customize this example to suit your needs...

You can also utilize the table Object for similar tasks...


  <!doctype html>
  <html lang="en">
  <head>
    <meta charset="UTF-8>
    <title>Grid Navigation</title>
    <style>
      td{width:10px;height:10px;background:#ddd;}
      tr:nth-child(5) td:nth-child(5){background:#f00;}
    </style>
  </head>
  <body>
    <div id="gridContainer">
    </div>
    <script>
      
      var row=col=5,max=10;
      gridContainer.innerHTML = '<table>'+('<tr>'+'<td>'.repeat(max)).repeat(max)+'</table>';
      window.addEventListener("keyup", function(e){
        var colDiff, rowDiff;
        var keyMap = new Map([[37,[-1,0]],[38,[0,-1]],[39,[1,0]],[40,[0,1]]]);
        if (keyMap.has(e.keyCode)){
          document.querySelector(`tr:nth-child(${row}) td:nth-child(${col})`).style.background='#ddd';
          [colDiff,rowDiff]=keyMap.get(e.keyCode);
          row+=rowDiff;
          col+=colDiff;
          row = (row>max) ? max : (row < 1) ? 1 : row;
          col = (col>max) ? max : (col < 1) ? 1 : col;
          document.querySelector(`tr:nth-child(${row}) td:nth-child(${col})`).style.background='#f00';
        }
      }) 
    </script>
    
  </body>
  </html>

Answer 2

Here is an example showcasing a tutorial on navigating a grid...

Feel free to customize this example to suit your needs...

You can also utilize the table Object for similar tasks...


  <!doctype html>
  <html lang="en">
  <head>
    <meta charset="UTF-8>
    <title>Grid Navigation</title>
    <style>
      td{width:10px;height:10px;background:#ddd;}
      tr:nth-child(5) td:nth-child(5){background:#f00;}
    </style>
  </head>
  <body>
    <div id="gridContainer">
    </div>
    <script>
      
      var row=col=5,max=10;
      gridContainer.innerHTML = '<table>'+('<tr>'+'<td>'.repeat(max)).repeat(max)+'</table>';
      window.addEventListener("keyup", function(e){
        var colDiff, rowDiff;
        var keyMap = new Map([[37,[-1,0]],[38,[0,-1]],[39,[1,0]],[40,[0,1]]]);
        if (keyMap.has(e.keyCode)){
          document.querySelector(`tr:nth-child(${row}) td:nth-child(${col})`).style.background='#ddd';
          [colDiff,rowDiff]=keyMap.get(e.keyCode);
          row+=rowDiff;
          col+=colDiff;
          row = (row>max) ? max : (row < 1) ? 1 : row;
          col = (col>max) ? max : (col < 1) ? 1 : col;
          document.querySelector(`tr:nth-child(${row}) td:nth-child(${col})`).style.background='#f00';
        }
      }) 
    </script>
    
  </body>
  </html>

Answer 3

Answer №2

Optimize your code by utilizing document.getElementById along with a variable to simplify the process.

For example:

 let tableRows = document.getElementById("tableID").getElementsByTagName("tr");
 tableRows[index].style.backgroundColor = "blue";

Don't forget to monitor your console for any potential errors and confirm that the value of index is correct and properly assigned.

Answer 4

Optimize your code by utilizing document.getElementById along with a variable to simplify the process.

For example:

 let tableRows = document.getElementById("tableID").getElementsByTagName("tr");
 tableRows[index].style.backgroundColor = "blue";

Don't forget to monitor your console for any potential errors and confirm that the value of index is correct and properly assigned.

Answer 5

Answer №3

To change the background color of a specific row, you will need to apply CSS styles to the tr element. Without further information on where the variable value is declared, it's difficult to provide a precise code example.

Here is an instance where I determine if a row should be marked as "broken" based on a data attribute assigned to the tr:

$("tbody tr", $("#my-table")).each(function() {
  var tr = $(this);

  if (tr.data("broken") == true) {
    tr.css({
      "background-color": "red"
    })
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="my-table" style="border-collapse:collapse; border-spacing:0 1px">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr data-broken="true">
      <td>Value 1</td>
      <td>Value 2</td>
    </tr>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
    </tr>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
    </tr>
  </tbody>
</table>

Answer 6

To change the background color of a specific row, you will need to apply CSS styles to the tr element. Without further information on where the variable value is declared, it's difficult to provide a precise code example.

Here is an instance where I determine if a row should be marked as "broken" based on a data attribute assigned to the tr:

$("tbody tr", $("#my-table")).each(function() {
  var tr = $(this);

  if (tr.data("broken") == true) {
    tr.css({
      "background-color": "red"
    })
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="my-table" style="border-collapse:collapse; border-spacing:0 1px">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr data-broken="true">
      <td>Value 1</td>
      <td>Value 2</td>
    </tr>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
    </tr>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
    </tr>
  </tbody>
</table>

Using HTML to dynamically alter a row's background color depending on its value

Answer №1

Answer №2

Answer №3

Similar questions

Attempting to implement a basic AngularJS integration with Google Maps for a straightforward demonstration

Is there a way to extract the content from a dynamic textbox using a dynamic button in HTML and AJAX?

Responsive SVG curve line design

Module Not Found Error: Electron and Typescript Collaboration

Create a complete duplicate of a Django model instance, along with all of its associated

Examining the code - I'm having trouble locating the origin of its creation

Guide on Implementing Right-to-Left (RTL) Support in Material UI React

Modifying or enhancing a jQuery method

Tips for extending the space between one element and another when the width decreases:

Is your overlaying div functioning properly in Chrome and Firefox, but encountering issues in Internet Explorer?

I am experiencing an issue with the Search Filter where it is not successfully removing

Another component's Angular event emitter is causing confusion with that of a different component

Align a component vertically in a FlexBox using Material UI

Executing Actions Prior to Redirecting

Transitioning background with background sizing set to cover

Placing a video as the background of a div element and ensuring the text appears in the

In what way is the background-color of WindowInfoBackground utilized?

Nuxt with Laravel API Integration

Quirky Behavior of an Array of Objects

Background image spacing