jqueryでセルの値を変更する方法-フロントエンドQ&A-php.cn

jqueryでセルの値を変更する方法

青灯夜游

リリース： 2022-06-10 16:19:23

オリジナル

3019 人が閲覧しました

2 つの変更方法: 1. "$(selector)" を使用して指定したセル要素 th または td を取得し、次に text() を使用して要素のコンテンツ値を変更します。構文 "$(selector) ).text( "Cell new value")" は、新しいテキストコンテンツのみを設定できます。 2. 指定されたセル要素 th または td を取得し、html() を使用して要素のコンテンツ値を変更します。構文は "$(selector).html("cell new value")" です。テキストを設定できます。 content またはラベルを含む innerHTML。

jqueryでセルの値を変更する方法

このチュートリアルの動作環境: Windows7 システム、jquery3.6.0 バージョン、Dell G3 コンピューター。

HTML では、表のセルは th 要素または td 要素によって定義されます

ヘッダーセル - ヘッダー情報が含まれます (
要素によって作成されます)

標準セル - (

要素によって作成された) データが含まれています

jquery はセルの値を変更します。つまり、変更するには 2 つの方法があります。 th または td 要素のコンテンツ:

#Use text()
Use html()

方法 1: text()

text() メソッドを使用して、選択した要素のテキストコンテンツを設定します。これにより、一致するすべての要素のコンテンツが上書きされます。

<!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>

ログイン後にコピー

jqueryでセルの値を変更する方法

方法 2: html()

html() メソッドを使用して、選択した要素 (innerHTML) のコンテンツを設定します。 )、一致するすべての要素の内容を書き換えます。

<!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>

ログイン後にコピー

jqueryでセルの値を変更する方法