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>

jquery - 突出显示下一行而不是单击的那一行

2 个答案: