Change Table Row Color with Checkbox Click

Welcome to our tech support article on how to change the color of a table row when a checkbox is clicked. This feature can be useful when you want to highlight or mark certain rows in a table based on user interaction. We'll guide you through the process step by step, making it easy for even entry level users to implement.

Step 1: Setting up the HTML Structure

To begin, let's create a basic HTML structure for our table. We'll use a simple table with three columns: ID, Name, and Checkbox. Each row will represent an item in the table. Here's an example:


    <table id="myTable">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Checkbox</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>John</td>
          <td><input type="checkbox" onchange="changeRowColor(this)" /></td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jane</td>
          <td><input type="checkbox" onchange="changeRowColor(this)" /></td>
        </tr>
        <tr>
          <td>3</td>
          <td>Mike</td>
          <td><input type="checkbox" onchange="changeRowColor(this)" /></td>
        </tr>
      </tbody>
    </table>

In the above code, we have a table with three rows. Each row contains a checkbox in the third column. We have added an onchange event to each checkbox, which will trigger the changeRowColor function when the checkbox state changes.

Step 2: Implementing the JavaScript Function

Now, let's define the JavaScript function changeRowColor that will handle the row color change. Add the following script to the <head> section of your HTML document:


    <script>
      function changeRowColor(checkbox) {
        var row = checkbox.parentNode.parentNode;
        if (checkbox.checked) {
          row.style.backgroundColor = "yellow";
        } else {
          row.style.backgroundColor = "";
        }
      }
    </script>

The changeRowColor function takes the checkbox element as an argument. It finds the parent <tr> element of the checkbox using parentNode twice. Then, it checks if the checkbox is checked or not. If checked, it sets the background color of the row to yellow; otherwise, it removes the background color. You can modify the color as per your preference by changing the value in row.style.backgroundColor.

Step 3: Testing and Customization

With the HTML structure and JavaScript function in place, you can now test the functionality. Open your HTML document in a web browser and try clicking the checkboxes. You should see the row color change accordingly.

If you want to customize the row color or add additional styling, you can modify the CSS properties of the row in the changeRowColor function. For example, you can change the font color, font size, or add borders to the row by accessing the style property of the row element.

Conclusion

Congratulations! You have successfully learned how to change the color of a table row when a checkbox is clicked. This feature can be useful in various scenarios, such as marking selected items or highlighting specific rows in a table. By following the steps outlined in this article, even entry level users can implement this functionality in their web projects.

References

Source	Link
W3Schools - HTML Tables	https://www.w3schools.com/html/html_tables.asp
MDN Web Docs - HTML Table Basics	https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics
MDN Web Docs - JavaScript	https://developer.mozilla.org/en-US/docs/Web/JavaScript

Change Table Row Color with Checkbox Click | Tech Support