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

最新推荐文章于 2023-01-08 21:12:54 发布

原创最新推荐文章于 2023-01-08 21:12:54 发布 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

本文将展示如何使用jQuery高效地进行DOM操作，包括删除元素、添加元素、批量删除元素以及实现全选和全不选的功能。通过实例代码，深入理解jQuery在DOM操作中的强大功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

<!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>