jquery - 突出显示下一行而不是被点击的行

Question

我想突出显示用户单击它时的表格行。但我不想突出显示被点击的行，而是突出显示被点击的行下面的行。

我有一个突出显示点击行的代码，但我不知道如何突出显示下一行。该页面将随服务器端语言动态生成，因此我希望代码具有一定的灵活性。

 <table class="table" id="traits"> 
       <thead> 
       <tr> 
        <th class="col-md-7">&nbsp;</th> 
        <th class="col-md-1 survey_header">Just like me</th> 
        <th class="col-md-1 survey_header">Very much like me</th> 
        <th class="col-md-1 survey_header">Somewhat like me</th> 
        <th class="col-md-1 survey_header">Not much like me</th> 
        <th class="col-md-2 survey_header">Not at all like me</th> 
       </tr> 
       </thead> 
       <tbody> 
       <tr class=""> 
        <td class="survey_trait"><strong>trait 1</strong></td> 
        <td><input type="radio" name="trait1" value="5"></td> 
        <td><input type="radio" name="trait1" value="4"></td> 
        <td><input type="radio" name="trait1" value="3"></td> 
        <td><input type="radio" name="trait1" value="2"></td> 
        <td><input type="radio" name="trait1" value="1"></td> 
       </tr> 
       <tr class=""> 
        <td class="survey_trait"><strong>trait 2</strong></td> 
        <td><input type="radio" name="trait2" value="5"></td> 
        <td><input type="radio" name="trait2" value="4"></td> 
        <td><input type="radio" name="trait2" value="3"></td> 
        <td><input type="radio" name="trait2" value="2"></td> 
        <td><input type="radio" name="trait2" value="1"></td> 
       </tr> 
       <tr class=""> 
        <td class="survey_trait"><strong>trait 3</strong></td> 
        <td><input type="radio" name="trait3" value="5"></td> 
        <td><input type="radio" name="trait3" value="4"></td> 
        <td><input type="radio" name="trait3" value="3"></td> 
        <td><input type="radio" name="trait3" value="2"></td> 
        <td><input type="radio" name="trait3" value="1"></td> 
       </tr> 
       <tr class=""> 
        <td class="survey_trait"><strong>trait 4</strong></td> 
        <td><input type="radio" name="trait4" value="5"></td> 
        <td><input type="radio" name="trait4" value="4"></td> 
        <td><input type="radio" name="trait4" value="3"></td> 
        <td><input type="radio" name="trait4" value="2"></td> 
        <td><input type="radio" name="trait4" value="1"></td> 
       </tr> 
       </tbody> 
     </table> 



     <script> 
     // When the document is ready 
     $(document).ready(function(){ 

     $("#traits tr").click(function() { 
      var $tr = $(this).closest("tr"); 
      //remove any selected siblings 
      $tr.siblings().removeClass('selected'); 
      //toggle current row 
      $tr.toggleClass('selected'); 
      }) 



     }); 

Answer 1

只需添加的.next（），并更改选择去除类：

$("#traits tr").click(function() { 
    var $tr = $(this); 
    //remove any selected siblings 
    $('#traits tr').removeClass('selected'); 
    //toggle current row 
    $tr.next().toggleClass('selected'); 
}) 

jsFiddle example

Answer 2

在脚本中使用下面的代码：

<script> 
    // When the document is ready 
    $(document).ready(function(){ 
     $("#traits tr").click(function() { 
      //remove all selected classes if any before adding it to the next one 
      $("tr").removeClass('selected'); 
      $(this).next().addClass('selected') 
     }); 
    }); 
</script>