Using jquery to highlight either tr or td

Question

I have two tables:

<table class="highlight_row" id="table1">
  <tr id="first_row">
    <td><input type="checkbox" id="first">first thing</td>
    <td><input type="checkbox" id="second">second thing</td>    
    <td><input type="checkbox" id="third">third thing</td>
  </tr>
</table>

<table class="highlight_td" id="table2">
  <tr id="second_row">
    <td><input type="checkbox" id="fourth">fourth thing</td>
    <td><input type="checkbox" id="fifth">fifth thing</td>    
    <td><input type="checkbox" id="sixth">sixth thing</td>      
  </tr>
</table>

and I'm trying to differentiate them - when I check any field in the first table, I want the whole whole row to be highlighted, and when I check the field in the second table, I want only this td to be highlighted.

I can get the selected rows (using addClass () for the “selected” color), but when I specify the class of the table, I still get the whole row for the second table, when I just need td (I will be better identified by class instead of id account as I add more tables).

Jquery code:

$(".highlight_row").click(function(){
  $(":checkbox").change(function() {
    $(this).closest("tr").toggleClass("selected", this.checked)
  })
});

Answer 1

Something like this violin , maybe?

Your html.

CSS

.highlight { background: #ff0; }

JS:

$("#table1 input[type=checkbox]").on('click', function ()
{
    $(this).parent().parent().toggleClass('highlight');
});

$("#table2 input[type=checkbox]").on('click', function ()
{
    $(this).parent().toggleClass('highlight');
});

Answer 2

, . .

Fiddle: http://jsfiddle.net/24vm61dk/

$(function () {
    // Highlight Row
    $('#table1 input[type="checkbox"]').on('change', function () {
        var anyChecked = false;
        $(this).closest('tr').find('input[type="checkbox"]').each(function () {
            if ($(this).prop('checked')) {
                anyChecked = true;
            }
        });
        if (anyChecked) {
            $(this).closest('tr').addClass('highlight');
        } else {
            $(this).closest('tr').removeClass('highlight');
        }
    });

    // Highlight Cell
    $('#table2 input[type="checkbox"]').on('change', function () {
        var checked = $(this).prop('checked');
        if (checked) {
            $(this).closest('td').addClass('highlight');
        } else {
            $(this).closest('td').removeClass('highlight');
        }
    });
});

Answer 3

.

This will lead to complex events and can lead to serious browser performance problems if the user clicks the table many times.

Simply put, click on the table 4 times and each time the checkbox changes, it calls 4 change handlers

An easy way to highlight rows is to use the number of checked flags per row to determine the state of the class.

$('table.highlight_row input:checkbox').change(function(){
      var $row = $(this).closest('tr'),
          hasChecked = $row.find(':checkbox:checked').length;

      $row.toggleClass('selected', hasChecked);          
});

Cell selection is even easier ... just switch the class to the parent cell based on checked state

$('table.highlight_td input:checkbox').change(function(){
    $(this).parent().toggleClass('selected', this.checked);
});

Answer 4

For strings, use:

.highlight_row .selected {
    background: yellow;
}

to use a cell:

.highlight_td .selected td:nth-child(1) {
    background: yellow;
}