JS中的添加删除记录练习--添加（包含思路）

最新推荐文章于 2022-10-24 19:17:50 发布

Fantasc

最新推荐文章于 2022-10-24 19:17:50 发布

阅读量180

点赞数 1

分类专栏： JS基础学习文章标签：员工信息表格提交添加功能删除操作 JavaScript

本文链接：https://blog.csdn.net/Fantasc/article/details/119454660

版权

JS基础学习专栏收录该内容

78 篇文章 8 订阅

订阅专栏

**
要求：在表格中输入员工信息，点击提交按钮将用户输入的员工信息添加到员工信息表格中。

思路：

因为要用到添加删除练习里面的代码，所以要结合着删除的功能代码一起看。
既然是要点击提交按钮，那第一步就会来获取到要点击的按钮，并为按钮绑定单击响应函数。
获取用户输入的员工的信息，因为是在input框中输入的，只要获取到input框中的内容就行，利用value属性来获取input框中的内容。
需要将用户的信息保存到表格的tr元素节点中，先通过createElement方法来创建一个tr元素，再创建四个td元素，因为最后一个td元素中包含一个a子节点，所以再创建一个a元素，然后通过createTextNode以及上面获取到的员工信息来创建对应的文本节点。
将文本节点设置为对应td的子节点，将a元素对应的文本设置为它的子节点，将a元素节点设置为td的子节点，再见所有的td节点设置为tr的子节点。为了使a元素节点生效，还要通过**a.href = “javascript:;”;**来为其添加href属性。
获取表格，在表格下有浏览器自动生成的tbody，原有的tr属性都在元素节点tbody下，新建的tr也应该放到tbody下，所以还要通过getElementsByTagName获取tbody，因为返回的是一个数组，当前的table中只有一个tbody，所以取索引为0的一个即可。
最后通过**appendChild()**方法将创建好的tr设置为tbody的子节点即可。

练习代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/cdtest.css"/>
    <title>Document</title>

    <script type="text/javascript">
        window.onload = function(){
            /* 
                1.点击超链接，删除一个员工的信息 
            */
            //获取页面中所有的超链接元素
            var As = document.getElementsByTagName("a");
            //为每一个超链接绑定单击响应函数
            for (var i = 0; i < As.length; i++) {
                As[i].onclick = function(){//赋值的是对象，而不是返回值，所以delA后面没有括号
                    /* 
                       点击超链接，删除对应的那行用户的数据
                    */

                    //通过遍历得到的a元素获取当前的tr
                    var tr = this.parentNode.parentNode;//这里我们点击的是哪个超链接，this就是谁
                    //通过tr元素获取要删除的用户的名字
                    var name = tr.getElementsByTagName("td")[0].innerHTML;

                    //删除之前弹出提示框,如果用alert的话不管如何，对应的元素都会被删除掉
                    // alert("是否要删除？");

                    /* confirm用于弹出一个带有确认和取消按钮的提示框，需要一个字符串作为参数，
                    该字符串将会作为提示文字显示，如果用户点击确认则返回true，点击取消则返回false 
                    */
                    var flag = confirm("确认删除"+ name + "吗？");

                    // tr.parentNode.removeChild(tr);//删除tr

                    //判断confirm的返回值，如果用户点击了确定，则执行删除操作，否则不执行删除操作
                    if(flag){
                        //删除tr对应用户的信息
                        tr.parentNode.removeChild(tr);
                    }

                    /* 
                        点击超链接或跳转页面，这个是超链接的默认行为，我们的操作不需要超链接出现默认行为
                        可以在超链接响应函数的最后return false来取消超链接跳转页面的默认行为
                        或者在a标签中加入href="javascript:;"
                    */
                    return false;//用来取消在点击超链接的时候自动跳转
                }
            }


            /* 
                2.输入员工信息，点击提交按钮将员工的信息添加到表格中
            注意：以下的代码中没有将input写到表单里，如果写到了表单里，需要取消提交表单的默认行为
                - 为提交按钮绑定单击函数
            */

            //获取添加按钮
            var addEmpButton = document.getElementById("addEmpButton");
            addEmpButton.onclick = function(){
                // alert("成功绑定");
                //获取用户填写的员工信息
                var name = document.getElementById("empName").value;//文本框的内容就是value属性
                var email = document.getElementById("email").value;
                var salary = document.getElementById("salary").value;
                // alert(name+","+email+","+salary);

                //将获取到的用户信息保存到tr中
                //创建一个tr
                var tr = document.createElement("tr");                 
                //创建四个td
                var nameTd = document.createElement("td");
                var emailTd = document.createElement("td");
                var salaryTd = document.createElement("td");
                var aTd = document.createElement("td");
                //创建a
                var a = document.createElement("a");
                //创建文本节点
                var nameText = document.createTextNode(name); 
                var emailText = document.createTextNode(email); 
                var salaryText = document.createTextNode(salary); 
                var deleteText = document.createTextNode("Delete");
                //将文本节点添加到td中
                nameTd.appendChild(nameText);
                emailTd.appendChild(emailText);
                salaryTd.appendChild(salaryText);
                //向a中添加文本节点
                a.appendChild(deleteText);
                //将a添加到td中
                aTd.appendChild(a);
                //将td添加到tr中
                tr.appendChild(nameTd);
                tr.appendChild(emailTd);
                tr.appendChild(salaryTd);
                tr.appendChild(aTd)
                //向a中添加href属性
                a.href = "javascript:;"
                //为新添加的a绑定单击函数
                a.onclick = delA;

                //获取table
                var employeeTable = document.getElementById("employeeTable");

                //获取employeeTable中的tbody,返回的是一个数组
                var tbody = employeeTable.getElementsByTagName("tbody")[0];
                
                //employeeTable.appendChild(tr);//用这种方式的话我们添加的内容会在tbody(浏览器自动创建的，在缓存里)外面
                tbody.appendChild(tr);//tbody是浏览器创建的
            };
        };
    </script>
</head>
<body>
    <table id="employeeTable" cellspacing="0">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>Tom@tom.com</td>
            <td>3000</td>
            <td><a href="deleteEmp?id=001">Delete</a></td>
        </tr>
        <tr>
            <td>Jim</td>
            <td>Jim@Jim.com</td>
            <td>5000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
        <tr>
            <td>smith</td>
            <td>Smith@smith.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=003">Delete</a></td>
        </tr>
    </table>

    <div id="formDiv">
        <h2>添加新员工</h2>

        <table>
            <tr>
                <td class="word">name:</td>
                <td class="inp">
                    <input type="text" id="empName" name="empName"/>
                </td>
            </tr>
            <tr>
                <td class="word">email:</td>
                <td class="inp">
                    <input type="text" id="email" name="email"/>
                </td>
            </tr>
            <tr>
                <td class="word">salary:</td>
                <td class="inp">
                    <input type="text" id="salary" name="salary"/>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton" value="abc">submit</button>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

以上代码写起来比较麻烦，所以对其进行了优化，将删除tr的函数封装了出来方便使用，以及用innerHTML属性来简化了创建tr的过程。如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/cdtest.css"/>
    <title>Document</title>

    <script type="text/javascript">
        /* 
            删除tr的响应函数
        */
        function delA(a,fun){
            var tr = this.parentNode.parentNode;//这里我们点击的是哪个超链接，this就是谁
            var name = tr.getElementsByTagName("td")[0].innerHTML;
            var flag = confirm("确认删除"+ name + "吗？");
            if(flag){
                tr.parentNode.removeChild(tr);
            }
            return false;
        }

        window.onload = function(){
            /* 
                1.点击超链接，删除一个员工的信息 
            */

            //获取页面中所有的超链接元素
            var As = document.getElementsByTagName("a");

            //为每一个超链接绑定单击响应函数
            for (var i = 0; i < As.length; i++) {
                As[i].onclick = delA;//赋值的是对象，而不是返回值，所以delA后面没有括号

            }


            /* 
                2.输入员工信息，点击提交按钮将员工的信息添加到表格中
            注意：以下的代码中没有将input写到表单里，如果写到了表单里，需要取消提交表单的默认行为
                - 为提交按钮绑定单击函数
            */

            //获取添加按钮
            var addEmpButton = document.getElementById("addEmpButton");
            addEmpButton.onclick = function(){
                // alert("成功绑定");
                //获取用户填写的员工信息
                var name = document.getElementById("empName").value;//文本框的内容就是value属性
                var email = document.getElementById("email").value;
                var salary = document.getElementById("salary").value;
                // alert(name+","+email+","+salary);

                //创建一个tr，将获取到的用户信息保存到tr中
                var tr = document.createElement("tr");

                //设置tr中的内容
                tr.innerHTML = "<td>"+name+"</td>"+
                               "<td>"+email+"</td>"+
                               "<td>"+salary+"</td>"+
                               "<td><a href = 'javascript:;'>Delete</a></td>";
                //获取刚添加的a,再为其绑定单击响应函数
                var a = tr.getElementsByTagName("a")[0];
                a.onclick = delA;

                //获取table
                var employeeTable = document.getElementById("employeeTable");

                //获取employeeTable中的tbody,返回的是一个数组
                var tbody = employeeTable.getElementsByTagName("tbody")[0];

                //employeeTable.appendChild(tr);//用这种方式的话我们添加的内容会在tbody(浏览器自动创建的，在缓存里)外面
                tbody.appendChild(tr);

            };
        };
    </script>
</head>
<body>
    <table id="employeeTable" cellspacing="0">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>Tom@tom.com</td>
            <td>3000</td>
            <td><a href="deleteEmp?id=001">Delete</a></td>
        </tr>
        <tr>
            <td>Jim</td>
            <td>Jim@Jim.com</td>
            <td>5000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
        <tr>
            <td>smith</td>
            <td>Smith@smith.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=003">Delete</a></td>
        </tr>
    </table>

    <div id="formDiv">
        <h2>添加新员工</h2>

        <table>
            <tr>
                <td class="word">name:</td>
                <td class="inp">
                    <input type="text" id="empName" name="empName"/>
                </td>
            </tr>
            <tr>
                <td class="word">email:</td>
                <td class="inp">
                    <input type="text" id="email" name="email"/>
                </td>
            </tr>
            <tr>
                <td class="word">salary:</td>
                <td class="inp">
                    <input type="text" id="salary" name="salary"/>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton" value="abc">submit</button>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

对应的css文件如下：

*{
    margin: 0;
    padding: 0;
}
tr td th{
    margin: 0;
    padding: 0;
}
#employeeTable{
    margin: 50px auto;
}
#employeeTable td{
    border: 1px solid black;
}
#employeeTable th{
    border: 1px solid black;
}
#formDiv{
    width: 220px;
    border: 1px solid black;
    padding: 20px;
    margin: 0 auto;
}

Fantasc

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS中的添加删除记录练习--添加（包含思路）

**要求：在表格中输入员工信息，点击提交按钮将用户输入的员工信息添加到员工信息表格中。思路：因为要用到添加删除练习里面的代码，所以要结合着删除的功能代码一起看。既然是要点击提交按钮，那第一步就会来获取到要点击的按钮，并为按钮绑定单击响应函数。获取用户输入的员工的信息，因为是在input框中输入的，只要获取到input框中的内容就行，利用value属性来获取input框中的内容。需要将用户的信息保存到表格的tr元素节点中，先通过createElement方法来创建一个tr元素，再创建四个td元素
复制链接

扫一扫

专栏目录