Question

我有一张桌子，它的行包含选择框。我需要为行提供替代颜色。它几乎完成了。但我的选择框不会改变颜色。怎么做？

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/

Answer 1

您需要单独为select元素Update fiddle

指定样式

＆＃13;

  $(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");
  });

＆＃13;

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

＆＃13;

Answer 2

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>

替代行的Bgcolor包含动态使用jquery的表中的选择框

2 个答案: