Javascript Bgcolor for alternative rows使用jquery动态地在表中包含选择框_Javascript_Jquery_Html_Css

Javascript Bgcolor for alternative rows使用jquery动态地在表中包含选择框

javascript jquery html css

Javascript Bgcolor for alternative rows使用jquery动态地在表中包含选择框,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个表，它的行包含选择框。我需要给这些行添加其他颜色。差不多完成了。但是我的选择框不会改变颜色。这是怎么做到的 HTML 小提琴：您需要为选择元素更新单独指定样式 $（文档）.ready（函数（）{ $（“tr:odd”）.css（“背景色”，“#eee”）； $（“tr:even”）.css（“背景色”，“ddd”）； $（“tr:偶数”）.find（'select'）.css（“背景色”）、“#ddd”）； $（“tr:odd”）.find（'select'）.css（“背景色”），

我有一个表，它的行包含选择框。我需要给这些行添加其他颜色。差不多完成了。但是我的选择框不会改变颜色。这是怎么做到的

HTML

小提琴：

您需要为

选择元素更新单独指定样式

$（文档）.ready（函数（）{
$（“tr:odd”）.css（“背景色”，“#eee”）；
$（“tr:even”）.css（“背景色”，“ddd”）；
$（“tr:偶数”）.find（'select'）.css（“背景色”）、“#ddd”）；
$（“tr:odd”）.find（'select'）.css（“背景色”），“#eee”）；
});

…其他代码。。。
标题一
--挑选--
头球三
一
--挑选--
--挑选--
三
通常我们不使用内联样式，因此……这可能是一个很好的解决方案。
我知道答案已经被接受了，但只是为了参考添加这一点。
图像的变化
$（函数（）{
$（“tr:odd”）.addClass（“oddrow”）；
$（“tr:偶数”）.addClass（“偶数行”）；
});
.oddrow{背景色：绿色；}
.evenrow{背景色：红色；}
.oddrow选择{背景色：绿色！重要；}
.evenrow选择{背景色：红色}
…其他代码。。。
标题一
--挑选--
头球三
一
--挑选--
三
仅使用css即可完成此操作，请参见
<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>

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

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>