使用JavaScript动态创建表格并填充表单数据-优快云博客

本文链接：https://blog.youkuaiyun.com/wanglinuo521/article/details/78995311

本文介绍如何利用JavaScript在网页中动态生成表格，并将表单数据填充到表格中，适用于前端开发人员实现动态展示数据的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8" />
	<title></title>
	<script src="js/jquery-1.11.0.min.js"></script>
	<script>
	$(function() {
	// $(".btn_del").on('click', function() {
	// alert("123");
	// })
	$(document).on('click', '.btn_del', function() {
	$(this).parent().parent().remove()
	var tr = $("tr");
	if(tr.length == 1) {
	$(".table").hide()
	}
	})

	})
	</script>
	<style>
	.table {
	width: 700px;
	}

	.table tr th {
	text-align: center;
	color: red;
	background-color: yellow;
	}

	.table td {
	border: 1px solid black;
	text-align: center;
	width: 140px;
	}
	</style>
	</head>

	<body>
	<hr /> 用户
	<input type="text" class="user" id="user" />密码<input type="password" class="pwd" id="pwd" /> 邮箱
	<input type="text" class="eml" id="eml" /><input type="button" id="btn" value="添加" />
	<input type="button" value="批量删除" id="ip_del" />
	<hr />
	<table class="table" cellpadding="0px" cellspacing="0px">
	<tr id="tr">
	<th><input type="checkbox" id="cb_one" class="cb_one" /></th>
	<th>用户名</th>
	<th>密码</th>
	<th>邮箱</th>
	<th>操作</th>
	</tr>
	</table>
	<script>
	$(".table").hide();
	$("#btn").click(function() {
	$(".table").show();
	var user = $("#user").val();
	var pwd = $("#pwd").val();
	var eml = $("#eml").val();
	var $tr = $("<tr><td><input type='checkbox' class='cb_ins'/></td><td>" + user + "</td><td>" + pwd + "</td><td>" + eml + "</td><td><button class='btn_del'>删除</button></td></tr>")
	$(".table").append($tr);
	/*$(".btn_del").on('click', function() {
	$(this).parent().parent().remove()
	})*/
	})
	var flag = true;
	$("#cb_one").click(function() {
	var aa = $("input[type=checkbox]")
	for(i = 0; i < aa.length; i++) {
	aa[i].checked = flag;
	}
	flag = !flag;
	})
	$("#ip_del").click(function() {
	var $tr = $("input[type=checkbox]:checked");
	if($tr.length == 0) {
	alert("至少选一行")
	}
	for(i = 0; i < $tr.length; i++) {
	if(i == 0) {
	var td = $($tr[i])
	var aa = td.parent().parent();
	if(aa.attr("id") != "tr") {
	alert(aa)
	td.parent().parent().remove();
	}
	} else {
	$tr[i].parentNode.parentNode.remove();
	}

	}
	var $tr = $("input[type=checkbox]");
	if($tr.length == 1) {
	$(".table").hide();
	}
	})
	</script>
	</body>

	</html>