我有一个包含多行的 HTML 表格。在每一行的第一列中有一个问题(文本),在第二列、第三列和第四列中分别有 3 个用于回答是、否或不适用的单选按钮。
我希望能够在选中同一行中的任一单选按钮时更改第一列中文本的字体颜色。
这里Stackoverflow的其他问题是指更改单选按钮所在单元格的背景颜色,但在这种情况下,我需要修改同一行中第一列的属性。
PS:您可以在 this JSBin fiddle 中找到要玩的虚拟代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table border=1>
<tr>
<th>Question</th>
<th>Yes</th>
<th>No</th>
<th>N/A</th>
</tr>
<tr>
<td>Are you a student?</td>
<td><input type="radio" name="student"></td>
<td><input type="radio" name="student"></td>
<td><input type="radio" name="student"></td>
</tr>
</table>
</body>
</html>
我们非常欢迎任何提示或建议。提前致谢!
最佳答案
您可以设置一个事件监听器。
如果需要,您还可以获取所选值以根据该值设置颜色。
$("input[name='student']").change(function(){
console.log($(this).val());
$(this).closest('tr').children('td').first().css('color', '#455434');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table border=1>
<tr>
<th>Question</th>
<th>Yes</th>
<th>No</th>
<th>N/A</th>
</tr>
<tr>
<td>Are you a student?</td>
<td><input value="1" type="radio" name="student"></td>
<td><input value="2" type="radio" name="student"></td>
<td><input value="3" type="radio" name="student"></td>
</tr>
</table>
关于javascript - 在同一行上选择单选按钮时更改表格单元格中的字体颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42253645/