How to modify cell value in jquery-Front-end Q&A-php.cn

How to modify cell value in jquery

青灯夜游

Release： 2022-06-10 16:19:23

Original

3007 people have browsed it

Two modification methods: 1. Use "$(selector)" to obtain the specified cell element th or td, and then use text() to modify the content value of the element. The syntax "$(selector).text( "Cell new value")" can only set new text content. 2. Get the specified cell element th or td, and then use html() to modify the content value of the element. The syntax is "$(selector).html("cell new value")". You can set the text content or innerHTML containing the label. content.

How to modify cell value in jquery

The operating environment of this tutorial: windows7 system, jquery3.6.0 version, Dell G3 computer.

In HTML, table cells are defined by th or td elements

Header cell - contains header information (created by
element )

Standard cell - contains data (created by

element)

jquery modifies the cell value, that is There are two methods to modify the content of th or td elements:

Use text()
Use html()

Method 1: Use text()

text() method to set the text content of the selected element, which will overwrite the content of all matching elements .

<!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() {
					$("th").text("表头新值");
				});
			});
		</script>
	</head>
	<body>

		<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>
		<button>修改单元格值</button>
	</body>
</html>

Copy after login

How to modify cell value in jquery

Method 2: Use the html()

html() method to set the content of the selected element (innerHTML), Will rewrite the contents of all matching elements.

<!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() {
					$("td:first").html("Hello <b>world!</b>");
				});
			});
		</script>
	</head>
	<body>

		<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>
		<button>修改第一个td单元格的值</button>
	</body>
</html>

Copy after login

How to modify cell value in jquery

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

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