如何更改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的背景顏色

回答

相關問題