[英]Change background color of a row on the fly when checkbox is selected by default
我有一個用php動態生成的表。 如果選中了最后一個復選框(在名為“ OK”的列中),我需要更改表格整行的顏色。 我在這里的其他文章中找到了此代碼,並且工作正常,除了顏色切換僅在單擊時才起作用,而默認情況下未選中則不起作用。
據我了解,問題在於javascript代碼正在調用“復選框更改時”功能,並且在加載頁面時沒有任何變化。 但是我不知道如何在頁面加載時修改腳本以使其也起作用:(
$('input[name="chkOrgRow"]').on('change', function() { $(this).closest('tr').toggleClass('yellow', $(this).is(':checked')); });
.yellow { background-color: yellow; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <table> <tr> <td> C1 </td> <td> C2</td> <td> C3 </td> <td> C4 </td> <td> OK </td> <td> </td> </tr> <tr> <td><input type='checkbox' name='whatever' /></td> <td>data</td> <td>data</td> <td>data</td> <td><input type='checkbox' name='chkOrgRow' /></td> <td> </td> </tr> <tr> <td>data</td> <td><input type='checkbox' name='whatever' /></td> <td>data</td> <td>data</td> <td><input type='checkbox' name='chkOrgRow' checked="checked" /></td> <td><--- This must be highlighted because the OK checkbox is enabled</td> </tr> <tr> <td>data</td> <td>data</td> <td><input type='checkbox' name='whatever' /></td> <td>data</td> <td><input type='checkbox' name='chkOrgRow' /></td> <td> </td> </tr> </table>
獲取jQuery以在頁面加載時運行該函數。
$(function() {
$('input[name="chkOrgRow"]:checked').closest('tr').addClass('yellow');
});
這可以使用.closest()
和.next()
jQuery函數來實現。
$('input[name="chkOrgRow"]').on('change', function() {
$(this)
.closest('td') // find the closest td ( parent of input ) , you can also use .parent() for this
.next('td') // find the next occuring td element
.toggleClass('yellow', $(this).is(':checked')); // toggles the class 'Yellow' if checked
});
示例: http : //jsfiddle.net/r6okrvm1/
更新:為所選inputs
設置頁面加載時的類'Yellow'
$().ready(function(){
$('input[name="chkOrgRow"]:checked').closest('td').next('td').toggleClass('yellow');
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.