How to hide th element in jquery

Method: 1. Use "$("th").hide()" to hide by adding display style; 2. Use "$("th").fadeOut()" or "$( "th").fadeTo(milliseconds,0)", hide it by modifying the transparency; 3. Use "$("th").slideUp()".

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

tag defines the header cell in the HTML table.

Example:

<table border="1">
	<tr>
		<th>商品</th>
		<th>价格</th>
	</tr>
	<tr>
		<td>T恤</td>
		<td>￥100</td>
	</tr>
	<tr>
		<td>牛仔褂</td>
		<td>￥250</td>
	</tr>
	<tr>
		<td>牛仔库</td>
		<td>￥150</td>
	</tr>
</table><br>

Then use jquery to hide the th element

1. Use the hide()

hide() method to hide the selected element (hide it by adding the display:none style to the element).

$(document).ready(function() {
	$("button").click(function() {
		$("th").hide();
	});
});

2. Use the fadeOut()

fadeOut() method to gradually change the opacity of the selected element, from visible to Hidden (fading effect).

$(document).ready(function() {
	$("button").click(function() {
		$("th").fadeOut();
	});
});

3. Use the fadeTo()

fadeTo() method to gradually change the opacity of the selected element to the specified value. (faded effect).

Just set the final opacity to 0.

$(document).ready(function() {
	$("button").click(function() {
		$("th").fadeTo(1000,0);
	});
});

4. Use the slideUp()

slideUp() method to hide the selected element in a sliding manner.

$(document).ready(function() {
	$("button").click(function() {
		$("th").slideUp();
	});
});

[Recommended learning: jQuery video tutorial, web front-end video】

The above is the detailed content of How to hide th element in jquery. For more information, please follow other related articles on the PHP Chinese website!