当使用JavaScript/JQuery单击单选按钮时，如何突出显示表格单元格（TD）？

我正在开发一个在线棒球/垒球记分簿应用程序。我想在用户更改选定TD内的一个单选按钮的值时，直观地更改特定表格单元格（特定TD）的CSS

以下是该表的JPG格式：

有12名球员，每个球员最多可以有6个AB。下面的代码是一个球员单打（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>

更新-为所有表格指定特定类别

//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');
    }
   });
})

//用atBat类设置每个表 ABtables=$（'input[type=“checkbox”]”）。最近的（'table'）；

---

ABtables.each（function（）{$（this.addClass（'atBat'）；}）

您可以创建一个javascript函数来实现这一点。首先，检查选择哪一个，然后（在循环中）获取TD。一旦你有了这两样东西，剩下的就很容易了

以下是一些让您开始学习的代码：

首先，您需要向指向此函数的每个单选按钮添加一个事件处理程序-

function handleRadioClick(e) {
    var ev = e || window.event;

    //ev.srcElement will give you the radio button clicked
    //This code will get you the TD
    var obj = ev.srcElement;
    while (obj && obj.parentElement && obj.tagName.toLowerCase() !== 'td') {
        obj = obj.parentElement
    }

    //at this point, obj should be the TD
}

我不是为你做这一切，但这应该让你开始

编辑：

---

我刚刚意识到，你有单选按钮在他们自己的TD在一张桌子里面，在你要找的TD里面。您必须修改我的代码以获取该表，然后获取其父表（您之后的TD）。

首先，您的许多标记上似乎缺少结束标记。特别是关闭td和选项标签

使用jquery，您可以在选择时更改td的背景色：

<input type="radio" name="p1o1" value="1B" onclick="$(this).parent().css('background', 'yellow');" />

---

您可以只使用这个jQuery（未经测试，但应该可以使用）：

另外，正如前面提到的其他答案之一，您需要关闭td和其他html标记。

表格单元格高亮显示

$(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');
    }
   });
})

---

希望这有帮助，祝你好运

这基本上就是我使用的解决方案。这段代码所做的一件事是，当我希望从特定表中删除类时，将其从以前被hilighted的所有元素中删除。经过几次编辑，效果非常好。啊！在IE中不起作用！！！看起来有点像eq。。。我用“工作”代码更新了原来的帖子：）它只在FF中工作。。。在IE中，我可以单击单选按钮，即不，什么也没发生。如果我单击第二个单选按钮！=NA，然后使用addClass正确高亮显示。clearTable/removeClass函数似乎可以在所有浏览器中工作，只要有东西实际应用了addClass，但是需要多次单击才能应用它。任何想法都很好。谢谢

clearTable

函数应该在任何单击/更改处理程序之外定义。现在设置代码的方式是定义函数并绑定

change

func中的单击。这些应该分开。i、 e.设置表格变量->然后绑定NA单击->然后绑定更改字段。您还应该在处理程序中使用不同的变量名（而不是

表

）。如果您有任何问题，请告诉我，我会更新我的帖子。嗯……也许您可以直接查看测试页面：基本上，有一个主表，然后在每个表中TD包含两个嵌套表。单选框本身在一个表中，复选框和N/a单选按钮在另一个表中。这就是为什么，当我关闭高亮显示时，我必须找到第0个父项，而不是像我打开它那样的第一个父项。过来看。。。如果你能更新你的代码，让我看看它是如何完成的，那就太好了。谢谢

$(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');
    }
   });
})