Question

我正在开发一个在线棒球/垒球记分簿应用程序。当用户更改选定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”]'）。nearest（'table'）; ABtables.each（function（）{$（this）.addClass（'atBat'）;}）;

Answer 1

你可以使用这个jQuery（未经测试，但应该可以工作）：

$(document).ready(function() {          

    $("td input[type=radio]").change(function () {
        var td = $(this).parent();
        td.css("background", "#000");
    }); 
});

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

Answer 2

表格突出显示

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

希望这有帮助，祝你好运！

Answer 3

您可以创建一个执行此操作的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就是你的后代）。

Answer 4

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

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

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

然后清除所选的背景，你想要写一个功能，当用户点击N / A单选按钮时，会执行以下操作：

var $kids = $('#mytableid').children();
$kids.css("background", "#FFF");

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

4 个答案: