Bgcolor替代行包含選擇框動態使用jQuery

我有一個表，它的行包含選擇框。我需要爲行提供替代顏色。它幾乎完成了。但我的選擇框不會改變顏色。它是如何完成的？Bgcolor替代行包含選擇框動態使用jQuery

HTML

<table width="100%" cellpadding="0" cellspacing="0" border="0" 
class="stdform"> 
    ..other codes... 
    <tr><td> 
    <table class="fancyTable" id="sortable-table" 
      cellpadding="0" cellspacing="0" width="100%"> 
      <thead> 
       <tr> 
        <td>header one</td> 
        <td><select><option>--select--</option></select></td> 
        <td>header three</td> 
       </tr> 
      </thead> 
      <tbody id="job-tbody"> 
       <tr class="prototype"> 
        <td>one</td> 
        <td><select><option>--select--</option></select></td> 
        <td>three</td> 
       </tr> 
      </tbody> 
    </table> 
    </td></tr> 
</table>

CSS：

$(document).ready(function() { 
     $("tr:odd").css("background-color","#eee"); 
     $("tr:even").css("background-color","#ddd"); 
    });

FIDDLE： http://jsfiddle.net/wk7Dy/15/

來源

2016-04-08 Rehan

你可以只用CSS爲此，請參閱http://stackoverflow.com/questions/5080699/using-css-even-and-odd-pseudo-classes-with-list- items – Robert

您將需要分別指定樣式select元素更新fiddle

$(document).ready(function() { 
 
    $("tr:odd").css("background-color", "#eee"); 
 
    $("tr:even").css("background-color", "#ddd"); 
 
    $("tr:even").find('select').css("background-color", "#ddd"); 
 
    $("tr:odd").find('select').css("background-color", "#eee"); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="stdform"> 
 
    ..other codes... 
 
    <tr> 
 
    <td> 
 
     <table class="fancyTable" id="sortable-table" cellpadding="0" cellspacing="0" width="100%"> 
 
     <thead> 
 
      <tr> 
 
      <td>header one</td> 
 
      <td> 
 
       <select> 
 
       <option>--select--</option> 
 
       </select> 
 
      </td> 
 
      <td>header three</td> 
 
      </tr> 
 
     </thead> 
 
     <tbody id="job-tbody"> 
 
      <tr class="prototype"> 
 
      <td>one</td> 
 
      <td> 
 
       <select> 
 
       <option>--select--</option> 
 
       <option>--select--</option> 
 
       </select> 
 
      </td> 
 
      <td>three</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
</table>

來源

2016-04-08 09:35:03 Pugazh

謝謝....它工作正常... – Rehan

Generally we do not put inline style so...this may be a good solution. 
I know answer is already accepted but just for refrence adding this. 


<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Image change by a</title> 

    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 

    <script> 
    $(function() { 
    $("tr:odd").addClass("oddrow"); 
    $("tr:even").addClass("evenrow"); 
    }); 
    </script> 
    <style> 
    .oddrow{background-color:green;} 
    .evenrow{background-color:red;} 
    .oddrow select{background-color:green !important;} 
    .evenrow select{background-color:red} 
    </style> 
</head> 
<body> 

<table width="100%" cellpadding="0" cellspacing="0" border="0" 
    class="stdform"> 
     ..other codes... 
     <tr><td> 
     <table class="fancyTable" id="sortable-table" 
       cellpadding="0" cellspacing="0" width="100%"> 
       <thead> 
        <tr> 
         <td>header one</td> 
         <td><select><option>--select--</option></select></td> 
         <td>header three</td> 
        </tr> 
       </thead> 
       <tbody id="job-tbody"> 
        <tr class="prototype"> 
         <td>one</td> 
         <td><select><option>--select--</option></select></td> 
         <td>three</td> 
        </tr> 

       </tbody> 
     </table> 
     </td></tr> 
    </table> 

</body> 
</html>

來源

2016-04-08 10:26:34

Bgcolor替代行包含選擇框動態使用jQuery

回答

相關問題