Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk menyembunyikan berbilang td yang ditentukan dalam jquery

Bagaimana untuk menyembunyikan berbilang td yang ditentukan dalam jquery

青灯夜游
青灯夜游asal
2022-06-10 14:09:282597semak imbas

Cara untuk menyembunyikan berbilang elemen td yang ditentukan dalam jquery: 1. Tambahkan atribut kelas kepada berbilang elemen td yang perlu disembunyikan, dan tetapkan nilai atribut kepada nilai yang sama 2. Gunakan atribut kelas kepada dapatkan berbilang elemen td yang ditentukan, sintaksnya ialah " $(".nilai atribut kelas ")", akan mengembalikan objek jQuery yang mengandungi berbilang elemen td yang ditentukan 3. Gunakan fungsi hide() untuk menyembunyikan elemen td yang diperolehi, sintaksnya ialah "td elemen object.hide()".

Bagaimana untuk menyembunyikan berbilang td yang ditentukan dalam jquery

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 3.6.0, komputer Dell G3.

Cara menyembunyikan berbilang td yang ditentukan dalam jquery

1 tersembunyi Nilai ditetapkan kepada nilai yang sama, seperti "kotak"

<table border="1">
	<tr>
		<th>商品</th>
		<th>价格</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. Gunakan atribut kelas untuk mendapatkan berbilang elemen td yang ditentukan

$(".class属性值")

Akan mengembalikan objek jQuery yang mengandungi berbilang elemen td yang ditentukan

3 Gunakan fungsi hide() untuk menyembunyikan objek yang diperolehi (elemen td)

<.>
td对象.hide()
Kod pelaksanaan:


<!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>价格</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>隐藏多个td元素</button>
	</body>
</html>

Bagaimana untuk menyembunyikan berbilang td yang ditentukan dalam jquery

[Pembelajaran yang disyorkan:

tutorial video jQuery, bahagian hadapan web video]

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan berbilang td yang ditentukan dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn