Jquery动态操作table表格

最新推荐文章于 2022-03-31 19:04:52 发布

茶凉了就别再续了

最新推荐文章于 2022-03-31 19:04:52 发布

阅读量1.2k

点赞数

分类专栏： javascript 文章标签： javascript jquery

本文链接：https://blog.csdn.net/blogluoqi/article/details/17854705

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

这篇博客介绍如何利用JavaScript库Jquery实现HTML表格的动态操作，包括添加和删除行的功能。用户输入姓名、学号和性别后，点击添加按钮，内容将被插入到表格中，同时限制最多添加20行。每行都有删除链接，点击可以移除对应行的数据。

摘要由CSDN通过智能技术生成

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态操作表格</title>
<script type="text/javascript" src="table/jquery.js"
	language="javascript"></script>
<script type="text/javascript">
	var count=0;
	function add(){
		var name=$("#name").val();
		var card=$("#card").val();
		var sex=$("#sex").val();
		//判断只能添加二十个
	if(count==20){
		alert("不能再加了");
	}else{
	count++;
	//追加
	$("table").append("<tr id="+count+"><td>"+name+"</td>"+
		"<td>"+card+"</td>"+"<td>"+sex+"</td>"+"<td>
		<a href='javascript:del ("+count+")'>删除</a></td></tr>");
	}
}
//删除
function del(row){
	count--;
	$("#"+row).remove();
}
</script>
<style type="text/css">
table {
	border: 1px solid #00C;
	border-collapse: collapse;
	width: 600px;
	text-align: center;
}

table tr td {
	border: 1px solid #00C;
	border-collapse: collapse;
	width: 600px;
}
</style>
</head>
<body>
	名字
	<input type="text" id="name" /> 学号
	<input type="text" id="card" /> 性别
	<input type="text" id="sex" />
	<input type="button" οnclick="add()" value="添加" />
	<p></p>
	<table>
		<tr>
			<th>姓名</th>
			<th>学号</th>
			<th>性别</th>
			<th>操作</th>
		</tr>
	</table>
</body>
</html>