<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.1.js"></script>
<script>
$(document).ready(function(){
$("#ubtn").click(function(){
var uname1=$("#uname").val();
var uemal1=$("#uemal").val();
var upwd1=$("#upwd").val();
$("table").append("<tr><td><input type='checkbox' name='ck'/></td><td>"+uname1+"</td><td>"+upwd1+"</td><td>"+uemal1+"</td><td><button οnclick='del(this)'>删除</button></td></tr>")
$tr = $("<tr></tr>");
//向tr中添加元素
// $tr.append("<td><input type='checkbox' name='ck' /></td>");
// $tr.append("<td>"+uname1+"</td>");
// $tr.append("<td>"+upwd1+"</td>");
// $tr.append("<td>"+uemal1+"</td>");
// $tr.append("<button οnclick='del(this)'>删除</button>")
// //获取table并添加
// $("table").append($tr);
//
});
});
function del(bb){
// var $td = $(bb).parent();
// $td.remove();
$(bb).parent().parent().remove();
}
function xuan(cr){
var crr=$(":input[name='ck']");
for (var i = 0; i < crr.length; i++) {
crr[i].checked=cr.checked;
}
}
</script>
</head>
<body>
用户:<input type="text" id="uname"/>
密码:<input type="password" id="upwd"/>
邮箱:<input type="email" id="uemal"/>
<button id="ubtn">添加</button>
<table border="1" cellspacing="0"width="800px" style="margin:0 auto;margin-top: 20px;text-align: center;">
<tr style="background: yellow;color: red;">
<td><input type="checkbox" οnchange="xuan(this)"/></td>
<td>用户名</td>
<td>密码</td>
<td>邮箱</td>
<td>操作</td>
</tr>
<tr>
<td><input type="checkbox" name="ck"/></td>
<td>马云</td>
<td>123</td>
<td>123@qq.com</td>
<td><button οnclick="del(this)">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name="ck"/></td>
<td>马化腾</td>
<td>123</td>
<td>123@qq.com</td>
<td><button οnclick="del(this)">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name="ck"/></td>
<td>李彦宏</td>
<td>123</td>
<td>123@qq.com</td>
<td><button οnclick="del(this)">删除</button></td>
</tr>
</table>
</body>
</html>
jquery（添加+删除）
最新推荐文章于 2022-04-24 12:34:19 发布
扫一扫
3604
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
