資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 jQuery 選擇表格中的所有奇數/偶數行？
在開發 Web 應用程式時，處理表格是一項非常常見的任務。有時我們可能需要從表格中選擇特定行。假設我們想要所有偶數或奇數行，但是該怎麼做呢？在本文中，我們將瞭解如何使用 jQuery 選擇表格中的所有奇數/偶數行。
選擇表格中所有奇數/偶數行的幾種方法
要使用 jQuery 選擇表格中的所有偶數行，我們可以採用不同的方法來完成此任務。下面我們討論了三種常用的方法：
方法一：使用 :even/:odd 選擇器
此方法是選擇表格中偶數或奇數行最簡單且最常用的方法之一。在這裡，我們使用 :even 和 :odd 選擇器。
語法
所有偶數行的語法如下所示：
$('table tr:even').addClass('even');
所有奇數行的語法如下所示：
$('table tr:odd').addClass('odd');
示例
在這個例子中，我們建立了一個“切換偶數”按鈕，單擊該按鈕時會執行一個 jQuery 函式，該函式使用 :even 選擇器選擇所有偶數行，並將“even”類新增到它們的元素中以更改樣式，在本例中是將背景顏色更改為綠色，文字顏色更改為白色。類似地，單擊“切換奇數”按鈕時，它會執行 :odd 選擇器，該選擇器選擇所有奇數行，並將“odd”類新增到它們的元素中以更改樣式，在本例中是將背景顏色更改為藍色，文字顏色更改為白色。
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<style>
.even-class {
background-color: green;
color: white;
}
.odd-class {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div>
<table border="1">
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>
</tr>
<tr>
<td>Row 2, Col 1</td>
<td>Row 2, Col 2</td>
</tr>
<tr>
<td>Row 3, Col 1</td>
<td>Row 3, Col 2</td>
</tr>
<tr>
<td>Row 4, Col 1</td>
<td>Row 4, Col 2</td>
</tr>
</table>
<br>
<button id="toggleEvenRow">Toggle Even</button>
<button id="toggleOddRow">Toggle Odd</button>
</div>
<script>
// Approach 1: Using the :even/:odd Selector
$('#toggleEvenRow').on('click', function() {
$('table tr:even').addClass('even-class');
});
$('#toggleOddRow').on('click', function() {
$('table tr:odd').addClass('odd-class');
});
</script>
</body>
</html>
方法二：使用 .filter() 方法
.filter() 方法用於根據 javascript 中的某些條件過濾一組元素。
語法
選擇所有奇數行的語法如下所示：
$('table tr').filter(':even').addClass('even');
選擇所有奇數行的語法如下所示：
$('table tr').filter(':odd).addClass(odd);
示例
在這個例子中，我們建立了一個“切換偶數”按鈕，單擊該按鈕時會執行一個 jQuery 函式，該函式使用 .filter(':even') 方法選擇所有偶數行，並將“even”類新增到它們的元素中以更改樣式，在本例中是將背景顏色更改為綠色，文字顏色更改為白色。類似地，單擊“切換奇數”按鈕時，它會執行 .filter(':odd') 方法，該方法選擇所有奇數行，並將“odd”類新增到它們的元素中以更改樣式，在本例中是將背景顏色更改為藍色，文字顏色更改為白色。
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<style>
.even-class {
background-color: green;
color: white;
}
.odd-class {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div>
<table border="1">
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>
</tr>
<tr>
<td>Row 2, Col 1</td>
<td>Row 2, Col 2</td>
</tr>
<tr>
<td>Row 3, Col 1</td>
<td>Row 3, Col 2</td>
</tr>
<tr>
<td>Row 4, Col 1</td>
<td>Row 4, Col 2</td>
</tr>
</table>
<br>
<button id="toggleEvenRow">Toggle Even</button>
<button id="toggleOddRow">Toggle Odd</button>
</div>
<script>
// Approach 2: Using the .filter() Method
$('#toggleEvenRow').on('click', function() {
$('table tr').filter(':even').addClass('even-class');
});
$('#toggleOddRow').on('click', function() {
$('table tr').filter(':odd').addClass('odd-class');
});
</script>
</body>
</html>
方法三：在 jQuery 中使用迴圈
在此方法中，我們使用迴圈來選擇表格中的偶數或奇數行，該迴圈迭代表格中給出的所有行，然後根據其索引將樣式應用於偶數或奇數行。
語法
選擇所有偶數行的語法如下所示：
$('table tr').each(function(index) {
if (index % 2 === 0) {
$(this).addClass('even');
}
});
選擇所有奇數行的語法如下所示：
$('table tr').each(function(index) {
if (index % 2 !== 0) {
$(this).addClass('odd');
}
});
示例
單擊“切換偶數”按鈕時，.each() 方法會遍歷每一行，而 $(this) 選擇器會將“even”類新增到偶數索引的行。類似地，單擊“切換偶數”按鈕時，.each() 方法會遍歷每一行，然後 $(this) 選擇器會將“odd”類新增到奇數索引的行。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<style>
.even-class {
background-color: green;
color: white;
}
.odd-class {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div>
<table border="1">
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>
</tr>
<tr>
<td>Row 2, Col 1</td>
<td>Row 2, Col 2</td>
</tr>
<tr>
<td>Row 3, Col 1</td>
<td>Row 3, Col 2</td>
</tr>
<tr>
<td>Row 4, Col 1</td>
<td>Row 4, Col 2</td>
</tr>
</table>
<br>
<button id="toggleEvenRow">Toggle Even</button>
<button id="toggleOddRow">Toggle Odd</button>
</div>
<script>
// Approach 3: Using a Loop
$('#toggleEvenRow').on('click', function() {
$('table tr').each(function(index) {
if (index % 2 === 0) {
$(this).addClass('even-class');
}
});
});
$('#toggleOddRow').on('click', function() {
$('table tr').each(function(index) {
if (index % 2 !== 0) {
$(this).addClass('odd-class');
}
});
});
</script>
</body>
</html>
結論
要使用 jQuery 選擇表格中的所有奇數/偶數行，可以使用多種方法。在本文中，我們討論了三種不同的方法，選擇哪種方法取決於 Web 應用程式的具體需求。總的來說，jQuery 對於 Web 開發人員來說是一個用途廣泛且易於使用的工具，它具有廣泛的功能，可以簡化 Web 開發流程。
642 次瀏覽
