javascript - 如何在选择 TR 时向 TR 中的每个 TD 添加类

Question

我正在使用 HTML、PHP 和 JS 创建一个报告网站。我有几张 table 正在展示。在每个表中有多个行 tr 和许多列 td。我对其进行了设置，以便当我单击其中一个 tr 时，它会获得 selected 类。我还设置了它，以便单击的 td 获得 selectedtd 类。我想要的是让 tr 中的所有 td 被选中以具有类 selectedtd 然后在tr 未被选中。到目前为止，这是我得到的:

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

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

此脚本在单击时向单个 td 添加或删除类 selectedtd。

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

我无法弄清楚如何让这些更新所选 tr 中的所有 td 以拥有 selectedtd 类。

Answer 1

不是选择最近的表，而是选择最近的 tr 并做以下事情:

$(document).ready(function () {
  $('td').click(function () {
    // first remove all classes
    $('td, tr').removeClass('selectedtd selected active');
    
    // $(this) shows to currently clicked TD
    $(this).closest('tr').addClass('active');
    $(this).closest('tr').find('td').addClass('selectedtd');
    $(this).addClass('selected');
  });
})

td {
  color: #999;
  padding: 5px 10px;
  cursor: pointer;
}

td:hover {
  background-color: #ddd;
  }

tr {
  border-bottom: 1px solid transparent;
}
.selectedtd {
  color: #000;
}
.selected {
  color: #0d0;
}
.active {
  border-bottom-color: #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>