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

debugcn 发表于 Dev

沙比沙比

我试图在UP和DN上使用.click函数，以便当我按下时，.over类移到上一行，而当我按下DN时，.over类移到下一行。我的问题是我不知道如何在click函数中指定for循环并不能调用每一行。我所知道的是如何使用div ID指定点击功能。

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

关于比萨

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

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。