change row color of jquery datatable if row is checked?

Question

I have a jquery dataTable (this is link) in each row there are a checkbox! I whish that when the checkbox is checked the row color change!

I try in this way: tableCode;

<table id="tabellaOrdinaFarmaci" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Codice Farmaco</th>
            <th>Nome Farmaco</th>
            <th>Quantità</th>
            <th>Quantità di alert</th>
            <th>Stato</th>
            <th></th>
        </tr>
    </thead>
</thead>
<tbody>
    <?php foreach ($query as $row): ?>
        <tr> 
            <td><?php echo $row->aic; ?></td>
            <td><?php echo $row->denominazione ?></td>
            <td><?php echo $row->quantita; ?></td>
            <td><?php echo $row->alert; ?></td>
            <td><?php echo $row->stato; ?></td>
            <td>  <input type="checkbox" name="radiog_lite" id="<?php echo $row->aic; ?>" class="css-checkbox" />
                <label for="<?php echo $row->aic; ?>" class="css-label"></label>
            </td>
        </tr>
    <?php endforeach; ?>
</tbody>

jQuery code:

 jQuery(document).ready(function() {
    jQuery('input').click(function() {
        jQuery(this).parents("tr").css('background-color', 'yellow');
    });

});

This code color only the rows that have an index odd!If I inspect the element from the browser background-color: yellow is added to all rows! Help me thanks in advance! I think that the problem is bootstrap dataTable.

try singular parent instead of parents maybe? – theonlygusti Jun 26 '14 at 15:18 — theonlygusti, Jun 26 '14 at 15:18
try `.closest('tr')`. Also post your rendered HTML – Shaunak D Jun 26 '14 at 15:18 — Shaunak D, Jun 26 '14 at 15:18
Works fine http://jsfiddle.net/xLMm2/ btw you have two `` – Anton Jun 26 '14 at 15:19 — Anton, Jun 26 '14 at 15:19
I have bootstrap dataTable and don't work fine – ermanno.tedeschi Jun 26 '14 at 16:30 — ermanno.tedeschi, Jun 26 '14 at 16:30

Ehsan Sajjad · Accepted Answer · 2014-06-26T16:54:18.160

1

if you want only that row to change color for which checkbox is checked then you have to use closest() and use change event for it:

jQuery('#tabellaOrdinaFarmaci input:checkbox').change(function() {
       if(this.checked)  // check if checkbox checked then change color of row
          jQuery(this).closest("tr").css('background-color', 'yellow !important');
    });

edited Jun 26 '14 at 16:54

answered Jun 26 '14 at 15:18

Ehsan Sajjad

59,154
14
90
146

edited answer don't work does not work either for the odd rows – ermanno.tedeschi Jun 26 '14 at 17:03
I would that color every selected row! – ermanno.tedeschi Jun 26 '14 at 17:07
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/56365/discussion-between-ermanno-tedeschi-and-ehsan-sajjad). – ermanno.tedeschi Jun 26 '14 at 17:08

score 1 · Answer 2 · answered Jun 12 '19 at 11:24

jQuery('#tabellaOrdinaFarmaci input:checkbox').change(function() {

       if(this.checked)  // check if checkbox checked then change color of row

          jQuery(this).closest("tr").css('background-color', 'yellow !important');

    });

convert angulerjs

score 0 · Answer 3 · edited May 23 '17 at 11:49

0

Use closest() to find the parent <tr>

Your elements are getting appended later to the DOM, use event delegation,

jQuery(document).ready(function() {
    jQuery(document).on('click','input',function() {
        jQuery(this).closest("tr").css('background-color', 'yellow');
    });

});

edited May 23 '17 at 11:49

Community

1
1

answered Jun 26 '14 at 15:24

Shaunak D

19,751
9
41
72

change row color of jquery datatable if row is checked?

3 Answers3