创建动态表格，并获取数据进行添加和删除操作

已于 2023-03-06 16:53:48 修改
阅读量111 收藏
点赞数 1
文章标签： javascript
于 2023-03-06 16:52:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/X3217424721/article/details/129366019
版权

<!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>

</head>

<style>

    table {

        width: 400px;

        margin: 50px auto;

        border-collapse: collapse;

        text-align: center;

    }

    table tr {

        background-color: #ccc;

    }

    #div {

        position: absolute;

        top: 100px;

    }

</style>

<body>

    <table>

        <tr>

            <td>姓名</td>

            <td>班级</td>

            <td>年龄</td>

            <td>操作</td>

        </tr>

        <tbody id="tbody">

            <tr>

                <td>张三</td>

                <td>jr2133</td>

                <td>18</td>

                <td><button οnclick="del(this)">删除</button></td>

            </tr>

        </tbody>

    </table>

    <div id="div">

        姓名：<input type="text" id="name"><br>

        班级：<input type="text" id="classname"><br>

        年龄：<input type="text" id="age"><br>

        <input type="submit" value="提交" id="ipt">

    </div>

</body>

<script>

    var name_ = document.getElementById('name')

    var classname = document.getElementById('classname')

    var age = document.getElementById('age')

    var ipt = document.getElementById('ipt')

    var tbody = document.getElementById('tbody')

    ipt.onclick = function () {

        //创建tr td 标签

        var tr = document.createElement('tr')

        var td1 = document.createElement('td')

        var td2 = document.createElement('td')

        var td3 = document.createElement('td')

        var td4 = document.createElement('td')

        //往td里添加数据

        td1.innerHTML = name_.value

        td2.innerHTML = classname.value

        td3.innerHTML = age.value

        //添加删除按钮

        td4.innerHTML = '<button οnclick="del(this)">删除</button>'

        //把td追加到tr中

        tr.appendChild(td1)

        tr.appendChild(td2)

        tr.appendChild(td3)

        tr.appendChild(td4)

        //把tr追加到tbody中

        tbody.appendChild(tr)

    }

    //删除操作

    //通过this指向删除数据

    function del(e){

        var tbody = e.parentNode.parentNode.parentNode

        tbody.removeChild(e.parentNode.parentNode)

    }

</script>

</html>

程序员非凡哥
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
动态添加表格
weixin_54668937的博客
06-08 868
文献种类：专题技术文献； 开发工具与关键技术： VS、jQuery 作者：方建恒 ；年级：20级 ；撰写时间： 2021 年 6 月 8日 下面我们来看一下如何动态的添加表格数据。 我们主要会用到each()方法和append()方法， 前者是用来为每个匹配的元素规定运行的函数， 后者是用来给被选择到的元素的结尾插入内容。 知道了each ()方法和append()方法的作用后，我们接下来开始编写动态添加表格的代码， 我们要先把相应的数据库引入，然后再创建视图， 因为后面需要用到Boo
javascript实现表格的动态添加
qq_31187881的博客
02-04 521
在开发的过程中，可能需要实现表格的动态添加，例如在大学里的选课系统，当学生选择了一门课后，按下确定键后会实时在表格相应的位置打印一行选课信息表，这就是表格的动态添加，不多说废话了，直接上代码，在代码中会把思路和过程以注释的方式写在嵌套在代码中，希望各位看官请勿介意： //定义一个动态添加表格的数据 function SaveData(){ //我主要是实现一个用户表的
原生js 动态生成表格 附带添加删除功能
gsx257318的博客
11-17 399
【代码】原生js 动态生成表格 附带添加删除功能。
动态表格添加删除
qq_28569939的博客
09-07 274
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格</title> <style> div { text-align: center; margin: 50px; } table { .
【JavaScript】创建表格动态插入数据
Lee的博客
12-09 8487
使用JavaScript动态插入表格和数据 一、创建HTML并布置好基本格局 这里没有什么难点，基本HTML知识 为了简单实现没有使用thead和tbody进行设计 <html> <head> <meta charset="UTF-8"> <title>学生信息表</title> <style> </style> <script> </script> </head> <bo
JavaScript中动态向表格添加数据
10-20
在JavaScript中，动态向表格添加数据是一项常见的任务，特别是在网页交互和数据展示时。这个过程涉及到HTML、CSS以及JavaScript的基本操作，尤其是DOM（文档对象模型）的操作。以下是对标题和描述中所涉及知识点的...
JS实现动态生成表格并提交表格数据向后端
11-24
在JavaScript（JS）中动态生成表格并提交数据到后端是一项常见的前端开发任务，它涉及到DOM操作、事件处理以及与服务器的交互。以下是对这个过程的详细解释： 首先，为了实现动态生成表格，我们需要引入一个...
jQuery实现表单动态添加与删除数据操作示例
10-18
这个示例展示了如何利用jQuery高效地操作DOM，实现动态添加和删除表单数据的功能。这在构建动态Web应用程序时是非常常见的需求，例如管理列表、数据表或者任何需要实时更新内容的场景。通过这种方式，用户可以直观地...
JQuery动态添加和删除表格行的方法
12-09
在网页开发中，jQuery库提供了一种高效的方式来操作DOM元素，包括动态地添加和删除表格行。本实例将深入探讨如何使用jQuery实现这一功能，这对于创建数据交互丰富的Web界面非常实用。 首先，我们需要定义几个变量来...
js动态添加表格数据使用insertRow和insertCell实现
12-03
在JavaScript中，动态添加表格数据是一项常见的任务，特别是在构建交互式网页时。在这个场景中，我们看到使用`insertRow`和`insertCell`方法来实现这个功能。`insertRow`方法用于在表格中插入一行，而`insertCell`...
表格的动态添加
郝的博客
12-20 337
Android 表格动态添加
动态增加表格及读取动态表格中的值
长风 爱 跑步去
11-28 1430
最近在找一些关于动态表格方面的资料,经过小小组合后可以动态的增加行,及读取表格中的值,在脚本相对不好调试,所以就将我调好的代码放上来,可以直接运行看结果的动态添加删除表格var cGetRow=-99999;function AddRow(){//添加一行var i =tab1.rows.length;var Nam="name"+i;var Cod="code"+i;var newT
利用js在页面动态生成表格
wind的博客
02-07 1761
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.
java ajax搜索提示_Servlet+Ajax实现搜索框智能提示
weixin_31935793的博客
02-16 187
简介：搜索框相信大家都不陌生，几乎每天都会在各类网站进行着搜索。有没有注意到，很多的搜索功能，当输入内容时，下面会出现提示。这类提示就叫做搜索框的智能提示，本门课程就为大家介绍如何使用Servlet和Ajax来实现。主要介绍实现原理和代码的前后台实现过程。项目结构首先我们需要先导入以上5个jar包，当然也可以选择maven工程导入相关依赖。代码实现SearchServlet.javaimport ...
JavaScript节点的操作，综合运用———动态模拟表格添加和删除数据
weixin_60206305的博客
04-20 1501
模拟在表格中动态添加和删除数据； 1.首先网页骨骼 <table cellspacing="0"> <thead> <tr> <th>姓名</th> <th>科目</th> <th>成绩</th> <th>操作</th> </tr> </thead> <tbody> 2.模拟一组数据 使用对象来存储数据，并且用一个
html对象添加子元素,Dom节点对象操作方法 ，用document创建节点对象，追加节点，追加内容以及增加，删除，复制...
weixin_36315943的博客
06-25 3546
节点的创建追加创建新节点document.createElement(‘节点名’);追加子节点appendChild把节点对象加到body中document.body.appendChild()var tab = document.createElement('table');//创建节点对象tabletab.innerHTML='hello world';//为节点对象添加内容document....
Ajax+jsp实现动态修改表格
热门推荐
fengsigaoju的博客
01-28 1万+
ajax最大特点就是在页面不刷新的前提下实现页面内容的变换。 举个很常见的例子：比如有一个排行榜，这个排行榜肯定是随时变化的，我们希望用户不需要刷新页面的情况下就可以看到实时表格。（游戏排行榜，oj提交列表） 为了实现这个功能，我们需要掌握以下技术:ajax向后台提出请求(每隔很短的时间）------>jsp获取请求并查询数据库----->返回json格式数据----->js解析json格式数
基于JavaScript实现一个简单的动态表格，实现添加和删除一行表格的功能
han_han__的博客
09-11 2638
基于JavaScript实现一个简单的动态表格，实现添加和删除一行表格的功能
表格行添加编辑删除操作和保存数据代码 数据从数据库中获取
最新发布
05-31
要在表格中添加编辑和删除操作，并将更改保存回数据库中，可以使用 PHP 和 MySQL 来实现。可以按照以下步骤： 1. 在 HTML 文件中创建一个表格，为每一行添加编辑和删除按钮，添加单击事件监听器，当按钮被点击时，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值