在前端開發中，我們經常需要動態地操作HTML表格的行（<tr>）。例如，根據某些條件隱藏或顯示表格中的某一行。jQuery功能強大且易于使用的JavaScript庫，提供了簡潔的API來實現這一需求。本文將詳細介紹如何使用jQuery隱藏表格中的一行（<tr>），并探討相關的應用場景和注意事項。
hide()函數jQuery提供了hide()函數，可以隱藏指定的DOM元素。要隱藏表格中的一行，只需選擇該行并調用hide()函數即可。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>隱藏表格行示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<table border="1">
<tr id="row1">
<td>1</td>
<td>張三</td>
<td>25</td>
</tr>
<tr id="row2">
<td>2</td>
<td>李四</td>
<td>30</td>
</tr>
<tr id="row3">
<td>3</td>
<td>王五</td>
<td>28</td>
</tr>
</table>
<button id="hideRow1">隱藏第一行</button>
<script>
$(document).ready(function() {
$("#hideRow1").click(function() {
$("#row1").hide();
});
});
</script>
</body>
</html>
id屬性，方便我們通過jQuery選擇器進行選擇。#hideRow1綁定了一個點擊事件。當用戶點擊按鈕時，#row1這一行將被隱藏。點擊“隱藏第一行”按鈕后，表格中的第一行將消失，頁面只顯示剩余的兩行。
在實際應用中，我們可能需要根據某些條件動態地隱藏表格行。例如，根據用戶的輸入或某些數據狀態來決定是否隱藏某一行。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>動態隱藏表格行示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="filterInput" placeholder="輸入姓名進行過濾">
<table border="1">
<tr>
<td>1</td>
<td>張三</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>28</td>
</tr>
</table>
<script>
$(document).ready(function() {
$("#filterInput").on("input", function() {
var filterText = $(this).val().toLowerCase();
$("table tr").each(function() {
var rowText = $(this).text().toLowerCase();
if (rowText.indexOf(filterText) === -1) {
$(this).hide();
} else {
$(this).show();
}
});
});
});
</script>
</body>
</html>
input事件，當用戶輸入內容時，觸發事件處理函數。在處理函數中，我們遍歷表格的每一行，檢查該行的文本內容是否包含用戶輸入的文本。如果不包含，則隱藏該行；否則，顯示該行。用戶在輸入框中輸入文本時，表格中不包含該文本的行將被隱藏，只顯示包含該文本的行。
在某些情況下，我們可能需要隱藏多行。此時，可以為這些行添加相同的類名，然后通過類選擇器一次性隱藏所有符合條件的行。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>隱藏多行示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<table border="1">
<tr class="highlight">
<td>1</td>
<td>張三</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>30</td>
</tr>
<tr class="highlight">
<td>3</td>
<td>王五</td>
<td>28</td>
</tr>
</table>
<button id="hideHighlightedRows">隱藏高亮行</button>
<script>
$(document).ready(function() {
$("#hideHighlightedRows").click(function() {
$(".highlight").hide();
});
});
</script>
</body>
</html>
highlight類。highlight類的行將被隱藏。點擊“隱藏高亮行”按鈕后，表格中所有帶有highlight類的行將被隱藏。
除了hide()函數，jQuery還提供了其他方法來隱藏元素，例如css()函數和addClass()函數。
css()函數$("#row1").css("display", "none");
addClass()函數$("#row1").addClass("hidden");
然后在CSS中定義.hidden類：
.hidden {
display: none;
}
aria-hidden屬性來提高可訪問性。通過本文的介紹，我們了解了如何使用jQuery隱藏表格中的一行或多行。無論是簡單的隱藏操作，還是根據條件動態隱藏，jQuery都提供了簡潔而強大的API來實現這些功能。在實際開發中，我們可以根據具體需求選擇合適的方法，并注意性能、可訪問性和兼容性等問題。
希望本文對你有所幫助，祝你在前端開發的道路上越走越遠！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
