我有 html 表格,还有一些带有复选框的行。复选框的选择我想用一些背景颜色突出显示该行。
<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>
最佳答案
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>
关于javascript - 如何更改复选框选择行的背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31828881/