Highlighting a row upon being clicked

Question

Highlighting a row upon being clicked

How can I implement a feature in my HTML page that highlights a row when selected by changing the row color to #DFDFDF?

If another row is selected, I would like the previously selected row to return to its original color and the newly selected row to be highlighted.

Note that I want the top header to be exempt from this color changing behavior.

You can view the fiddle here: http://jsfiddle.net/q42L2/

Thank you in advance for your assistance.

<div id="results" class="scrollingdatagrid">

  <table id="mstrTable" cellspacing="0">
     <thead>
      <tr> 
        <th>File Number</th>
        <th>Date1</th>
        <th>Date2</th>
        <th>Status</th>
        <th>Num.</th>
      </tr>
    </thead>
    <tbody>
      <tr> 
        <td>KABC</td>
        <td>09/12/2002</td>
        <td>09/12/2002</td>
        <td>Submitted</td>
        <td>0</td>

      </tr>
      ... more table rows ...
    </tbody>
  </table>

</div>

javascript html css dom

Answer 1

Answer №1

Here is a potential starting point (not tested). This code will guide you in the right direction. After creating the table, include this code either by deferring it or by calling initSelectableTable from the onload function. Remember to set the id of your table to "SelectableTable".

var OldColor = "";
var SelectedRow = null;
var SelectedColor = "#DFDFDF";

initSelectableTable("SelectableTable");

function onCellClicked(cell) {
    if (cell.parentNode) {
        if (SelectedRow) SelectedRow.style.backgroundColor = OldColor;
        SelectedRow = cell.parentNode;
        OldColor = SelectedRow.style.backgroundColor;
        SelectedRow.style.backgroundColor = SelectedColor;     
    }
}

function initSelectableTable(tableId) {
    var elTable = document.getElementById(tableId);
    if (elTable) {
        var cells = elTable.getElementsByTagName("td");
        for (var i = 0; i < cells.length; i++) {
            cells[i].onclick = function () { onCellClicked(this); }
        }
    }
}

I hope this information proves useful...

Answer 2

Here is a potential starting point (not tested). This code will guide you in the right direction. After creating the table, include this code either by deferring it or by calling initSelectableTable from the onload function. Remember to set the id of your table to "SelectableTable".

var OldColor = "";
var SelectedRow = null;
var SelectedColor = "#DFDFDF";

initSelectableTable("SelectableTable");

function onCellClicked(cell) {
    if (cell.parentNode) {
        if (SelectedRow) SelectedRow.style.backgroundColor = OldColor;
        SelectedRow = cell.parentNode;
        OldColor = SelectedRow.style.backgroundColor;
        SelectedRow.style.backgroundColor = SelectedColor;     
    }
}

function initSelectableTable(tableId) {
    var elTable = document.getElementById(tableId);
    if (elTable) {
        var cells = elTable.getElementsByTagName("td");
        for (var i = 0; i < cells.length; i++) {
            cells[i].onclick = function () { onCellClicked(this); }
        }
    }
}

I hope this information proves useful...

Answer 3

Answer №2

$('tbody tr').on('click', function (event){
  $('tbody tr').css('background-color', 'white');
    $(this).css('background-color', 'blue');
  });

http://jsfiddle.net/username1234/ABC123/4/

Give this solution a try, it has been tested and works perfectly

Answer 4

$('tbody tr').on('click', function (event){
  $('tbody tr').css('background-color', 'white');
    $(this).css('background-color', 'blue');
  });

http://jsfiddle.net/username1234/ABC123/4/

Give this solution a try, it has been tested and works perfectly

Answer 5

Answer №3

To implement this functionality using jQuery, you can use the code snippet below:

$(document).ready(function () {       
  $('#mstrTable tr').not('thead tr').click(function () {
    $('#mstrTable tr').css('background-color', 'white');
    $(this).css('background-color', '#DFDFDF');             
  }); 
});

Check out the DEMO here

Note:

We have excluded the thead elements from the selection using the not method.

Answer 6

To implement this functionality using jQuery, you can use the code snippet below:

$(document).ready(function () {       
  $('#mstrTable tr').not('thead tr').click(function () {
    $('#mstrTable tr').css('background-color', 'white');
    $(this).css('background-color', '#DFDFDF');             
  }); 
});

Check out the DEMO here

Note:

We have excluded the thead elements from the selection using the not method.

Highlighting a row upon being clicked

Answer №1

Answer №2

Answer №3

Similar questions

Tips for utilizing a for loop within an array extracted from a jQuery element for automation

Guide to customizing color themes using Twitter Bootstrap 3

Is there a way to successfully submit a form in PHP once it has been validated using JavaScript?

Maintain the fancybox open even in case of ajax errors

Retrieving metadata using breeze is taking too long

What is the option for receiving automatic suggestions while formatting components in a react.js file?

There is no need for updates as git is already current for some mysterious reason

React Native does not support Laravel Echo's listenForWhisper functionality

What could be causing the load() function in my AJAX to not work properly in this code?

Obtain a variety of selections for multiple selects and individually incorporate them into a standard select menu

The Javascript executor in Selenium is delivering a null value

Displaying an array of data using ng-repeat, only showing records where the value is found within a field of another object

Leveraging the Mutation hook for updating information on a Graphql server

React: Selecting Component Name Based on Provided Property

Click the toggle ng-press attribute

How can I overlay a background image on top of another div?

Using an outdated version of Node.js to set up a React App

Looking to showcase both input and output on a single PHP page?

Inexperienced individual asks: 'Is it possible to accomplish this task using Dojo and Ajax?'

Align a child element to the top and another child element to the center within a flexbox column