jqueryでtr属性値を変更する方法-フロントエンドQ&A-php.cn

jqueryでtr属性値を変更する方法

青灯夜游

リリース： 2023-01-28 15:48:10

オリジナル

1908 人が閲覧しました

tr 属性値を変更するための Jquery メソッド: 1. jquery セレクターを使用して、指定された tr 要素を取得します。構文 "$("selector")" は、指定された tr 要素を含む jquery オブジェクトを返します。2 attr() 関数を使用して、指定された tr 要素オブジェクトの属性値を変更します。構文は、「tr 要素 object.attr("属性名", "新しい属性値");」または「tr 要素 object.attr({属性1: "新しい値"、属性 2: "新しい値"....});"。

jqueryでtr属性値を変更する方法

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

tr 要素

タグは、HTML テーブル内の行を定義します。

要素には 1 つ以上のまたは要素が含まれます。

#jquery が tr 属性値を変更する方法

実装のアイデア:

##指定したテーブルのtr要素を取得
取得したtr要素の属性値を変更

##実装方法:

```
$("选择器")
```
ログイン後にコピー

//单个属性
tr元素对象.attr("属性名","新属性值");

//多个个属性
tr元素对象.attr({属性1:"新值",属性2:"新值"....});

ログイン後にコピー

実装例:

変更最初の tr 要素の class 属性の値

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.6.3.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").on("click", function() {
					$("tr:nth-child(1)").attr("class", "tr2");
				});
			});
		</script>
		<style>
			.tr1 {
				color: green;
			}
			.tr2 {
				color: red;
				background-color: blanchedalmond;
			}
		</style>
	</head>

	<body class="ancestors">
		<table border="1">
			<tr class="tr1">
				<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>修改第一个tr元素class属性的值</button>
	</body>

</html>

ログイン後にコピー

jqueryでtr属性値を変更する方法 [推奨学習: