对表格实现修改查询html,【原生】js实现表格的增删改查

最新推荐文章于 2024-05-16 16:52:30 发布

凌暴暴

最新推荐文章于 2024-05-16 16:52:30 发布

阅读量2.7k

点赞数 2

文章标签：对表格实现修改查询html

本文主要介绍了如何使用原生JavaScript实现动态表格的增删改查功能。通过创建新节点、添加事件监听等方式，实现了表格数据的动态更新，包括添加数据、单个删除、批量删除和修改数据的操作。示例代码详细展示了每一步的实现过程，并提供了相应的功能截图。

摘要由CSDN通过智能技术生成

说在前面的，写给小白白的，大神请绕道~

今天用原生js写一下动态表格的增删改查，主要是熟悉一下js的DOM操作。

首先，做一个表格，用来显示提交的数据，如图下：

此处，我添加了编号、姓名、密码、生日、地址五个属性，另外加选中、操作两个操作，亲们可以自行添加，布局代码如下：

选中编号姓名密码生日地址操作全部删除

100806131234劈日e斩月1234561995-08-07北京市朝阳区艾欧尼亚

css方面我运用了bootstrap的表格框架，图个方便，觉得不好看的，大家自行修改，在此就展示了。

然后，下面添加一个需要提交的表单，如图下：

生日选项用了h5新属性date，

布局代码如下：

新增数据

基本布局就这样了，然后可以写脚本了，

1.添加数据

思路：获取表单每个input的value值，然后创建节点td，添加到上面的表格当中，很简单，代码实现如下：

function addList(){

var oNum = document.getElementById('num').value;

var oUser = document.getElemen

关注