【问题标题】：How to change background color of a row on checkbox selection如何在复选框选择中更改行的背景颜色
【发布时间】：2015-08-05 09:44:45
【问题描述】：
我有 html 表格，也有一些带有复选框的行。 Onselction 复选框我想用一些背景颜色突出显示该行。
<table>
<tr>
<td>
<input type='checkbox' id='chkOrgRow' name='chkOrgRow' onclick='selectOrgChildRec(this)' />
</td>
<td></td>
<td>L</td>
<td>3/14/2015 </td>
<td></td>
<td>78</td>
<td>1412</td>
<td>2</td>
<td>1235</td>
<td>A</td>
<td>R</td>
<td>3/14/2015 12:13:56 PM</td>
</tr>
<tr>
<td>
<input type='checkbox' id='chkOrgRow' name='chkOrgRow' onclick='selectOrgChildRec(this)' />
</td>
<td></td>
<td>L</td>
<td>3/14/2015 </td>
<td></td>
<td>78</td>
<td>1412</td>
<td>2</td>
<td>1235</td>
<td>A</td>
<td>R</td>
<td>3/14/2015 12:13:56 PM</td>
</tr>
<tr>
<td>
<input type='checkbox' id='chkOrgRow' name='chkOrgRow' onclick='selectOrgChildRec(this)' />
</td>
<td></td>
<td>L</td>
<td>3/14/2015 </td>
<td></td>
<td>78</td>
<td>1412</td>
<td>2</td>
<td>1235</td>
<td>A</td>
<td>R</td>
<td>3/14/2015 12:13:56 PM</td>
</tr>
</table>
【问题讨论】：
标签：
javascript
jquery
asp.net
【解决方案1】：
-
id 应该是唯一的
- 不要使用内联事件处理程序
- 不要使用内联样式，使用 CSS 类
$('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>
<input type='checkbox' name='chkOrgRow' />
</td>
<td>L</td>
<td>3/14/2015</td>
<td>78</td>
<td>1412</td>
<td>2</td>
<td>1235</td>
<td>A</td>
<td>R</td>
<td>3/14/2015 12:13:56 PM</td>
</tr>
<tr>
<td>
<input type='checkbox' name='chkOrgRow' />
</td>
<td>L</td>
<td>3/14/2015</td>
<td>78</td>
<td>1412</td>
<td>2</td>
<td>1235</td>
<td>A</td>
<td>R</td>
<td>3/14/2015 12:13:56 PM</td>
</tr>
<tr>
<td>
<input type='checkbox' name='chkOrgRow' />
</td>
<td>L</td>
<td>3/14/2015</td>
<td>78</td>
<td>1412</td>
<td>2</td>
<td>1235</td>
<td>A</td>
<td>R</td>
<td>3/14/2015 12:13:56 PM</td>
</tr>
</table>
【解决方案2】：
$("[name='chkOrgRow']").change(function() {
$(this).closest('tr').toggleClass('ColorChange');
});
.ColorChange{
background-color: #CCFFCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table>
<tr>
<td>
<input type='checkbox' name='chkOrgRow' />
</td>
<td>L</td>
<td>3/14/2015</td>
<td>78</td>
<td>1412</td>
<td>2</td>
<td>1235</td>
<td>A</td>
<td>R</td>
<td>3/14/2015 12:13:56 PM</td>
</tr>
<tr>
<td>
<input type='checkbox' name='chkOrgRow' />
</td>
<td>L</td>
<td>3/14/2015</td>
<td>78</td>
<td>1412</td>
<td>2</td>
<td>1235</td>
<td>A</td>
<td>R</td>
<td>3/14/2015 12:13:56 PM</td>
</tr>
<tr>
<td>
<input type='checkbox' name='chkOrgRow' />
</td>
<td>L</td>
<td>3/14/2015</td>
<td>78</td>
<td>1412</td>
<td>2</td>
<td>1235</td>
<td>A</td>
<td>R</td>
<td>3/14/2015 12:13:56 PM</td>
</tr>
</table>
【解决方案3】：
你需要创建一个函数来检查复选框是否被选中，然后如果它被选中则更改它的颜色。
function selectOrgChildRec(checkBox){
if(checkBox.checked==true){
checkbox.parentNode.background='red';
}
}
【解决方案4】：
如果您使用的是inline 函数，那么您可以只用一行将css 类切换如下：
function selectOrgChildRec(ctrl){
$(ctrl).closest('tr').toggleClass('active');
}
DEMO
【解决方案5】：
您有重复的元素 ID。 ID 应该始终是唯一的。您可以使用相同的类名 tham ID。我还建议您使用 jquery 而不是内联事件来附加事件：
$('input[name="chkOrgRow"]').on('change', function() {
$(this).closest('tr').css('background-color', $(this).is(':checked') ? 'yellow': '');
});
Demo
【解决方案6】：
$("input[type=checkbox]").on('change',function(){
if($(this).prop('checked'))
{
$(this).parent().parent().css('background-color', '#a52a2a');
}
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<table cellpadding="15em" cellspacing="5em" border="2px">
<tr>
<td><input type="checkbox"></td>
<td>abc</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>dbc</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>pqr</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>lbc</td>
<td>4</td>
<td>4</td>
</tr>
</table>
</body>
</html>