jq表格的增加与删除

2023-09-23 27 0

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>名单</title><script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script><style type="text/css">#table2{width: 800px;	border-collapse: collapse;text-align: center;}</style><script type="text/javascript">function add(){//添加一行var name=$("#name").val();var age=$("#age").val();var address=$("#address").val();//创建一行$("#table2").append($("<tr><td><input type='checkbox' class='checkbox'/></td><td>"+name+"</td><td>"+age+"</td><td>"+address+"</td><td><a href='javascript:void(0)' οnclick='del(this)'>删除</a></td></tr>"));}function del(obj){//删除一行$(obj).parent().parent().remove();}var clicktime=1;function checkAll(){//全选var tr=$("#checkbox11");if(clicktime%2){for(var i=0;i<($("#table2 tr").length-1);i++){$("#table2 .checkbox")[i].checked=true;}}else{for(var i=0;i<($("#table2 tr").length-1);i++){$("#table2 .checkbox")[i].checked=false;}}clicktime++;}function delAll(){//批量删除$("#table2 .checkbox:checked").parent().parent().remove();}</script></head><body><table><tr><td>姓名<input type="text" id="name" /></td><td>年龄<input type="text" id="age" /></td><td>住址<input type="text" id="address" /></td><td><input type="button" name="add" id="add" value="添加" οnclick="add()" /></td><td><input type="button" name="add" id="add" value="批量删除" οnclick="delAll()" /></td></tr></table><table id="table2" border="1"><tr><th><input type="checkbox" name="" id="checkbox11" value="全选" οnclick="checkAll()"/></th><th>姓名</th><th>年龄</th><th>住址</th><th>操作</th></tr><tr><th><input type="checkbox" class="checkbox"/></th><td>张三</td><td>13</td><td>上海</td><td><a href="javascript:void(0)" οnclick="del(this)">删除</a></td></tr></table></body>
</html>

代码编程
赞赏

相关文章

springBoot + activiti6+在线编辑器 整合 附带flowable的demo
并发编程之两阶段终止模式 保护性暂停 顺序与交替模式 总结
事务实践 手动创建提交事务 复现幻读 枚举类应用
Excel读取并利用工具自动建表 已完善
JS处理小数点后数的方法
笔记_ionic2 app从创建到打包