我正在开发在线棒球/垒球记分簿应用程序。当用户更改所选 TD 中的其中一个单选按钮的值时,我想直观地更改特定表格单元格(特定 TD)的 CSS。
这是表格的 JPG 格式:http://www.ppgeez.com/images/gt_ab.jpg
有 12 名玩家,每个玩家最多可以有 6 个 AB。下面的代码是一个玩家的单个 At-Bat (AB) 示例,您可以在其中指定玩家对该特定 AB 做了什么。
<td>
<table border=1>
<tr>
<td>
<table border=0 cellspacing=0 cellpadding=0>
<tr><td><input type=radio name=p1o1 value="1B">1B
<td><input type=radio name=p1o1 value="FO">FO
<tr><td><input type=radio name=p1o1 value="2B">2B
<td><input type=radio name=p1o1 value="GO">GO
<tr><td><input type=radio name=p1o1 value="3B">3B
<td><input type=radio name=p1o1 value="FC">FC
<tr><td><input type=radio name=p1o1 value="HR">HR
<td><input type=radio name=p1o1 value="SF">SF
<tr><td><input type=radio name=p1o1 value="BB">BB
<td><input type=radio name=p1o1 value="K" >K
<tr><td><input type=radio name=p1o1 value="RE">RE
<td><input type=radio name=p1o1 value="DP">DP
</table>
<td valign=top align=center>
Run<br><input type=checkbox name=p1run1><br><hr>
RBIs<br><select name=p1rbi1>
<option value=0>0
<option value=1>1
<option value=2>2
<option value=3>3
<option value=4>4
</select><p>
<input type=radio name=p1o1 value="NA" checked>N/A
<td>
</table>
<td>
我想在视觉上突出显示(通过更改 TD 的背景颜色)每个“已完成”的 AB。基本上,当加载表单时,“N/A”单选按钮默认处于选中状态。如果选择了任何其他单选按钮(1B、2B、K 等),则应突出显示该 TD。如果再次选择 N/A,则应取消突出显示。我不确定从哪里开始,任何帮助将不胜感激。谢谢!
更新:最终工作代码 - 我使用了下面的函数,但由于我使用的是嵌套表,所以技巧是使用 eq( x)。
$("td input[type=radio]").change(function () {
function clearTable(){
var table = $(this).parents('table:eq(0)');
$(table).removeClass('selected');
}
$('input[value="NA"]').click(clearTable);
var table = $(this).parents('table:eq(1)');
if (this.value != 'NA') {
table.addClass('selected');
}
});
更新 - 给所有表指定类
//使用 atBat 类设置每个表 ABtables = $('input[type="checkbox"]').closest('table'); ABtables.each(function() { $(this).addClass('atBat'); });
最佳答案
表格单元格高亮
$(function(){
function clearTable(){
$('td.selected', table).removeClass('selected');
}
var table=$('input[value="1B"]').closest('table');
$('input[value="NA"]').click(clearTable);
$(':radio', table).click(function(){
clearTable();
$(this).closest('td').addClass('selected');
});
});
根据评论编辑代码
//assuming you've given the class atBat to any table which might be selected
$('table.atBat').each(function(){
var table=$(this);//cache the current iteration
var childTable=table.find('table:first');
//replace above click handler with this
$(':radio', childTable).click(function(){
if ($(this).val()==='NA'){
table.removeClass('selected');
}
else {
table.addClass('selected');
}
});
})
希望这对您有所帮助,祝您好运!
关于javascript - 如何在使用 JavaScript/JQuery 单击单选按钮时突出显示表格单元格 (TD)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1976070/