js动态生成表格怎么根据键盘输入填入数据

如图，我想要实现点击添加按钮之后将文本框里的内容添加到表格对应的td里面，现在已经实现了点击添加按钮生成空白的表格，请问怎么把上面文本框里的文字添加到这些空白的表格里

下面是我写的代码


<!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">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        div {
            width: 60%;
            margin: 20px auto;
            text-align: center;
        }
 
        table {
            width: 100%;
            margin-top: 30px;
            border-collapse: collapse;
        }
 
        table caption {
            text-align: left;
            margin-bottom: 10px;
        }
 
        table tr td,
        table tr th {
            border: 1px solid blue;
            padding: 10px 0px;
            text-align: center;
        }
 
        .small {
            width: 60px;
        }
    </style>
</head>
 
<body>
    <div>
        <label>编号：<input type="text" id="txet1"></label>
        <label>姓名：<input type="text" id="txet2"></label>
        <label>住址：<input type="text" id="txet3"></label>
        <button id="btn_add">添加</button>
        <button id="btn_update">更新</button>
 
        <table id="tbl">
            <caption>
                <input type="checkbox" id="all"> 选择所有
                <button id="btn_del" style="margin-left: 30px;"> 删除选中项</button>
                <input type="text" id="search" placeholder="输入编号筛选查询" style="margin-left: 30px;">
            </caption>
            <thead id="thead">
                <tr>
                    <th> 选择</th>
                    <th> 编号</th>
                    <th> 姓名</th>
                    <th> 住址</th>
                    <th colspan="2"> 操作</th>
                </tr>
            </thead>
            <tbody id="tbody">
            </tbody>
        </table>
    </div>
    <script>
        var btn_add = document.getElementById('btn_add');//获取添加按钮
        var text = document.querySelectorAll("input");
        btn_add.onclick = function () {
            //创建tr行元素
            var tr = document.createElement('tr');
            var tbody = document.querySelector('tbody');
            tbody.appendChild(tr);
            for (var i = 0; i < 6; i++) {
                //创建td块元素
                var td = document.createElement('td');
                tr.appendChild(td);
            }
        }
            </script>
</body>
 
</html>

展开全部

写回答
好问题 0 提建议
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

1条回答默认最新

CSDN专家-showbo 2021-11-05 01:57

关注

其他功能自己扩展下


 
<!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">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        div {
            width: 60%;
            margin: 20px auto;
            text-align: center;
        }
 
        table {
            width: 100%;
            margin-top: 30px;
            border-collapse: collapse;
        }
 
        table caption {
            text-align: left;
            margin-bottom: 10px;
        }
 
        table tr td,
        table tr th {
            border: 1px solid blue;
            padding: 10px 0px;
            text-align: center;
        }
 
        .small {
            width: 60px;
        }
    </style>
</head>
<body>
    <div>
        <label>编号：<input type="text" id="txet1"></label>
        <label>姓名：<input type="text" id="txet2"></label>
        <label>住址：<input type="text" id="txet3"></label>
        <button id="btn_add">添加</button>
        <button id="btn_update">更新</button>
        <table id="tbl">
            <caption>
                <input type="checkbox" id="all"> 选择所有
                <button id="btn_del" style="margin-left: 30px;"> 删除选中项</button>
                <input type="text" id="search" placeholder="输入编号筛选查询" style="margin-left: 30px;">
            </caption>
            <thead id="thead">
                <tr>
                    <th> 选择</th>
                    <th> 编号</th>
                    <th> 姓名</th>
                    <th> 住址</th>
                    <th colspan="2"> 操作</th>
                </tr>
            </thead>
            <tbody id="tbody">
            </tbody>
        </table>
    </div>
    <script>
        var btn_add = document.getElementById('btn_add');//获取添加按钮
        var text = document.querySelectorAll("input");
        btn_add.onclick = function () {
            //创建tr行元素
            var tr = document.createElement('tr');
            var tbody = document.querySelector('tbody');
            tbody.appendChild(tr);
            var td = document.createElement('td');
            tr.appendChild(td);
            td.innerHTML = '<input type="checkbox"/>'
            td = document.createElement('td');
            tr.appendChild(td);
            td.innerHTML = txet1.value;
            td = document.createElement('td');
            tr.appendChild(td);
            td.innerHTML = txet2.value;
            td = document.createElement('td');
            tr.appendChild(td);
            td.innerHTML = txet3.value;
            td = document.createElement('td');
            tr.appendChild(td);
            td.innerHTML = '<a onclick="modify(this)">修改</a>　<a onclick="del(this)">删除</a>';
        }
    </script>
</body>
</html>

展开全部

本回答被题主选为最佳回答 , 对您是否有帮助呢?

编辑

预览

报告相同问题？

关注问题

前期前端学习常用命令之JS/JQ
2023-02-23 02:15

简了个码农叶的博客 BOM操作、JS数据类型及变量、JS运算符、流程控制语句、数组、对象、函数、本地存储、JSON、正则判断、验证码、DOM操作、事件、选项卡及下拉框显示、定时器、时间戳、冒泡排序、变量转参、JQ选择器、JQ方法
layui table动态增加行以及通过键盘定位指定单元格
2021-10-21 06:21

mr_foxsand的博客 3.单元格填入数据后按回车，光标移动到下个可编辑的单元格；如果已经是最后一个单元格，那么光标移动到下一行的指定单元格；如果是最后一行的最后单元格，那么再次新增行附：键值表 <!DOCTYPE ...
【前端】Html+Css+JavaScript基础知识点
2022-07-18 05:28

Lucky小维的博客 Html+Css+JavaScript基础知识点
前端基础知识点-每天一个基本知识点（100+个前端小知识，你是否都知道？）
2022-02-20 16:25

文默的博客从输入URL到页面展示这中间发生了什么（21/09/11）七、知识点：重排（21/09/12）八、知识点：TCP和UDP（21/09/13）九、知识点：三次握手（21/09/15）十、知识点：绝对和相对定位（21/09/16）十一、知识..
前端面试题【背完最低10k】
2023-02-02 10:17

菜鸟0201的博客前端面试题（vue）
前端三剑客（html、css、js）面试题
2023-04-19 13:02

weixin_45754783的博客 JavaScript JavaScript的数据类型基本数据类型：Number、String、Boolean、Null、Undefined、Symbol、bigInt 引用数据类型：object、Array、Date、Function、RegExp 变量和函数声明的提升在js中变量和函数的声明...
前端，html，css,js,vue
2021-08-10 11:43

衰兵的博客前端技术：学习方法前端要怎么学？前端位于整个项目首要要开发的内容，直接和用户打交道，实现页面的展现和交互功能，所以在分类上俗称为前端。随着软件技术的日趋成熟，前端内容也呈现爆炸式的增长，和革命性...
前端面试题整理（vue/js/css）
2021-03-21 08:06

前端 - wei的博客区别：离线存储为整个web提供服务，浏览器只能缓存单个页面离线存储可以指定需要缓存的文件和需要在线浏览文件，浏览器没法指定离线存储可以动态通知用户进行更新为什么会有缓存？如果不想缓存如何避免掉其...
使用HTML5和JS实现日期下拉框功能
2022-07-12 09:22

曾经的逍遥少年的博客使用HTML5和JS实现日期下拉框功能
前端面试题-vue专区
2023-09-01 14:20

zbsnzj的博客 Vue 3 通过更好的 Tree Shaking 和更高效的运行时代码生成，相较于 Vue 2，打包体积更小。总体而言，Vue 3 在性能、包体积和开发者体验方面带来了显著的改进，同时引入了 Composition API 作为管理组件状态和逻辑的...
没有解决我的问题, 去提问

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
系统已结题 11月12日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
已采纳回答 11月5日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
创建了问题 11月5日

js动态生成表格怎么根据键盘输入填入数据

1条回答 默认 最新

问题事件

1条回答默认最新