—— Alone � ?? 2023-04-08 14:14 采纳率: 40%
浏览 152
已结题

表格动态添加和删除使用原生js

要求

img

1.严格使用素材所给布局
2.必须使用表单提交事件
3.必须将输入的数据存储在数组中，根据数组渲染表格内容
4.删除行的时候，必须将数组中数据也进行删除，不允许出现点击一次按钮，表格中出现多个行的场景
5.仅限使用原生js
6.对表单元素各项都有验证

  • 游戏名称为4~10个汉字
  • 开发公司必选
  • 适用人群必选
  • 游戏类别必选
  • 游戏描述必填
  • 将数据展示在表格中
  • 实现删除功能
  • 添加后清空表单元素

基本布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>表格动态添加和删除</title>
</head>

<body>
    <form action="http://www.baidu.com">
        <table>
            <caption>
                <h2>表格添加</h2>
            </caption>
            <tbody>
                <tr>
                    <td>游戏名称：</td>
                    <td><input type="text" name="gamename"></td>
                </tr>
                <tr>
                    <td>开发公司：</td>
                    <td>
                        <input type="radio" name="company" value="腾讯">腾讯
                        <input type="radio" name="company" value="暴雪">暴雪
                        <input type="radio" name="company" value="网易">网易
                        <input type="radio" name="company" value="任天堂">任天堂
                    </td>
                </tr>
                <tr>
                    <td>适用人群：</td>
                    <td>
                        <input type="checkbox" name="people" value="小学生">小学生
                        <input type="checkbox" name="people" value="大学生">大学生
                        <input type="checkbox" name="people" value="白领">白领
                        <input type="checkbox" name="people" value="老年人">老年人
                    </td>
                </tr>
                <tr>
                    <td>游戏类别：</td>
                    <td>
                        <select name="kind">
                            <option value="0">请选择游戏类别</option>
                            <option value="益智类">益智类</option>
                            <option value="动作类">动作类</option>
                            <option value="冒险类">冒险类</option>
                            <option value="策略类">策略类</option>
                            <option value="模拟类">模拟类</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>游戏描述：</td>
                    <td>
                        <textarea name="detail" cols="30" rows="10"></textarea>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="reset">
                        <input type="submit" value="添加">
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
    <table width=800 border=1>
        <caption>
            <h2>表格展示</h2>
        </caption>
        <thead>
            <tr>
                <th>游戏名称</th>
                <th>开发公司</th>
                <th>适用人群</th>
                <th>游戏类别</th>
                <th>游戏描述</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>

</html>
  • 写回答

4条回答 默认 最新

  • 文盲老顾 新星创作者: 信息安全技术领域 2023-04-08 15:07
    关注

    邀请回答才收到，这边已经有人贴答案了，还需要我们继续么？

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>表格动态添加和删除</title>
    <script>
    (function(){
    })()
    window.onload = function(){
        document.querySelector('input[type=button]').onclick = function(){
            // 同样，多个 form ，自行修改选择器
            frm = document.querySelector('form')
            // 自行修改提示，验证我只做简单的是否填值了，正则长度之类的我就不写了
            data = {
                'gamename': frm['gamename'].value
                ,'company': frm['company'].value
                ,'people':(function(){
                    people = ''
                    frm['people'].forEach(function(el){
                        if (el.checked)
                        {
                            people += ',' + el.value
                        }
                    })
                    return people.substr(1)
                })()
                ,'kind': (function(){
                    if (frm['kind'].selectedIndex > 0)
                    {
                        return frm['kind'].options[frm['kind'].selectedIndex].value
                    }
                    return ''
                })()
                ,'detail': frm['detail'].value
            }
            //console.log(check)
            // 自行添加验证
            if (!data.gamename)
            {
                alert('名字')
                return
            }
            if (!data.company)
            {
                alert('公司')
                return
            }
            if (!data.people)
            {
                alert('人群')
                return
            }
            if (!data.kind)
            {
                alert('类型')
                return
            }
            if (!data.detail)
            {
                alert('评价')
                return
            }
            // 如果有多个 table 自行修改 querySelector 的选择器
            tb = document.querySelector('form ~ table');
            var tr = document.createElement('tr')
            tb.append(tr)
            for (var k in data)
            {
                var td = document.createElement('td')
                td.innerText = data[k]
                tr.append(td)
            }
            var td = document.createElement('td')
            td.innerText = '删除'
            tr.append(td)
            td.onclick = function(){
                if (confirm('确定删除？'))
                {
                    this.parentNode.remove()
                }
            }
            frm.reset()
        }
    }
    </script>
</head>

<body>
    <form action="http://www.baidu.com">
        <table>
            <caption>
                <h2>表格添加</h2>
            </caption>
            <tbody>
                <tr>
                    <td>游戏名称：</td>
                    <td><input type="text" name="gamename"></td>
                </tr>
                <tr>
                    <td>开发公司：</td>
                    <td>
                        <label><input type="radio" name="company" value="腾讯">腾讯</label>
                        <label><input type="radio" name="company" value="暴雪">暴雪</label>
                        <label><input type="radio" name="company" value="网易">网易</label>
                        <label><input type="radio" name="company" value="任天堂">任天堂</label>
                    </td>
                </tr>
                <tr>
                    <td>适用人群：</td>
                    <td>
                        <label><input type="checkbox" name="people" value="小学生">小学生</label>
                        <label><input type="checkbox" name="people" value="大学生">大学生</label>
                        <label><input type="checkbox" name="people" value="白领">白领</label>
                        <label><input type="checkbox" name="people" value="老年人">老年人</label>
                    </td>
                </tr>
                <tr>
                    <td>游戏类别：</td>
                    <td>
                        <select name="kind">
                            <option value="0">请选择游戏类别</option>
                            <option value="益智类">益智类</option>
                            <option value="动作类">动作类</option>
                            <option value="冒险类">冒险类</option>
                            <option value="策略类">策略类</option>
                            <option value="模拟类">模拟类</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>游戏描述：</td>
                    <td>
                        <textarea name="detail" cols="30" rows="10"></textarea>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="reset">
                        <input type="button" value="添加">
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
    <table width=800 border=1>
        <caption>
            <h2>表格展示</h2>
        </caption>
        <thead>
            <tr>
                <th>游戏名称</th>
                <th>开发公司</th>
                <th>适用人群</th>
                <th>游戏类别</th>
                <th>游戏描述</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>

</html>
    评论 编辑记录

报告相同问题？

  • 原生javaScript做得动态表格(注释写的很清楚)
    2020-10-26 11:26
    原生JavaScript（通常称为纯JavaScript）是不依赖于任何外部库，直接使用JavaScript语言实现动态效果的一种方式。本知识点将详细分析如何用原生JavaScript创建一个动态表格，并根据给定文件中的描述和部分代码进行...
  • JavaScript数组，JSON对象实现动态添加、修改、删除功能示例
    2020-10-18 12:11
    在本示例中，我们将探讨如何使用JavaScript操作数组和JSON对象，以实现动态添加、修改和删除数据的功能。具体来说，通过JavaScript的内建方法来操作JSON对象的数组，能够灵活地处理JSON数据结构，这对于开发动态网页...
  • 原生js实现的动态生成表格数据、添加数据、删除数据
    2022-06-11 19:21
    蒲公英1001的博客 1.表格中开始呈现的数据是从数组读取数据生成的； 2.点击“添加数据”按钮，弹出“添加数据”窗口； 3.输入姓名、朝代、事迹，点击“添加”，可在表格后追加一行新的数据； 4.点击“删除”，可以删除该行数据。...
  • Layui给数据表格动态添加一行并跳转到添加行所在页的方法
    2020-10-18 04:43
    可以采用原生JavaScript来操作数组和对象，结合Layui的数据表格渲染机制，通过编程方式直接在数据源中添加新行，并触发表格的重载机制。 #### Layui数据表格数据源处理 Layui的数据表格在渲染时依赖于后端返回的...
  • js表格操作，DOM实现数据动态增删查改
    2019-12-01 17:38
    在JavaScript编程中，DOM（Document Object Model）是用于表示HTML或XML文档的一种树形结构，它允许程序和脚本动态更新、添加、删除和改变元素和属性。在本主题"js表格操作，DOM实现数据动态增删查改"中，我们将深入...
  • JS动态添加Table的TR，TD实现方法
    2020-10-24 19:22
    除了上述内容，标签中还提到“JS 动态 添加 Table TR TD 方法”，这表明文章着重讨论了使用原生JavaScript（不依赖于任何框架或库）来实现这一功能。在现代Web开发中，虽然诸如jQuery这样的库提供了更简便的方法来...
  • JavaScript实现HTML表格动态添加与删除行功能
    2025-10-15 13:19
    张三的忧伤的博客 Vue 的methods选项集中管理所有交互逻辑。与 React 不同，Vue 允许直接修改原始数组（如pushsplice），但仍建议遵循不可变原则以提高可预测性。methods: {// 推荐方式...这样更符合函数式编程理念，也便于测试和调试。
  • 纯原生js实现table表格的增删
    2020-10-20 17:01
    在web开发中，表格常用于展示和管理数据，JavaScript则提供了操作DOM的能力，使得动态地向表格中添加或删除行（tr）变得可能。 首先，为了实现表格的增删功能，需要对HTML结构进行定义。这里提供了一个简单的HTML...
  • JavaScript动态添加表格行（使用模板、标记）
    2019-03-31 01:49
    在JavaScript编程中，动态添加表格行是一项常见的任务，特别是在创建数据展示或编辑功能时。本文将深入探讨如何使用模板和标记技术来实现这一功能。首先，我们先了解一下基本概念。 **1. 模板（Template）** 模板是...
  • 原生JS表格列表全选反选代码.zip
    2019-07-05 00:31
    原生JS是指不依赖任何库或框架，直接使用JavaScript语言进行编程。在这个示例中，我们将使用原生的DOM操作方法来实现全选/反选功能，如`querySelector`、`querySelectorAll`、`addEventListener`等。 3. **事件...
  • 没有解决我的问题, 去提问

问题事件

  • 已结题 （查看结题原因） 4月8日
  • 赞助了问题酬金15元 4月8日
  • 创建了问题 4月8日