如何更改tr的背景颜色

$("a").filter(function() { 
     return $(this).text().match('UP'); 
     }).click(function() { 
     $('.highlight').removeClass('highlight'); 
     var num = 1; 
     $('tr').eq(num).toggleClass('highlight'); 
    });

我想要做的是，当我点击我的链接时，我的默认tr将变回原来的颜色，上面的tr变为黄色。这就是我现在所拥有的：如何更改tr的背景颜色

来源

2016-12-03 Julian Andres F M

-1

这里是一个示例，我希望做你想做的。这还有待提高一点，但它会做的伎俩:)

$(function() { 
 
      $('#up').on('click', function(){ 
 
       var row = $('tr.highlight'); 
 
       row.prev().addClass('highlight'); 
 
       row.removeClass('highlight'); 
 
      }); 
 
      $('#down').on('click', function(){ 
 
      \t var row = $('tr.highlight'); 
 
       row.next().addClass('highlight'); 
 
       row.removeClass('highlight'); 
 
      });  
 
     });

tr:nth-child(even) {background: #CCC} 
 
    tr:nth-child(odd) {background: #FFF} 
 
    tr.highlight{ 
 
     background: yellow !important; 
 
    } 
 
    tr:hover{ 
 
     background: #FF0000; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <body> 
 
     <h2>2: Zebra Striping Demo</h2> 
 
     <table width="200" border="1" id = "changes"> 
 
      <caption> 
 
       <a href="#" id="up">UP</a> 
 
       Zebra Striping Demo <a href="#" id="down">DN</a> 
 
      </caption> 
 
      <thead> 
 
       <tr> 
 
        <th>January</th> 
 
        <th>February</th> 
 
        <th>March</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr class = "highlight"> 
 
        <td>April</td> 
 
        <td>May</td> 
 
        <td>June</td> 
 
       </tr> 
 
       <tr> 
 
        <td>July</td> 
 
        <td>August</td> 
 
        <td>September</td> 
 
       </tr> 
 
       <tr> 
 
        <td>October</td> 
 
        <td>November</td> 
 
        <td>December</td> 
 
       </tr> 
 
       <tr> 
 
        <td>Monday</td> 
 
        <td>Tuesday</td> 
 
        <td>Wednesday</td> 
 
       </tr> 
 
       <tr> 
 
        <td>Thursday</td> 
 
        <td>Friday</td> 
 
        <td>Saturday</td> 
 
       </tr> 
 
       <tr> 
 
        <td>Spring</td> 
 
        <td>Summer</td> 
 
        <td>Fall</td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
    </body>

来源

2016-12-03 01:02:35

谢谢它帮我 –

不客气:) –

如何更改tr的背景颜色

回答

相关问题