CODEWITHSUNDEEP
javascriptjquerycss
lacoder
lacoder

Reputation: 1323

Highlight only the first row of a table where checkbox is checked

I previously worked on a page using jquery where I needed to select checkboxes in a table based on some data attributes, I.e any row where a checkbox is selected will lead to all the other checkboxes being disabled if their data attributes do not match the given criteria.

There is now another requirement to the above case where I'd like to only highlight the first row of the first checkbox that is checked at any given time.

Here is the jquery snippet

$(function() {
  $(".my-check").each(function(e, elem) {
    $(elem).on("change", function() {
      var num = $(this).data("number");
      var co = $(this).data("code");
      if ($(this).eq(0).is(':checked')) {
        $(this).closest('.row').addClass('highlight');
        $('.my-check:not([data-number=' + num + '])').attr('disabled', true);
        $('.my-check:not([data-code=' + co + '])').attr('disabled', true);
      } else {
        if (!$('.my-check[data-number=' + num + ']:checked').length) {
            $(this).closest('.row').removeClass('highlight');
          $(".my-check").not($(this)).attr('disabled', false);
        }
      }
    });
  })
});

And the sample working code Here: Sample code here

The highlight is working (Well almost) but not quite so . I'd like to be able to only highlight one row at a time , where a checkbox is checked

Upvotes: 0

Views: 559

Answers (2)

Peter Seliger
Peter Seliger

Reputation: 13356

function handleMyCheckChange(evt) {
  const methodName = this.checked && 'addClass' || 'removeClass';
  $(this).closest('tr')[methodName]('selected-row');
}
function initMyCheckChangeHandling(idx, elm) {
  $(elm).on('change', handleMyCheckChange);
}
$(".my-check").each(initMyCheckChangeHandling);
.selected-row {
  background-color: red;
}
.selected-row ~ .selected-row {
    background-color: initial;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    <th>Status</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
    <td><input type="checkbox" class="my-check" data-number="7867" data-code="CB45" /></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    <td><input type="checkbox" class="my-check" data-number="3307" data-code="HUNT1" /></td>
  </tr>
  <tr>
    <td>Harry</td>
    <td>Green</td>
    <td>50</td>
    <td><input type="checkbox" class="my-check" data-number="7867" data-code="CB45" /></td>
  </tr>
  <tr>
    <td>Mark</td>
    <td>Twain</td>
    <td>94</td>
    <td><input type="checkbox" class="my-check" data-number="5645" data-code="KLY" /></td>
  </tr>
</table>

Upvotes: 0

Crezzur
Crezzur

Reputation: 1481

You are using a wrong closest() selector. .row is for searching a class name. You have to search for a element. Adding color to the <tr> element will color the selected row.

More information about the closest() function can be found here.

Example

$(".my-check").each(function(e, elem) {
  $(elem).on("change", function() {
    var sel = $(this);
    var num = sel.data("number");
    var co = sel.data("code");
    if (sel.eq(0).is(":checked")) {
      if (!$(".highlight")[0]) { // IF CLASS IS NOT FOUND --> Add class
        sel.closest("tr").addClass("highlight");
      }
      $(".my-check:not([data-number=" + num + "])").prop("disabled", true);
      $(".my-check:not([data-code=" + co + "])").prop("disabled", true);
    } else {
      if (!$(".my-check[data-number=" + num + "]:checked").length) {
        $('table tr').removeClass("highlight");
        $(".my-check").not(sel).prop("disabled", false);
      }
    }
  });
});
.highlight {
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    <th>Status</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
    <td><input type="checkbox" class="my-check" data-number="7867" data-code="CB45" /></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    <td><input type="checkbox" class="my-check" data-number="3307" data-code="HUNT1" /></td>
  </tr>
  <tr>
    <td>Harry</td>
    <td>Green</td>
    <td>50</td>
    <td><input type="checkbox" class="my-check" data-number="7867" data-code="CB45" /></td>
  </tr>
  <tr>
    <td>Mark</td>
    <td>Twain</td>
    <td>94</td>
    <td><input type="checkbox" class="my-check" data-number="5645" data-code="KLY" /></td>
  </tr>
</table>

Upvotes: 1

Related Questions