選擇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");    
        }
        ); 

    });

這里是工作提琴這里