如何在选择 TR 时向 TR 中的每个 TD 添加类 - How to add a class to each TD in a TR when the TR gets selected

我正在使用HTML，PHP和JS来创建报告网站。我有几张桌子要展示。在每个表中都有多行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.

不要选择最近的表，而是选择最接近的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>

您可以在一个脚本中轻松完成此操作：

$("#UpdateTable tr").click(function() {
   $(this).toggleClass('selected').siblings().removeClass('selected').children().removeClass('selectedtd');
   $(this).children().toggleClass('selectedtd');
});

table {
  border-left: 1px solid grey;
  border-top: 1px solid grey;
  }
td {
  padding: 5px;
  border-right: 1px solid grey;
  border-bottom: 1px solid grey;
  }
tr.selected {
  color: white;
  }
td.selectedtd {
  background-color: green;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="UpdateTable">
  <tr>
    <td>1.1</td>    
    <td>1.2</td>    
    <td>1.3</td>
  </tr>
  <tr>
    <td>2.1</td>    
    <td>2.2</td>    
    <td>2.3</td>
  </tr>
    <tr>
    <td>3.1</td>    
    <td>3.2</td>    
    <td>3.3</td>
  </tr>
</table>

$('td').click(function(el){
  // Removes the already selected
  $('.selecetedtd').removeClass('selecetedtd');
  // Selects current row
  $(this).parents('tr')
    .toggleClass('selecetedtd');
});

您可以在此处查看正在使用的示例。

在这里。

$("#UpdateTable tr").click(function ()
{              
    $(this).find('td').each(function(){
      $(this).addClass('selectedtd');
    });
  
    $(this).siblings('tr').each(function(){
      $(this).find('td').removeClass('selectedtd');
    });
    
});

.selectedtd{
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="UpdateTable">
  <tr>
    <td>TD 1</td>
    <td>TD 2</td>
    <td>TD 3</td>
  </tr>
  <tr>
    <td>TD 4</td>
    <td>TD 5</td>
    <td>TD 6</td>
  </tr>
  <tr>
    <td>TD 7</td>
    <td>TD 8</td>
    <td>TD 9</td>
  </tr>
</div>

使用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').on('click', 'td', function() {
    $(this).parent().toggleClass('selected').children().toggleClass('selectedtd');
});

https://jsfiddle.net/vr30z7qx/1/

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

尝试下面的代码。

<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>