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

Question

我正在使用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>

我无法弄清楚如何获取这些内容以更新所选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> 

Answer 2

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

 $("#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> 

Answer 3

$('td').click(function(el){
  // Removes the already selected
  $('.selecetedtd').removeClass('selecetedtd');

  // Selects current row
  $(this).parents('tr')
    .toggleClass('selecetedtd');
});

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

Answer 4

这里。

 $("#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> 

Answer 5

由于已经选择了必需的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> 

Answer 6

如果我理解正确，则可以大大简化此操作：

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

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

Answer 7

使用each()函数

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

    });

这里是工作提琴这里