jquery单元格组合项目

最新推荐文章于 2024-07-24 10:40:52 发布

IT帮

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量225

点赞数

分类专栏： # HTML表格 # Jquery # html 文章标签： jquery 前端表格 html js

本文链接：https://blog.csdn.net/python183360/article/details/90068448

版权

Jquery 同时被 3 个专栏收录

5 篇文章 1 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

HTML表格

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>userDemo</title>
	<script src="jquery-3.3.1.js"></script>
</head>
<body>
	<h3><center>添加用户</center></h3>
	<br>
	<center>
		姓名：<input type="text" id="name" name="name" />  
		邮箱：<input type="text" id="mail" name="mail" />  
		电话：<input type="text" id="tel" name="tel" />  
		<br><br>
		<button id="adduser">提交</button>
		<input type="reset" value="重置">
		<br><br>
		<hr>
		<br><br>
		<table id="usertable" border="1" cellpadding="5" cellspacing="0">
			<tobady>
				<tr>
					<th>姓名</th>
				    <th>邮箱</th>
				    <th>电话</th>
				    <th>操作</th>
				</tr>
			</tobady>
		</table>
	</center>
</body>
</html>
<script>
	$("#adduser").click(function(){
		获取本的值
		var username=$("#name").val();
		var email=$("#mail").val();
		var tel=$("#tel").val();
		
		// 创建<tr>
		var $nametd=$("<td/>");
		  $nametd.text(username);
		var $emailtd=$("<td/>");
		  $emailtd.text(email);	
		var $teltd=$("<td/>");
		  $teltd.text(tel);
		
		var $a=$("<a></a>");
			$a.attr("href","userDemo.html?id"+username);
			$a.text("删除");
			
			// 把a标签增加到td里
			var $atd=$("<td/>");
				$atd.append($a);
				
		// 创建tr,在tr上添加td
		var $tr=$("<tr/>");
			$tr.append($nametd);
			$tr.append($emailtd);
			$tr.append($teltd);
			$tr.append($atd);
		//创建<table>。在table上添加<tr> 
		// 获取table下的所有子元素,eq(0),获取第一个
		$("#usertable").children().eq(0).append($tr);
		// 删除
		$a.click(function(){
			return delTr($a);//调用函数
		});
	});
	
	// 删除tr方法
	function delTr($obj){
		// 获取删除用户的名字
		var nameval=$obj.parent().parent().children().eq(0).text();
		var flag=window.confirm("你真的要删除["+nameval+"]这个用户吗");
		if(!flag){
			return false;
		}
		// 删除tr
		$obj.parent().parent().remove();
		// return true;//执行href的地址
		return false;
	}
</script>

页面显示

IT帮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery单元格组合项目

<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compati...
复制链接

扫一扫