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?

user3310334
– user3310334

2014-06-26 15:18:06 +00:00
Commented Jun 26, 2014 at 15:18 — user3310334
– user3310334, Commented Jun 26, 2014 at 15:18
try .closest('tr'). Also post your rendered HTML

Shaunak D
– Shaunak D

2014-06-26 15:18:48 +00:00
Commented Jun 26, 2014 at 15:18 — Shaunak D
– Shaunak D, Commented Jun 26, 2014 at 15:18
Works fine jsfiddle.net/xLMm2 btw you have two </thead>

Anton
– Anton

2014-06-26 15:19:50 +00:00
Commented Jun 26, 2014 at 15:19 — Anton
– Anton, Commented Jun 26, 2014 at 15:19
I have bootstrap dataTable and don't work fine

ermanno.tedeschi
– ermanno.tedeschi

2014-06-26 16:30:38 +00:00
Commented Jun 26, 2014 at 16:30 — ermanno.tedeschi
– ermanno.tedeschi, Commented Jun 26, 2014 at 16:30

Ehsan Sajjad · Accepted Answer · 2014-06-26 16:54:18Z

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, 2014 at 16:54

answered Jun 26, 2014 at 15:18

Ehsan Sajjad

62.6k16 gold badges112 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ermanno.tedeschi Over a year ago

edited answer don't work does not work either for the odd rows

ermanno.tedeschi Over a year ago

I would that color every selected row!

ermanno.tedeschi Over a year ago

Let us continue this discussion in chat.

dnyaneshwar · Accepted Answer · 2019-06-12 11:24:34Z

1

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

answered Jun 12, 2019 at 11:24

dnyaneshwar

111 bronze badge

Comments

Community · Accepted Answer · 2017-05-23 11:49:36Z

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, 2017 at 11:49

CommunityBot

11 silver badge

answered Jun 26, 2014 at 15:24

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

Collectives™ on Stack Overflow

change row color of jquery datatable if row is checked?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related