Javascript 选择TR时，如何向TR中的每个TD添加类

我正在使用HTML、PHP和JS创建一个报告网站。我有几张桌子要展示。在每个表中都有多行

tr

和多列

td

。我对它进行了设置，这样当我点击其中一个

tr

时，它就会得到选中的

类。我还设置了它，以便在中单击的
td
获得
selectedtd
类。我想要的是选择
tr
中的所有
td
，选择类
td
，然后在取消选择
tr
时删除该类。以下是到目前为止我得到的信息：

单击
tr
中的任何位置时，此脚本将更新
tr
以拥有该类或将其删除

<script type='text/javascript'>//<![CDATA[
    $("#UpdateTable tr").click(function ()
    {
        $(this).toggleClass('selected').siblings().removeClass('selected');
    });
    //]]>
</script>

<script type='text/javascript'>//<![CDATA[
    $("#UpdateTable td").click(function ()
    {
        $(this).closest('table').find('td').not(this).removeClass('selectedtd');
        $(this).toggleClass('selectedtd')
    });
    //]]>
</script>

我不知道如何让它们更新所选
tr
中的所有
td
，以便根据需要选择类
如果
tr
已被选中，只需使用选择所选
tr
中的
td

试试下面的代码

<script type='text/javascript'>
  //< ![CDATA[
  $(function() {
    $("#UpdateTable tr").click(function() {
      $(this).toggleClass('selected').find('td').toggleClass('selectedtd');
    });
  });
  //]]>
</script>


//< ![CDATA[
$（函数（）{
$（“#UpdateTable tr”）。单击（函数（）{
$（this）.toggleClass（'selected'）.find（'td'）.toggleClass（'selectedtd'）；
});
});
//]]>
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
根据需要
tr
已选择，只需使用选择的
tr
内的
td

试试下面的代码

<script type='text/javascript'>
  //< ![CDATA[
  $(function() {
    $("#UpdateTable tr").click(function() {
      $(this).toggleClass('selected').find('td').toggleClass('selectedtd');
    });
  });
  //]]>
</script>


//< ![CDATA[
$（函数（）{
$（“#UpdateTable tr”）。单击（函数（）{
$（this）.toggleClass（'selected'）.find（'td'）.toggleClass（'selectedtd'）；
});
});
//]]>
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
如果我理解正确，您可以大大简化：

$('#UpdateTable').on('click', 'td', function() {
    $(this).parent().toggleClass('selected').children().toggleClass('selectedtd');
});

如果我对你的理解正确，你可以大大简化这一点：

$('#UpdateTable').on('click', 'td', function() {
    $(this).parent().toggleClass('selected').children().toggleClass('selectedtd');
});

只需一个脚本即可轻松完成此操作：


$（“#UpdateTable tr”）。单击（函数（）{
$（this）.toggleClass（'selected'）.sides（）.removeClass（'selected'）.children（）.removeClass（'selectedtd'）；
$（this.children（）.toggleClass（'selectedtd'）；
});
表格{
左边框：1px纯色灰色；
边框顶部：1px纯色灰色；
}
运输署{
填充物：5px；
右边框：1px纯色灰色；
边框底部：1px纯色灰色；
}
选定{
颜色：白色；
}
td.selectedtd{
背景颜色：绿色；
}

1.1
1.2
1.3
2.1
2.2
2.3
3.1
3.2
3.3
只需一个脚本即可轻松完成此操作：


$（“#UpdateTable tr”）。单击（函数（）{
$（this）.toggleClass（'selected'）.sides（）.removeClass（'selected'）.children（）.removeClass（'selectedtd'）；
$（this.children（）.toggleClass（'selectedtd'）；
});
表格{
左边框：1px纯色灰色；
边框顶部：1px纯色灰色；
}
运输署{
填充物：5px；
右边框：1px纯色灰色；
边框底部：1px纯色灰色；
}
选定{
颜色：白色；
}
td.selectedtd{
背景颜色：绿色；
}

1.1
1.2
1.3
2.1
2.2
2.3
3.1
3.2
3.3
不要选择最近的表，而是选择最近的
tr
，然后执行以下操作：


$（文档）.ready（函数（）{
$（'td'）。单击（函数（）{
//首先删除所有类
$（'td，tr'）.removeClass（'selectedtd selected active'）；
//$（此）显示当前单击的TD
$（this）.closest（'tr'）.addClass（'active'）；
$（this）.closest（'tr'）.find（'td'）.addClass（'selectedtd'）；
$（this.addClass（'selected'）；
});
})
td{
颜色：#999；
填充物：5px10px；
光标：指针；
}
td:悬停{
背景色：#ddd；
}
tr{
边框底部：1px实心透明；
}
.selectedtd{
颜色：#000；
}
.选定{
颜色：#0d0；
}
.主动{
边框底色：#ddd；
}

1.
2.
3.
1.
2.
3.
1.
2.
3.
1.
2.
3.
不要选择最近的表，而是选择最近的
tr
，然后执行以下操作：


$（文档）.ready（函数（）{
$（'td'）。单击（函数（）{
//首先删除所有类
$（'td，tr'）.removeClass（'selectedtd selected active'）；
//$（此）显示当前单击的TD
$（this）.closest（'tr'）.addClass（'active'）；
$（this）.closest（'tr'）.find（'td'）.addClass（'selectedtd'）；
$（this.addClass（'selected'）；
});
})
td{
颜色：#999；
填充物：5px10px；
光标：指针；
}
td:悬停{
背景色：#ddd；
}
tr{
边框底部：1px实心透明；
}
.selectedtd{
颜色：#000；
}
.选定{
颜色：#0d0；
}
.主动{
边框底色：#ddd；
}

1.
2.
3.
1.
2.
3.
1.
2.
3.
1.
2.
3.
使用
each（）
函数

$(".use-address").click(function() {
        var $row = $(this).closest("tr");    // Find the row
        $row.find("td").each(function()
        {
                $(this).text("fffff");    
          $(this).addClass("fffff");    
        }
        ); 

    });

这是工作小提琴
使用
each（）
函数

$(".use-address").click(function() {
        var $row = $(this).closest("tr");    // Find the row
        $row.find("td").each(function()
        {
                $(this).text("fffff");    
          $(this).addClass("fffff");    
        }
        ); 

    });

这是工作小提琴

您可以看到正在使用的示例

您可以在这里看到正在使用的示例。


$（“#UpdateTable tr”）。单击（函数（）
{              
$（this）.find（'td'）.each（function（）{
$（this.addClass（'selectedtd'）；
});
$（this）.this（'tr'）。each（function（）{
$（this.find（'td'）.removeClass（'selectedtd'）；
});
});
。选择{
颜色：蓝色；
}

TD 1
TD 2
TD 3
TD 4
TD 5
TD 6
TD 7
TD 8
TD 9
这里


$（“#UpdateTable tr”）。单击（函数（）
{              
$（this.find（'td'