用户信息的添加与删除（表格）

最新推荐文章于 2023-05-26 15:17:14 发布

Dewey666

最新推荐文章于 2023-05-26 15:17:14 发布

阅读量666

点赞数

分类专栏：效果初现文章标签：删除整行数据 jQuery点击事件 jQuery创建标签 getElementById 添加与删除数据

本文链接：https://blog.csdn.net/IT666DHW/article/details/78231963

版权

效果初现专栏收录该内容

107 篇文章 3 订阅

订阅专栏

	<!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="../jquery-2.1.0.js"></script>
	<script type="text/javascript">
	$(function(){
	//用户信息提交时触发的点击事件
	$("#sub").click(function(){

	//获取添加的用户信息
	var name = $("#nameid").val();
	var tel = $("#telid").val();

	//正则表达式 search 判断输入内容是否包含@
	var email = $("#emailid").val();
	var v ="@";
	var s = email.search(v);
	var size = tel.length;

	//1. 点击添加按钮，获得用户姓名名称，验证不为空
	if(name == null \|\| name == ""){
	alert("用户姓名不能为空");
	}

	//2. 获得email，验证邮箱格式正确（包含@符号）
	else if(s<0){
	alert("邮箱格式不正确（必须包含@符号）");
	}

	//3. 获得电话，验证长度在7-11位之间
	else if( 0<size< 7 \|\| size > 11 ){
	alert("电话号码长度必须在7-11位之间");
	}
	else{
	//根据添加的信息创建表示列的双标签td（第一种方法）
	var $nametd = $("<td>"+name+"</td>");
	var $emailtd = $("<td>"+email+"</td>");
	var $teltd = $("<td>"+tel+"</td>");
	var $deletetd = $("<td/>");

	//创建根据用户姓名删除信息的td列超链接标签
	var $Del = $("<button>"+"Delete"+"</button>");
	//.prop()方法用于设置或返回当前jQuery对象所匹配的元素属性值
	$Del.prop("href","deletefrom?name="+name);
	//将删除的超链接标签放到“删除”列中
	$deletetd.append($Del);

	//根据添加的信息创建行标签tr
	var $tr = $("<tr></tr>");
	//把创建的列标签放到行标签tr中显示
	$tr.append($nametd).append($emailtd).append($teltd).append($deletetd);
	//把创建好的行标签tr放到表格主体中显示
	$("#tbody").append($tr);

	//通过超链接点击“删除”时，执行信息的删除方法操作
	$Del.click(function(){
	return deleteTr($Del);
	});

	//定义删除信息方法的函数操作
	function deleteTr($Del){
	//找到删除的超链接对应的元素父节点的子节点，并弹出提示框
	var name = $Del.parent().parent().children().eq(0).text();
	alert("您现在选择删除的用户是："+name);
	//弹出“是否确认删除”的提示对话框，设置标志位flag
	var flag = window.confirm("是否确认删除："+name);
	//判断标志位flag代表的情况是否正确
	if(flag){
	//确定删除时，就删除整行数据，表示flag为false。并弹出“用户信息已被删除”的提示
	$Del.parent().parent().remove();
	alert("用户 "+name+" 的信息已被删除");
	return false;
	}else{
	return false;
	}
	}
	}
	})
	});
	</script>
	</head>

	<body bgcolor="#66FF00">
	<center></center>
	<!-- 用户信息添加表 -->
	<table align="center" id="tableid" border="1px" width="400px" bordercolor="grey" cellpadding="1px" cellspacing="0px">
	<caption>用户信息表</caption> <br/> <br/>
	<thead align="center">
	<tr>
	<td align="right">姓名：</td>
	<td align="left"><input type="text" name="name" id="nameid" placeholder="请输入用户名" /></td>
	</tr>
	<tr>
	<td align="right">email：</td>
	<td align="left"><input type="email" name="email" id="emailid" placeholder="请输入邮箱号"/></td>
	</tr>
	<tr>
	<td align="right">电话：</td>
	<td align="left"><input type="tel" name="tel" id="telid" placeholder="请输入电话号码" /></td>
	</tr>
	<tr align="center">
	<td colspan="2"><input type="submit" value="提交" id="sub"/></td>
	</tr>
	</table> <br/><br/>

	<!-- 用户信息展示表 -->
	<table align="center" id="tableid" border="1px" width="400px" bordercolor="grey" cellpadding="1px" cellspacing="0px">
	<tr>
	<th>姓名</th>
	<th>email</th>
	<th>电话</th>
	<th>删除</th>
	</tr>
	</thead>
	<tbody id="tbody" align="center"></tbody>
	</table>
	</body>
	</html>

Dewey666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用户信息的添加与删除（表格）

<htmlxmlns="http://www.w3.org/1999/xhtml"><metahttp-equiv="Content-Type"content="text/html; charset=utf-8" />用户信息的添加与删除<scripttype="text/javascript"sr
复制链接

扫一扫