如果选中行，更改jQuery数据表的行颜色？

Question

我在每行中都有一个jquery dataTable（ 这是link ）有一个复选框！ 我希望当选中此复选框时，行颜色会发生变化！

我以这种方式尝试：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代码：

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

});

这段代码仅对索引为奇数的行上色！如果我从浏览器中检查该元素的background-color: yellow ，则将background-color: yellow添加到所有行中！ 提前帮助我，谢谢！ 我认为问题是引导数据表。

Answer 1

如果只希望该行更改其复选框已选中的颜色，则必须使用closest（）并对其进行更改事件：

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');
    });

Answer 2

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

Answer 3

使用closest()查找父<tr>

您的元素稍后会添加到DOM中，请使用事件委托 ，

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

});