[英]Datatables issue: How can I click a checkbox and then highlight the row and vice versa?
我有一個表格行,想要在表格中獲得一個單元格,例如:
<tr>
<td><input type="checkbox"id="delete" value="1"></td>
<td id="rowid">1</td>
<input
<td>2</td>
<td>test</td>
<td>email@gmail.com</td>
<td>1</td>
<td>5</td>
<td>2018-12-31 09:28:29 </td>
</tr>
我有jQuery代碼:
$(document).ready(function() {
var table = $('#clients').DataTable();
$('#clients tbody').on( 'click', 'tr', function () {
$(this).toggleClass('selected');
var _element = $(this).find('input[type=checkbox]');
var checkboxStatus = _element.prop('checked'); //true or false
_element.prop('checked',!checkboxStatus); // If checkbox is
//checked, turn it to uncheck and if is unchecked, check it
} );
} );
$('#button').click( function () {
alert( table.rows('.selected').data().length +' row(s) selected' );
} );
} );
但是現在,當我單擊復選框時,它不會被選中,並且“ checked”類不會添加到復選框輸入中。
我想要如果我單擊整個復選框,那么該復選框將被選中。 現在可以使用,但是當我選中該復選框時,它會突出顯示,但是未選中該復選框。
單擊添加一個事件偵聽器到您的復選框,以阻止事件傳播到該行,然后將類切換到該復選框的最近一行:
$(document).ready(() => { $('#clients tbody').on('click', 'tr', function(e) { $(this).toggleClass('selected'); var _element = $(this).find('input[type=checkbox]'); var checkboxStatus = _element.prop('checked'); _element.prop('checked', !checkboxStatus); }); $('#clients tbody').on('click', 'input[type=checkbox]', function(e) { e.stopPropagation(); $(this).closest('tr').toggleClass('selected'); }); });
.selected { background: red; } table { border-collapse: collapse; border-spacing: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="clients"> <tbody> <tr> <td><input type="checkbox" id="delete" value="1" /></td> <td id="rowid">1</td> <td>2</td> <td>test</td> <td>email@gmail.com</td> <td>1</td> <td>5</td> <td>2018-12-31 09:28:29 </td> </tr> </table>
ps在您粘貼的代碼段中,您input
了一個無效的input
標簽來包裝td
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.