jQuery（删除，添加，批量删除，全选，全不选）案例

来源：互联网发布：人工智能杂志中文编辑：程序博客网时间：2024/05/18 01:49
效果图
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>        </style>    </head>    <body>        <center>            <table cellpadding="5px" cellspacing="1px">                <tr>                    <td>                    用户名:<input type="text" id="name"/><span id="sp1"></span>                    </td>                </tr>                <tr>                    <td>                    密&nbsp;&nbsp; 码:<input type="text" id="pwd"/><span id="sp2"></span>                    </td>                </tr>                <tr>                    <td align="center">                        <input type="button" value="添加" onclick="add()"/>                    </td>                </tr>            </table>            <table id="ta" width="300px" border="1px" cellspacing="0px" cellpadding="1px">                <tr>                    <td colspan="4" align="center">                         <input type="button" value="批量删除" onclick="pl()"/>&nbsp;&nbsp;                         <input type="button" value="全选" onclick="quanxuan()"/>&nbsp;&nbsp;                         <input type="button" value="反选" onclick="fanxuan()"/>&nbsp;&nbsp;                    </td>                    <tr align="center">                        <td width="50px"></td>                        <td>用户名</td>                        <td>密码</td>                        <td>操作</td>                    </tr>                </tr>            </table>        </center>            <script type="text/javascript">                //获取table对象                var ta=document.getElementById("ta");                //获取checked对象                var cb=document.getElementsByName("cb");                function add(){                    var name=document.getElementById("name");                    var pwd=document.getElementById("pwd");                    var sp1=document.getElementById("sp1");                    var sp2=document.getElementById("sp2");                    if(name.value==""||name.value==null){                        sp1.innerHTML="用户名不能为空";                        sp1.style.color="red";                    }                    else{                         sp1.innerHTML="";                         if(pwd.value==""||pwd.value==null){                         sp2.innerHTML="密码不能为空";                         sp2.style.color="red";                         }else{                             if(pwd.value.length>6){                                sp2.innerHTML="密码不能大于6位";                                sp2.style.color="red";                             }else{                                sp2.innerHTML="";                                //创建tr                                var tr1=document.createElement("tr");                                //创建td                                var td1=document.createElement("td");                                var td2=document.createElement("td");                                var td3=document.createElement("td");                                var td4=document.createElement("td");                                //给td添加属性                                td1.innerHTML="<input type='checkbox' name='cb' />"                                td2.innerHTML=name.value;                                td3.innerHTML=pwd.value;                                td4.innerHTML="<a href='#' style='text-decoration: none;' onclick='dele(this)'>删除</a>"                                //把td添加到tr                                tr1.setAttribute("align","center");                                tr1.appendChild(td1);                                tr1.appendChild(td2);                                tr1.appendChild(td3);                                tr1.appendChild(td4);                                //把tr添加到table                                ta.appendChild(tr1);                             }                         }                    }                }                function dele(t){                    //通过超链接获取父元素TD在获取父元素TR,之后删除TR                    var a=confirm("确定删除吗?");                    if(a){                        t.parentNode.parentNode.remove();                        alert("删除成功");                    }else{                        alert("谢谢保留");                    }                }                //全选的点击事件                function quanxuan(){                                        for(var i=0;i<cb.length;i++){                        cb[i].checked=true;                    }                }                //反选的点击事件                function fanxuan(){                    for(var i=0;i<cb.length;i++){                        cb[i].checked=!cb[i].checked;                    }                }                function pl(){                    //标识符                    var a=0;                    var arr=new Array();                    //循环判断有没有选择,如果有就a++                    for(var i=0;i<cb.length;i++){                        if(cb[i].checked){                            //因为删除会改变数组下标,所以把对象拿出来放到一个数组中                            arr[a]=cb[i].parentNode.parentNode;                            a++;                        }                                           }                    //判断如果标识符等于0就没有选中的                    if(a==0){                        alert("请至少选择一行");                    }else{                        //循环自己定义的数组,删除选中的TR                        for(var c=0;c<arr.length;c++){                            //alert(arr[c]);                            arr[c].remove();                        }                    }                }            </script>    </body></html>
阅读全文
0 0