添加表单姓名邮箱

最新推荐文章于 2022-05-18 21:59:56 发布

ZXZ96

最新推荐文章于 2022-05-18 21:59:56 发布

阅读量709

点赞数

本文链接：https://blog.csdn.net/qq_40056429/article/details/78767195

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.tr1{
background-color: yellow;
}
.tr1 td{
color: red;
}

</style>
</head>
<body>
用户：<input type="text" id="name"/>
密码:<input type="text" id="pass" />
邮箱:<input type="text" id="emal" />
<input type="button" value="添加" id="add" />
<input type="button" value="批量删除" id="piliang"/>

<hr />
<table border="1px" cellspacing="0px" cellpadding="0px" id="t">
<tr class="tr1">
<td><input type="checkbox" id="box"></td>
<td>用户名</td>
<td>密码</td>
<td>邮箱</td>
<td>操作</td>
</tr>

</table>

<script type="text/javascript">
$("#add").click(function(){
var name=$("#name").val();
if(name==""){
alert("用户名不能为空");
return;
}

var pass=$("#pass").val();
if(pass==""){
alert("密码不能为空");
return;
} else if (pass.length>6){
alert("密码不能大于6位");
}

var emal=$("#emal").val();

$("#t").append("<tr><td><input type='checkbox' name='ck'></td><td>"+name+"</td><td>"+pass+"</td><td>"+emal+"</td><td><input type='button' value='删除' οnclick='dele(this)'></td></tr>")

})

function dele(t){
t.parentNode.parentNode.remove();
}

$("#piliang").click(function(){
var cbs=$("input[type=checkbox]:checked");
if(cbs.length==0){
alert("請至少選擇一個")
return
}
for (var i =0;i<cbs.length;i++) {
var cb = cbs[i];
cb.parentNode.parentNode.remove();
}

if (cbs.length==1) {
$("#table").empty();
}

})

var flag=true;
$("#box").click(function(){
var ck=$("input[type=checkbox]")

for(var i=0;i<ck.length;i++){

ck[i].checked=flag;

}
flag=!flag;

})

</script>

</body>
</html>