JavaScript练习（八）——列表的添加删除操作

最新推荐文章于 2023-09-06 19:37:49 发布

秃头的毛睿

最新推荐文章于 2023-09-06 19:37:49 发布

阅读量557

点赞数

本文链接：https://blog.csdn.net/weixin_45927758/article/details/108680687

版权

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    #BiaoGe{
        left: 800px;
        top: 200px;
        position:absolute;
    }
    #TianJia{
        position: absolute;
        left: 800px;
        top: 500px;
        border: 1px solid;
        height: 300px;
        width: 500px;
    }
    h2{
        position: relative;
        left: 5px;
    }
    #but{
        position: relative;
        left: 80px;
        top: 30px;
        width: 70px;
        height: 40px;
    }
    </style>
    <script>
        window.onload=function(){
            //删除功能
             //获取所有超链接
             var allA=document.getElementsByTagName("a");
             //循环为每一个超链接绑定事件
             for(var i=0;i<allA.length;i++){
                 allA[i].onclick=function(){
                     //点击超链接之后需要删除超链接所在的那行
                     //我们点击超链接的this是它本身，删除该超链接所在的一行，由关系可以获取到<tr>标签
                     var tr=this.parentNode.parentNode;
                     //获取员工的名字
                     var name=tr.getElementsByTagName("td")[0].innerHTML;
                     //alert(name);
                     //alert(tr);
                     /*
                     confirm()用于弹出一个带有确认和取消按钮的提示框
                     需要一个字符串作为参数，该字符串将会作为提示文字显示出来
                     如果用户点击确认则会返回true，如果点击取消则返回false
                     */
                     var flag=confirm("确定删除"+name+"吗？");
                     if(flag){
                         tr.remove(tr);
                     }
                     return false;//由于超链接被点击了之后就会发生页面跳转，返回false会关闭这一默认行为
                 };
             }



             //添加功能
             //获取按钮
             var but = document.getElementById("but");
             but.onclick=function(){
                 //获取名字的输入
                 var xinm=document.getElementById("xinm").value;
                 //获取电话的输入
                 var dianh=document.getElementById("dianh").value;
                 //获取月薪的输入
                 var yuex=document.getElementById("yuex").value;
                 
                 //加一个判断，如果这三个有空串，则需要提醒
                 /*if(xinm=="")
                 alert("请输入姓名！");
                 else if(dianh=="")
                 alert("请输入电话！");
                 else if(yuex)
                 alert("请输入月薪！");*/
                 //alert(xinm+dianh+yuex);

                 //将获取的信息放入tr中
                 //创建一个tr
                 var newTr=document.createElement("tr");
                 //创建四个td
                 var newName=document.createElement("td");
                 var newNum=document.createElement("td");
                 var newSal=document.createElement("td");
                 var newA=document.createElement("td");
                 //注意还要创建一个a节点
                 var aL=document.createElement("a");
                 //创建四个文本节点
                 var nameText=document.createTextNode(xinm);
                 var numText=document.createTextNode(dianh);
                 var salText=document.createTextNode(yuex);
                 var lianJie=document.createTextNode("Delete");

                 //把前三个文本节点放入td节点中
                 newName.appendChild(nameText);
                 newNum.appendChild(numText);
                 newSal.appendChild(salText);

                 //把最后一个文本节点先放入超链接节点
                 aL.appendChild(lianJie);
                 aL.href="https://leetcode-cn.com/problems/min-cost-to-connect-all-points/";
                 aL.onclick=function(){
                    var tr=this.parentNode.parentNode;
                     var name=tr.getElementsByTagName("td")[0].innerHTML;
                     var flag=confirm("确定删除"+name+"吗？");
                     if(flag){
                         tr.remove(tr);
                     }
                     return false;
                 }
                 //再把整个超链接节点放入td节点当中
                 newA.appendChild(aL);
                 
                 //再把所有td节点放入tr节点当中
                 newTr.appendChild(newName);
                 newTr.appendChild(newNum);
                 newTr.appendChild(newSal);
                 newTr.appendChild(newA);

                 //获取table
                 var tab=document.getElementById("tab");
                 var tbody=tab.getElementsByTagName("tbody")[0];
                 tbody.appendChild(newTr);//我们发现table中还有一个未定义的元素叫做tbody，而且我发现form提交会出现些许的问题，所以改用div
             }
        };
    </script>
</head>

<body>
    <div id="BiaoGe">
        <table border="1" style="height: 200px;width: 500px;" id="tab">
            <tr>
                <th>名字</th>
                <th>电话</th>
                <th>月薪</th>
                <th> </th>
            </tr>
            <tr>
                <td>艾弗森</td>
                <td>1376490336</td>
                <td>12000</td>
                <td><a href="https://leetcode-cn.com/problems/min-cost-to-connect-all-points/">Delete</a></td>
            </tr>
            <tr>
                <td>涂博闻</td>
                <td>15926159660</td>
                <td>25000</td>
                <td><a href="https://leetcode-cn.com/problems/min-cost-to-connect-all-points/">Delete</a></td>
            </tr>
            <tr>
                <td>库里</td>
                <td>1584259733</td>
                <td>32000</td>
                <td><a href="https://leetcode-cn.com/problems/min-cost-to-connect-all-points/">Delete</a></td>
            </tr>
        </table>
    </div>

    <div id="TianJia">
        <h2>添加新成员</h2>
        <!--输入框-->
        <div style="position: relative;left: 150px;top: 25px;">
            姓名：<input id="xinm"/><br/>
            电话：<input id="dianh"/><br/>
            月薪：<input id="yuex"/><br/>
            <button id="but">提交</button>
        </div>
    </div>
</body>

</html>

1.在点击Delete链接的时候，由于超链接标签默认会跳转页面，所以绑定的函数返回false就会关闭这一行为。

2.点击超链接之后需要删除超链接所在的那行，我们点击超链接的this是它本身，删除该超链接所在的一行，由关系可以获取到<tr>标签。

3.添加功能的实现，这方面就是一个一个创建节点，然后使用appendChild添加过去，在做的途中我们发现table中还有一个未定义的元素叫做tbody，而且我发现form提交会出现些许的问题，所以改用div，之后回去学习怎么更加熟练的使用form表单提交。

添加

删除

秃头的毛睿

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript练习（八）——列表的添加删除操作

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #BiaoGe{ left: 800px; top: 200px; position:absolute; } #TianJia{ .
复制链接

扫一扫