表单添加 css

最新推荐文章于 2024-07-29 22:33:33 发布

原创最新推荐文章于 2024-07-29 22:33:33 发布 · 807 阅读

CC 4.0 BY-SA版权

本文介绍如何利用jQuery实现网页中动态添加表格数据的功能，并提供删除已添加数据的方法。通过简单的表单输入，用户可以向表格中添加姓名、邮箱及电话等信息。

<head>
	<!-- 引入jquery开发包 -->
	<script type="text/javascript" src="../libs/jquery-1.11.0.min.js"></script>
	<meta http-equiv="content-type" content="textml; charset=UTF-8">
	<script type="text/javascript">
	//页面加载完成
	$(function(){

	$("#addBtn").click(function(){


	var name = $("#name").val();
	var email = $("#email").val();
	var phone = $("#phone").val();
	var tr = $("<tr><td>"+name+"</td><td>"+email+"</td><td>"+phone+"</td><td><button onclick='clikc1(this)'>删除</button></td></tr>");
	$("table").append(tr);
	});

	});


	function clikc1(a){
	$(a).parent().parent().remove();
	}
	//var tr = $("<tr><td>"+name+"</td><td>"+email+"</td><td>"+phone+"</td><td><a href='#' onclick='deleteItem(this);'>删除</a></td></tr>");


	</script>
	</head>

	<body>
	<div align="center">
	<h3>添加用户</h3>
	<form>
	姓名 <input type="text" name="name" id="name"/>
	邮箱 <input type="text" name="email" id="email"/>
	电话 <input type="text" name="phone" id="phone"/> <br/>
	<input type="button" value="提交" id="addBtn" />
	</form>
	<hr/>
	<table border="1">
	<tr>
	<th>姓名</th>
	<th>email</th>
	<th>电话</th>
	<th>删除</th>
	</tr>

	</table>


	<a href="####" style="text-decoration: none;">测试</a>
	</div>
	</body>
	<ml>