JavaScript/JQuery(添加 /删除)
2018-01-07 19:09
357 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> table tr:nth-child(even){ background: #EEE;} </style> <script src="js/jquery-1.11.1.js"></script> <script> function chan(){ $("#cityz").siblings().remove(); var shi=[["西二旗","海淀区"],["承德市","邯郸市"]]; var sheng=$("#sheng").val(); var city=$("#city"); for (var i=0;i<shi[sheng].length;i++) { city.append("<option>"+shi[sheng][i]+"</option>"); } } function add () { var uname=$("#uname").val(); var sex=$("#sex option:selected").text(); var bir=$("#bir").val(); var sheng=$("#sheng option:selected").text(); var city=$("#city option:selected").val(); if (uname.length<3 || uname.length>20 || sex=="" || bir=="" || sheng=="请选择" || city=="请选择") { alert("输入信息有误!"); } else{ $("table").append("<tr><td><input type=\"checkbox\" name=\"ck\"/></td><td>"+uname+"</td><td>"+sex+"</td><td>"+bir+"</td><td>"+sheng+"-"+city+"</td><td><button onclick=\"del(this)\">删除</button></td></tr>"); } } function del(e){ e.parentNode.parentNode.remove(); } function delall(){ var checks=$(":checked[name=ck]"); if (checks.length==0) { alert("请至少选择一条删除!"); return; } for(var i in checks){ checks[i].parentNode.parentNode.remove(); } } function xuan(e){ var ckss=$("input[name=ck]"); for (var i in ckss) { ckss[i].checked=e.checked; } } function xuanall(){ var ckss=$("input[name=ck]") for(var i in ckss) { if (ckss[i].checked==false) { ckss[i].checked=true; } else{ ckss[i].checked=false; } } } </script> </head> <body> 姓名:<input id="uname" /> 性别:<select id="sex"><option>男</option><option>女</option></select> 生日:<input id="bir" type="date" /> 住址:<select id="sheng" onchange="chan()"> <option>请选择</option> <option value="0">北京</option> <option value="1">河北</option> </select> <select id="city"> <option id="cityz">请选择</option> </select><br /> <button onclick="add()">添加</button> <button onclick="xuanall()">全选/反选</button> <button onclick="delall()">批量删除</button> <table width="400" cellspacing="0" border="1"> <tr style="background-color: #999999;"> <th><input type="checkbox" id="cks" onchange="xuan(this)"/></th> <th>姓名</th> <th>性别</th> <th>生日</th> <th>住址</th> <th>删除 </th> </tr> </table> </body> </html>
相关文章推荐
- jQuery + JavaScript 实现的动态添加文本框功能 和 动态删除文本框功能(二)
- JavaScript(jQuery)动态添加/删除html列表
- JavaScript操作table(添加、删除、上移、下移、交换)_jQuery
- JavaScript(20)jQuery HTML 添加和删除元素
- javascript jquery 动态添加删除行 (兼容所有浏览器)
- JQuery上传插件Uploadify 带进度条添加 编辑 删除
- 利用jquery 给指定table 添加删除行
- 一个简单的jQuery例子,动态添加表格和删除
- Jquery实现select multiple左右添加和删除功能的简单实例
- 从零开始学 Web 之 jQuery(四)元素的创建添加与删除,自定义属性
- jQuery动态添加删除select项
- JavaScript动态添加删除表格行(支持FireFox)
- jQuery实现selected的添加删除
- jQuery 和 javascript 插入,复制,替换和删除节点
- JavaScript跨浏览器的添加删除事件绑定函数
- jQuery添加删除DOM元素方法详解
- javascript添加删除事件封装
- 读jQuery之十三 添加事件和删除事件的核心方法
- jQuery给指定的table动态添加删除行的操作方法
- 用Javascript动态添加删除HTML元素实例 (转载)