<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title>练习</title> | |
<!--引入jqury--> | |
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> | |
<script type="text/javascript"> | |
//jquery的选择器,得到的是个数组,如果要使用某个标签对象,需要加上下标 | |
//因为id是唯一的,所以,id选择器可以省略 | |
//$("#add").通过选择器找到标签,click 绑定点击事件(function()事件触发之后的回调方法{ | |
$(document).ready(function() { | |
//将js代码写在这个方法里面ready | |
$("#add").click(function() { | |
var uname = $("#uname").val(); | |
if(uname == "") { | |
alert("名字不能为空") | |
return; | |
} | |
console.log(uname) | |
//将数据添加到表格里面--jquery创建标签 | |
var tr = "<tr><td><input type='checkbox'/></td><td>" + uname + "</td><td><input type='button' value='删除' οnclick='dele(this)'/></td></tr>"; | |
//,添加子标签 在父标签后面添加 | |
$("#table").append(tr); | |
}); | |
//批量删除 | |
$("#deleAll").click(function(){ | |
//删除选中的 | |
var cbs = $("[type=checkbox]:checked"); | |
if(cbs==null||cbs.length==0){ | |
alert("至少请选择一个") | |
return; | |
} | |
console.log(cbs) | |
for (var i = 0; i < cbs.length; i++) { | |
//根据cb 找到tr | |
var cb = cbs[i]; | |
var tr = cb.parentNode.parentNode; | |
tr.remove(); | |
} | |
}) | |
}); //ready 文档加载完毕后的回调 | |
function dele(t){ | |
var tr =t.parentNode.parentNode;//使用原生js | |
tr.remove(); | |
// var tr = t.parent().parent(); | |
// tr.remove() | |
} | |
</script> | |
</head> | |
<body> | |
<input type="text" name="" id="uname" value="" /> | |
<input type="button" name="" id="add" value="添加" /> | |
<input type="button" name="" id="deleAll" value="批量删除" /> | |
<table border="1px" id="table"> | |
<tr> | |
<td>选择</td> | |
<td>名字</td> | |
<td>删除</td> | |
</tr> | |
<tr> | |
<td><input type="checkbox" name="" id="" value="" /></td> | |
<td>川普</td> | |
<td><input type="button" value="删除" onclick="dele(this)"/></td> | |
</tr> | |
</table> | |
</body> | |
</html> |
添加/删除/批量删除
最新推荐文章于 2022-09-01 17:02:14 发布