jquery如何隱藏多個(gè)指定td

發(fā)布時(shí)間：2022-06-10 15:18:05 來源：億速云閱讀：563 作者：iii 欄目：web開發(fā)

這篇文章主要介紹了jquery如何隱藏多個(gè)指定td的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇jquery如何隱藏多個(gè)指定td文章都會(huì)有所收獲，下面我們一起來看看吧。

jquery隱藏多個(gè)指定td的方法：1、給需要隱藏的多個(gè)td元素添加class屬性，屬性值設(shè)置為同一值；2、利用class屬性獲取多個(gè)指定td元素，語法“$(".class屬性值")”，會(huì)返回包含多個(gè)指定td元素的jQuery對象；3、利用hide()函數(shù)隱藏獲取到的td元素即可，語法“td元素對象.hide()”。

本教程操作環(huán)境：windows7系統(tǒng)、jquery3.6.0版本、Dell G3電腦。

jquery隱藏多個(gè)指定td的方法

1、給需要隱藏的多個(gè)td元素添加class屬性，屬性值設(shè)置為同一值，例如“box”

<table border="1">
	<tr>
		<th>商品</th>
		<th>價(jià)格</th>
	</tr>
	<tr>
		<td class="box">T恤</td>
		<td>￥100</td>
	</tr>
	<tr>
		<td class="box">牛仔褂</td>
		<td class="box">￥250</td>
	</tr>
	<tr>
		<td>牛仔庫</td>
		<td>￥150</td>
	</tr>
</table>

2、利用class屬性獲取多個(gè)指定td元素

$(".class屬性值")

會(huì)返回包含多個(gè)指定td元素的jQuery對象

3、利用hide()函數(shù)隱藏獲取到的對象（td元素）

td對象.hide()

實(shí)現(xiàn)代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").on("click", function() {
					$(".box").hide();
				});
			});
		</script>
	</head>
	<body>

		<table border="1">
			<tr>
				<th>商品</th>
				<th>價(jià)格</th>
			</tr>
			<tr>
				<td class="box">T恤</td>
				<td>￥100</td>
			</tr>
			<tr>
				<td class="box">牛仔褂</td>
				<td class="box">￥250</td>
			</tr>
			<tr>
				<td>牛仔庫</td>
				<td>￥150</td>
			</tr>
		</table><br>
		<button>隱藏多個(gè)td元素</button>
	</body>
</html>

jquery如何隱藏多個(gè)指定td

關(guān)于“jquery如何隱藏多個(gè)指定td”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“jquery如何隱藏多個(gè)指定td”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

jquery如何隱藏多個(gè)指定td

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽