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

Mike 发表于 Dev

麦克风

我正在使用HTML，PHP和JS创建报告网站。我有几个要显示的表。在每个表中都有多行tr和多列td。我进行了设置，因此当我单击其中一个时，tr它会得到的类selected。我也有它的设置，以便td单击即可获得的类selectedtd。我想是有所有td在tr那个被选定为具有类selectedtd，然后有一个类中删除时tr未选择。到目前为止，这是我得到的：

该脚本更新，tr使其具有该类，或者在tr单击的任何位置时将其删除。

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

单击该脚本后，该类会selectedtd向个人添加或删除该类td。

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

我不知道如何获取这些以更新td所选中的所有tr类以具有该类selectedtd。

普加兹

根据需要tr已选择，只需使用.find()即可td在选定的中选择tr。

尝试下面的代码。

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

完整的例子：

td.selectedtd {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

<table id="UpdateTable">
  <tr>
    <td>Some text</td>
    <td>Some text</td>
    <td>Some text</td>
  </tr>
  <tr>
    <td>Some text</td>
    <td>Some text</td>
    <td>Some text</td>
  </tr>
  <tr>
    <td>Some text</td>
    <td>Some text</td>
    <td>Some text</td>
  </tr>
  <tr>
    <td>Some text</td>
    <td>Some text</td>
    <td>Some text</td>
  </tr>
</table>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。