jQuery.click()函数如何区分table行

Question

我正在尝试在 UP 和 DN 上使用 .click 功能，这样当我向上按时，.over class 会移到上一行，当我按 DN 时，.over class 移到下一行。我的问题是我不知道如何在点击函数中指定一个 for 循环并能够调用每一行。我所知道的是如何使用 div ids.

指定点击功能

<html>
 <style>
  .highlight{
   background-color: pink;
  }
  
  }
  .odd{
   background-color: lightgrey;
  }
  .even{
   background-color: gray;
  }
  .over{
   background-color: red;
 </style>
 <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
  </script>
  <script>
   $(document).ready(function(){ 
   $('.c').addClass('highlight');
   $('.a').addClass('odd');
   $('.b').addClass('even');
 });
   
  </script>
  
 </head>
 <body>
<h2>2: Zebra Striping Demo</h2>
<table id = "myTable" width="200" border="1">
  <caption><a id = "up" href="#">UP</a> Zebra Striping Demo <a id = "down" href="#">DN</a></caption>
  <tr class = "a"><td>January</td> <td>February</td><td>March</td></tr>
  <tr class = "b"><td>April</td><td>May</td><td>June</td></tr>
  <tr class = "c"><td>July</td><td>August</td><td>September</td></tr>
  <tr class = "a"><td>October</td><td>November</td><td>December</td></tr>
  <tr class = "b"><td>Monday</td><td>Tuesday</td><td>Wednesday</td></tr>
  <tr class = "a"><td>Thursday</td><td>Friday</td><td>Saturday</td></tr>
  <tr class = "b"><td>Spring</td><td>Summer</td><td>Fall</td></tr>
</table>
</body>
 </html>

Answer 1

JavaScript 不是合适的解决方案：使用 CSS.

Alternating table rows:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

对于鼠标点击，使用 css :active (and possibly :visited) 伪选择器。

Answer 2

试试这个：

$("#up").on("click",function() {              
    $(".highlight").next().addClass("highlight").prev().removeClass("highlight");
})

$("#down").on("click",function() {                 
    $(".highlight").prev().addClass("highlight").next().removeClass("highlight");
})

试试看

Answer 3

这个怎么样：

//use important for css .highlight class 

$('#myTable tr').on('click',function(){
  $('#myTable tr').removeClass("highlight");
  $(this).addClass("highlight");
});

//for mouse over and out
$('#myTable tr').mouseover(function(){
  $(this).addClass('over');
}).mouseout(function(){
  $(this).removeClass('over');
});

link example

Answer 4

这是您正在寻找的解决方案。

http://jsfiddle.net/90xxguma/

    <html>
    <head>
    <style>
    .highlight{
                background-color: pink;
            }
            .odd{
                background-color: lightgrey;
            }
            .even{
                background-color: gray;
            }
            .over{
                background-color: red;
            }
        </style>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
        </script>
        <script>
            $(document).ready(function(){   
            $('.c').addClass('highlight');
            $('.a').addClass('odd');
            $('.b').addClass('even');
        var currentRow = -1;
        var totalRows = $('#myTable tr').length;
        $('#down').click(function(){
          if(currentRow != (totalRows-1))
            {
              currentRow++;
              $('#myTable tr').removeClass('over');
                            $('#myTable tr:eq('+currentRow+')').addClass('over');

            }
        })

        $('#up').click(function(){
          if(currentRow > 0)
            {
              currentRow--;
              $('#myTable tr').removeClass('over');
                            $('#myTable tr:eq('+currentRow+')').addClass('over');

            }
        })

    });

        </script>

    </head>
    <body>
<h2>2: Zebra Striping Demo</h2>
<table id = "myTable" width="200" border="1">
  <caption><a id = "up" href="#">UP</a> Zebra Striping Demo <a id = "down" href="#">DN</a></caption>
  <tr class = "a"><td>January</td> <td>February</td><td>March</td></tr>
  <tr class = "b"><td>April</td><td>May</td><td>June</td></tr>
  <tr class = "c"><td>July</td><td>August</td><td>September</td></tr>
  <tr class = "a"><td>October</td><td>November</td><td>December</td></tr>
  <tr class = "b"><td>Monday</td><td>Tuesday</td><td>Wednesday</td></tr>
  <tr class = "a"><td>Thursday</td><td>Friday</td><td>Saturday</td></tr>
  <tr class = "b"><td>Spring</td><td>Summer</td><td>Fall</td></tr>
</table>
</body>
    </html>

Answer 5

您可以使用 data-* attrbiutes.You 可以将行的顺序分配给数据顺序属性，例如当您单击时；您可以检查订单，您可以将 class 分配给 order-1 tr.

的行

jsfiddle link

jsfiddle

让我知道它是否适合你

jQuery.click()函数如何区分table行

jQuery .click() function how to distinguish table rows

javascript

jquery