我有一个用PHP动态生成的表。如果选中最后一个复选框,则需要更改表格整行的颜色(在名为“OK”的列中)。我在这里找到了其他帖子中的代码并且工作正常,只是当你点击它时颜色切换才起作用,而不是在默认情况下检查时。
据我所知,问题是javascript代码正在调用“on checkbox changed”上的函数,并且在加载页面时没有任何变化。但是我不知道如何修改脚本以使其在页面加载时也能正常工作:(
$('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>
答案 0 :(得分:1)
获取jQuery以运行函数on page load。
$(function() {
$('input[name="chkOrgRow"]:checked').closest('tr').addClass('yellow');
});
答案 1 :(得分:1)
这可以使用.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/
更新:要为选定的'Yellow'
的页面加载设置课程inputs
$().ready(function(){
$('input[name="chkOrgRow"]:checked').closest('td').next('td').toggleClass('yellow');
});