[JavaScript] 给 HTML 页面实现逐行内容的动态添加

1. 主要功能

按要求在给定的 HTML 页面中实现指定功能。
在输入框输入信息，点击添加的时候，动态添加一行内容。
点击删除的时候，删除被勾选的行。

2. 给定的 HTML 页面

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>给HTML页面实现逐行内容的动态添加</title>
</head>
<body>
<table width="400" border="1" id="table" align="center" style="border-collapse: collapse">
    <caption><h3>用户信息列表</h3></caption>
    <tr>
        <th>选择</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>张三</td>
        <td>男</td>
        <td>18</td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>李四</td>
        <td>女</td>
        <td>20</td>
    </tr>
</table>
<div align="center">
    姓名<input type="text" name="name" value=""/><br/>
    性别<input type="text" name="gender" value=""/><br/>
    年龄<input type="text" name="age" value=""/><br/>
    <button>添加</button>
    <button>删除</button>
</div>
</body>
</html>

3. 参考答案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>参考答案</title>
    <script type="text/javascript">
        function addRow() {
            //获取输入框的姓名
            let name = document.querySelectorAll("[name=name]")[0].value;
            //获取性别
            let gender = document.querySelectorAll("[name=gender]")[0].value;
            //获取年龄
            let age = document.querySelectorAll("[name=age]")[0].value;
            if(name=="" || gender=="" || age==""){
                return;
            }
            //创建tr元素
            let tr = document.createElement("tr");
            //创建单元格
            tr.innerHTML = `<td><input type="checkbox"/></td><td>${name}</td><td>${gender}</td><td>${age}</td>`;
            //往表格中添加tr元素
            let table = document.querySelector("#table");
            table.appendChild(tr);
            //清空输入框
            document.querySelectorAll("[name=name]")[0].value = "";
            document.querySelectorAll("[name=gender]")[0].value = "";
            document.querySelectorAll("[name=age]")[0].value = "";
        }

        function deleteRows() {
            //选择所有checkbox元素
            let ckElements = document.querySelectorAll("[type=checkbox]");
            //遍历获取所有被勾选的
            for(let ckbox of ckElements){
                //判断是否选中
                if(ckbox.checked){
                    //得到tr元素
                    let tr = ckbox.parentElement.parentElement;
                    //删除tr元素
                    tr.outerHTML = "";
                }
            }
        }

    </script>
</head>
<body>

<table width="400" border="1" id="table" align="center" style="border-collapse: collapse">
    <caption><h3>用户信息列表</h3></caption>
    <tr>
        <th>选择</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>张三</td>
        <td>男</td>
        <td>18</td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>李四</td>
        <td>女</td>
        <td>20</td>
    </tr>
</table>
<div align="center">
    姓名<input type="text" name="name" value=""/><br/>
    性别<input type="text" name="gender" value=""/><br/>
    年龄<input type="text" name="age" value=""/><br/>
    <button onclick="addRow()">添加</button>
    <button onclick="deleteRows()">删除</button>
</div>
</body>
</html>

效果图：

原文链接：https://qwert.blog.csdn.net/article/details/105422413

Regino

发布了369 篇原创文章 · 获赞 381 · 访问量 2万+

私信关注

[JavaScript] 给 HTML 页面实现逐行内容的动态添加

目录

1. 主要功能

2. 给定的 HTML 页面

3. 参考答案

猜你喜欢