Question

我有一个jquery dataTable（this is 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被添加到所有行！提前谢谢你！我认为问题是bootstrap dataTable。

Answer 1

如果您只希望该行更改选中复选框的颜色，则必须使用 closest() 并使用 change 事件它：

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中，使用 event delegation ，

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

});

如果检查行，更改jquery数据表的行颜色？

3 个答案: