Question

我试图在UP和DN上使用.click功能，这样当我按下时，.over类被移到上一行，当我按下DN时，.over类被移到下一行。我的问题是我不知道如何在click函数中指定for循环并且能够调用每一行。我所知道的是如何指定点击与div id一起运行的动作。

＆＃13;

<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>

＆＃13;

Answer 1

JavaScript不适用于此：使用CSS。

Alternating table rows：

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

对于鼠标单击，请使用css :active（以及可能的: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- * attrbiute。您可以将行的顺序分配给数据顺序属性，例如当您单击时;您可以检查订单，然后可以使用order-1 tr。

将类分配给行

jsfiddle link

jsfiddle

让我知道它是否适合你

jQuery .click（）函数如何区分表行

5 个答案: