Comment ajouter une ligne de tableaux dans jquery

青灯夜游
Libérer: 2022-05-30 14:49:38
original
2835 Les gens l'ont consulté

Deux méthodes : 1. Utilisez append() pour ajouter des sous-éléments tr, la syntaxe est "$("table").append("

td data")". 2. Utilisez appendTo(), la syntaxe est "$("td data").appendTo("table");".

Comment ajouter une ligne de tableaux dans jquery

L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.10.2, ordinateur Dell G3.

Pour ajouter une ligne de données au tableau, ajoutez le sous-élément tr à l'élément table. Voici deux méthodes :

Méthode 1 : méthode append()

La méthode append() insère du contenu jusqu'à la "fin" à l'intérieur de l'élément sélectionné.

$(A).append(B)
Copier après la connexion

signifie insérer B à la fin de A.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").on("click", function() {
					$("table").append("<tr><td>数据</td><td>数据</td></tr>");
				});
			});
		</script>
	</head>

	<body class="ancestors">
		<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>
Copier après la connexion

Comment ajouter une ligne de tableaux dans jquery

Méthode 2 : méthode appendTo()

appendTo( ) et append() Bien que ces deux méthodes aient des fonctions similaires, elles insèrent toutes deux du contenu jusqu'à la "fin" à l'intérieur de l'élément sélectionné, mais les deux opérandes sont inversés.

$(A).appendTo(B)
Copier après la connexion
  • $(A).appendTo(B) signifie insérer A à la fin de B.

<script>
	$(document).ready(function() {
		$("button").on("click", function() {
			$("<tr><td>数据</td><td>数据</td></tr>").appendTo("table");
		});
	});
</script>
Copier après la connexion

Comment ajouter une ligne de tableaux dans jquery

【Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo web front-end

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal