Question

我想通过表格中的jQuery为偶数行提供橙色。

但那对我不起作用。

以下是html代码：

<!DOCTYPE html>
<html lang="en">
    <head>
         <title>
         </title>
         <meta charset="utf-8" />
         <link rel="stylesheet" type="text/css" href="css/custom.css" />
    </head>
    <body>
        <table class="myTable">
            <tr>
                <td>
                    one
                </td>
                <td>
                    two
                </td>
            </tr>
            <tr>
                <td>
                    three
                </td>
                <td>
                    four
                </td>
            </tr>
            <tr>
                <td>
                    five
                </td>
                <td>
                    six
                </td>
            </tr>
            <tr>
                <td>
                    seven
                </td>
                <td>
                    eight
                </td>
            </tr>
        </table>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
    <script type="text/javascript" src="js/custom.js" ></script>
    </body>
</html>

以下是custom.css中的代码：

table,table td{
    border: 1px solid white;
    background: green;
    color: white;

}
.highlight{
    background: orange;
}

以下是custom.js中的代码：

$(document).ready(function(){
    $('.myTable tr:even').addClass('.highlight');
});

我是jQuery的初学者。

我正在寻找一种简短的方法。

Answer 1

$(document).ready(function(){
    $('.myTable tr:even').addClass('highlight');
});

从addClass函数中删除点

Answer 2

你真的不需要jQuery来获得这种效果。除非您有特定的用例/要求，否则您可以使用奇数，偶数伪类来满足您的需求。

以下是一个示例。

table,
table td {
  border: 1px solid white;
  background: green;
  color: white;
}
table tr:nth-child(even) td {
  background-color: orange;
}
.highlight {
  background: orange;
}

<table class="myTable">
  <tr>
    <td>
      one
    </td>
    <td>
      two
    </td>
  </tr>
  <tr>
    <td>
      three
    </td>
    <td>
      four
    </td>
  </tr>
  <tr>
    <td>
      five
    </td>
    <td>
      six
    </td>
  </tr>
  <tr>
    <td>
      seven
    </td>
    <td>
      eight
    </td>
  </tr>
</table>

Answer 3

你快到了。代码中的问题是

您想要突出显示td，而您的选择器为tr。
.addClass()的语法应为addClass('highlight')而不是addClass('.highlight')。

替换它：

$(document).ready(function(){
    $('.myTable tr:even').addClass('.highlight');
});

使用：

$(document).ready(function(){
    $('.myTable td:odd tr').addClass('highlight');
});

根据documentation :odd选择偶数行：

特别要注意，基于0的索引意味着，反直觉地，：odd选择匹配集合中的第二个元素，第四个元素等。

运行代码：

＆＃13;

$(document).ready(function(){
    $('.myTable tr:odd td').addClass('highlight');
});

＆＃13;

table,table td{
    border: 1px solid white;
    background: green;
    color: white;

}
.highlight{
    background: orange;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="myTable">
            <tr>
                <td>
                    one
                </td>
                <td>
                    two
                </td>
            </tr>
            <tr>
                <td>
                    three
                </td>
                <td>
                    four
                </td>
            </tr>
            <tr>
                <td>
                    five
                </td>
                <td>
                    six
                </td>
            </tr>
            <tr>
                <td>
                    seven
                </td>
                <td>
                    eight
                </td>
            </tr>
        </table>

＆＃13;

Answer 4

这是一个使用CSS和jQuery的小例子：

EditText

// Execute a function when the DOM is fully loaded.
$(document).ready(function () {

    // Set the .alt class for the alternate rows
    $('.myTable tr:nth-child(even)').addClass('alt');
});

/** Style for the body **/
 body {
    font: 12px Tahoma, Arial, Helvetica, Sans-Serif;
}
/** Main class for the alternate rows **/
 .alt {
    background-color:#eee;
}
/** Style for the table **/
 .myTable {
    border-collapse:collapse;
    font-size: 0.917em;
    max-width:500px;
    min-width:450px;
}
.myTable td {
    border:1px solid #333;
    padding:4px 8px;
}
.myTable td:nth-child(1) {
    width:200px;
}
.myTable td:nth-child(2) {
    width:150px;
}
.myTable td:nth-child(3) {
    width:100px;
}
/** Style for the cointainer **/
 #body {
    clear: both;
    margin: 0 auto;
    max-width: 534px;
}
html, body {
    background-color:White;
}
hr {
    margin-bottom:40px;
}

通过jQuery

4 个答案: