Two very useful custom selectors in the jQuery library are :oddand :even. Let's take a?look at how we can use one of them for basic table striping, given the following tables:
?
<h2>Shakespeare's Plays</h2>
<table>
<tr>
<td>As You Like It</td>
<td>Comedy</td>
<td></td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
<td>1601</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1595</td>
</tr>
<tr>
<td>Henry IV, Part I</td>
<td>History</td>
<td>1596</td>
</tr>
<tr>
<td>Henry V</td>
<td>History</td>
<td>1599</td>
</tr>
</table>
<h2>Shakespeare's Sonnets</h2>
<table>
<tr>
<td>The Fair Youth</td>
<td>1–126</td>
</tr>
<tr>
<td>The Dark Lady</td>
<td>127–152</td>
</tr>
<tr>
<td>The Rival Poet</td>
<td>78–86</td>
</tr>
</table>
jquey中有兩個有用的選擇器，:odd,:even，讓我們看一下我們?nèi)绾问褂檬褂盟麄冎粊頌榛A(chǔ)的表格加樣式，見如下的表格：(同上的代碼)
?
With minimal styles applied from our stylesheet, these headings and tables appear?quite plain. The table has a solid white background, with no styling separating one?row from the next:
通過樣式表最少的樣式，這些頭部和表格顯示的相當(dāng)平常，這個表格有一個固定的白色背景，兩個相鄰的行之間沒有分割樣式：
Now we can add a style to the stylesheet for all table rows, and use an altclass for?the odd rows:
?
tr {
background-color: #fff;
}
.alt {
background-color: #ccc;
}
Finally, we write our jQuery code, attaching the class to the odd-numbered table?rows (<tr>tags):
?
?
$(document).ready(function() {
$('tr:even').addClass('alt');
});
?
tr {
background-color: #fff;
}
.alt {
background-color: #ccc;
}
$(document).ready(function() {
$('tr:even').addClass('alt');
});
But wait! Why use the :evenselector for odd-numbered rows? Well, just as with?the :eq()selector, the :evenand :oddselectors use JavaScript's native zero-based?numbering. Therefore, the first row counts as 0 (even) and the second row counts?as 1 (odd), and so on. With this in mind, we can expect our simple bit of code to?produce tables that look similar to the following screenshot:
$(document).ready(function() {
$('tr:nth-child(odd)').addClass('alt');
});
注意在第二個表格中，這個結(jié)果可能不是我們想要的，正如在這個Plays表格中，最后一行有著這個"交替"的灰色背景，在Sonnets表格中，第一行有個這個簡單的白色的背景。避免這種問題的一個方法是使用:nth-child()選擇器，這個選擇器依靠父元素計(jì)算元素的位置，而不是所有被選擇的元素。這個選擇器使用或者數(shù)字，odd，even作為他的參數(shù)。
$(document).ready(function() {
$('tr:nth-child(odd)').addClass('alt');
});
As before, note that :nth-child()is the only jQuery selector that is one-based.?To achieve the same row striping as we did above—except with consistent?behavior for the second table—we need to use oddrather than evenas the?argument. With this selector in place, both tables are now striped nicely, as?shown in the following screenshot:
正如之前說的，注意到:nth-child()只是從0開始計(jì)數(shù)的jquery選擇器。為了像我們上面做的那樣接觸到相同的被裝飾的行——排除第二個表格中出現(xiàn)的那種行為——我們需要使用odd而不是even作為參數(shù)。在使用這個選擇器后，兩個表都被很好的加上了條紋，正如在下面的截屏中顯示的那樣。
$(document).ready(function() {
$('tr:nth-child(odd)').addClass('alt');
$('td:contains(Henry)').addClass('highlight');
});
在最后一個接觸定制選擇器，我們假設(shè)由于一些原因，我們想要高亮所有的涉及到Henry展示出來的的表格。我們需要做的是——在添加一個可以使文字加粗和斜體的類到樣式表（.highlight {font-weight: bold; font-style: italic;}）中以后——在我們的jquery代碼中添加一行代碼，使用:contains()選擇器，正如下面的代碼片段顯示的那樣。
$(document).ready(function() {
$('tr:nth-child(odd)').addClass('alt');
$('td:contains(Henry)').addClass('highlight');
});
So, now we can see our lovely striped table with the Henryplays prominently?featured:
Admittedly, there are ways to achieve the row striping and text highlighting?without jQuery—or any client-side programming, for that matter. Nevertheless,?jQuery, along with CSS, is a great alternative for this type of styling in cases where?the content is generated dynamically and we don't have access to either the HTML?or server-side code.
?
?
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
