Ryan Ryan - 3 months ago 19
PHP Question

how to change table row class when checked based on same value attributes

We have multiple line items on some orders and others that only have one. I only want one checkbox per similar order number. When the box is checked I need to highlight every line that has that order number. Of course the order number will always be different. What I am doing is putting the order number in the td as a value for every similar row. The order number is also a value of the checkbox input. So if I checked the 1000002 check box it would highlight both rows that same order number. I am new to jQuery and I found some jquery that highlight the closest column, but I know this will have to be changed alot to get it to do what I need it too.

<tr class="danger" value="1000005">
<td><input name="checkOrder[1000005][ord_no]" value=" 1000005" type="checkbox" class="checkOrder" id="checkOrder"></td>

<td> 1000005 </td>
<td> 65734COM </td>
<td> dummy product1</td>
<td>$565.00</td>

<td>$0 </td>
<td>$565</td></tr>


<tr class="danger" value="1000002">
<td><input name="checkOrder[1000002][ord_no]" value=" 1000002" type="checkbox" class="checkOrder" id="checkOrder"></td>

<td> 1000002 </td>
<td> 54354534 </td>
<td> dummy product2</td>
<td>$900.00</td>

<td>$1080.46 </td>
<td>$-180.46</td></tr>

<tr class="danger" value="1000002">
<td></td>
<td> 1000002</td>
<td> 087373 </td>
<td> dummy product3</td>
<td>$750.00</td>
<td>$919.00 </td>
<td>$-169</td></tr>


My jQuery

$("input[type='checkbox']").change(function(e) {
var myName = $(this).attr("value");
if($(this).is(":checked")){
if(myName == )
$(this).closest('tr').addClass("primary");
$(this).closest('tr').removeClass("danger");

}
else{
$(this).closest('tr').removeClass("primary");
$(this).closest('tr').addClass("danger");

}
});

Answer

You should be looking for the closest tr (row) , not the closest td (column).

Use $(this).closest('tr').addClass("highlight");

Also, you need to find first the rows that you need to change:

Get the ordernumber

var ordernum = $(this).closest('tr').find('td:nth-child(2)').attr('value');

Then find all rows in the table that have the same ordernumber

$('table td[value="' + ordernum + '"]').each(function(i, v) {
    $(v).closest('tr').addClass('danger');
});

$(function() {

  $('.checkOrder').click(function() {
    var ordernum = $(this).closest('tr').find('td:nth-child(2)').attr('value');
    if ($(this).is(':checked')) {
      $('table td[value="' + ordernum + '"]').each(function(i, v) {
        $(v).closest('tr').addClass('danger');
      });
    } else {
      $('table td[value="' + ordernum + '"]').each(function(i, v) {
        $(v).closest('tr').removeClass('danger');
      });
    }
  });

});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <tbody>
    <tr>
      <td>
        <input name="checkOrder[1000005][ord_no]" value=" 1000005" type="checkbox" class="checkOrder" id="checkOrder">
      </td>
      <td value="1000005">1000005</td>
      <td>65734COM</td>
      <td>dummy product1</td>
      <td>$565.00</td>

      <td>$0</td>
      <td>$565</td>
    </tr>
    <tr>
      <td>
        <input name="checkOrder[1000002][ord_no]" value=" 1000002" type="checkbox" class="checkOrder" id="checkOrder">
      </td>
      <td value="1000002">1000002</td>
      <td>54354534</td>
      <td>dummy product2</td>
      <td>$900.00</td>
      <td>$1080.46</td>
      <td>$-180.46</td>
    </tr>
    <tr>
      <td value="1000002"></td>
      <td>1000002</td>
      <td>087373</td>
      <td>dummy product3</td>
      <td>$750.00</td>
      <td>$919.00</td>
      <td>$-169</td>
    </tr>
  </tbody>
</table>

Comments