JavaScript Dom 案例-动态表格的添加和删除

首先生成html、css样式

html代码如下:

<body>
    <table id="employeeTable">
        <tr>
            <th>name</th>
            <th>email</th>
            <th>salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>[email protected]</td>
            <td>5000</td>
            <td><a href="deletEmp?id=001">delete</a></td>
        </tr>
        <tr>
            <td>jm</td>
            <td>[email protected]</td>
            <td>5000</td>
            <td><a href="deletEmp?id=001">delete</a></td>
        </tr>
        <tr>
            <td>pom</td>
            <td>[email protected]</td>
            <td>5000</td>
            <td><a href="deletEmp?id=001">delete</a></td>
        </tr>
    </table>
    name:<input type="text" id="empName"><br>
    email:<input type="text" id="email"><br>
    salary:<input type="text" id="salary"><br>
    <button type="submit" id="addEmpButton">submit</button>
</body>

css代码如下:

<style>
        table {
            border-collapse: collapse;
            margin-bottom: 100px;
            width: 300px;
            height: 100px;

        }

        th {
            border: 1px solid red;
        }

        td {
            border: 1px solid red;
            height: 30px;

        }
    </style>

下面添加js代码进行添加删除操作:

<script>
       // 删除事件,首先获取元素a我们需要点击a元素来删除指定的内容
        let allA = document.getElementsByTagName('a');//获取a元素
        // 利用for循环为每个链接绑定一个单击事件
        for (let i = 0; i < allA.length; i++) {
            allA[i].onclick = delA;//直接把delA这个函数拿过来
         //delA是单独生成的一个函数方法能够节省大量重复代码,这里我们是直接把这个方法拿过来用
        }

        // 删除tr给a添加单击事件
        function delA() {
            // 点击超链接后要删除该行
            // 获取tr
            let tr = this.parentNode.parentNode;


            // 获取要删除的员工名字这里需要获取name文本框的内容
            let name = tr.getElementsByTagName('td')[0].innerHTML;


            // 删除之前弹出一个提示框confirm()用于弹出一个带有确认和取消按钮的提示框
            // 如果用户点击确认返回true;如果点击取消返回false
            let fa = confirm('确认删除' + name + '吗');


            //    判断用户点击确认,如果点击确认进入判断
            if (fa) {
                // 删除tr  removeChild()
                tr.parentNode.removeChild(tr);
            }



            //解决点击后跳转页面,默认行为可以利用响应函数最后return false取消默认 
            return false;
        }

        // 添加员工功能
        // 点击submit按钮以后将员工的信息添加到表格中
        // 这里第一步获取提交按钮
        let addEmpButton = document.getElementById('addEmpButton');


        //  给提交按钮绑定事件
        addEmpButton.addEventListener('click', function () {
            // 获取三个文本框内用户输入的值,也就是vlaue值;
            let name = document.getElementById('empName').value;
            let email = document.getElementById('email').value;
            let salary = document.getElementById('salary').value;
            //需要创建一个元素把用户输入 的内容添加到tr元素内
            let tr = document.createElement('tr');

            // 设置tr中内容这里直接利用innerHTML创建元素以及内容格式如下:
            tr.innerHTML =
                '<td>' + name + '</td>' +
                '<td>' + email + '</td>' +
                '<td>' + salary + '</td>' +
                "<td><a href='javascript:;'>Delete</a></td>";
            //因为超链接是固定值直接添加一个超链接给td
            // 这里需要给超链接a绑定事件,所以先要获取tr内的a
            let a = tr.getElementsByTagName('a')[0];
//这里是直接把点击事件另外生成了函数,直接a.onclick =delA这个函数方法,这里是赋值
            a.onclick = delA;


            // 我们前面生成了tr元素以及内容,这里需要把tr添加到tbody内,所以先要获取table然后获取tbody,这里的tbody是浏览器自动生成的我们没办法直接获取元素
            let employeeTable = document.getElementById('employeeTable');//获取table

            // 获取table中的tbody需要吧tr放到tbody里面
            let tbody = employeeTable.getElementsByTagName('tbody')[0];//获取tbody元素因为getElementsByTagName返回的是一个数组所以我们需要利用索引来找到tbdoy;
            // 这里我们获取到了tbody,把tr添加到tbody
            tbody.appendChild(tr);//这里就完成了添加事件

        });


       
    </script>

具体的思路在代码注释中,可以仔细研究

JavaScript Dom 案例-动态表格的添加和删除

首先生成html、css样式

html代码如下:

css代码如下:

猜你喜欢