点击按钮实现表格tr的追加与删除

最新推荐文章于 2023-08-02 15:40:58 发布
最新推荐文章于 2023-08-02 15:40:58 发布
阅读量1.8k 收藏 1
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43696616/article/details/97154354
版权
这篇博客介绍了如何在前端实现点击按钮动态追加和删除表格行的功能。首先在页面加载时，将追加按钮添加到表格末尾。接着，通过在按钮上添加点击事件，实现在点击加号按钮后，向表格追加新的行。同时，点击后的加号按钮变为减号，当点击减号时，会触发移除事件，删除对应的表格行。作者是一位刚毕业的Java工程师，分享了工作中遇到的问题及解决方案。
摘要由CSDN通过智能技术生成

点击按钮实现表格tr的追加与删除

首先看下效果图

在这里插入图片描述
我们现在要实现点击绿色加号按钮在盒子中追加一行tr标签：

1，因为最后的加号tr要跟在上面查询出来的数据后面，所以我在网页一加载就把它append在盒子的最后面，具体代码如下：

$(".box-scrollbar table").append("<tr>\n" +
        "                                <td width=\"20%\">\n" +
        "                                    <input type=\"text\" placeholder='Zone'/>\n" +
        "                                </td>\n" +
        "                                <td width=\"75%\">\n" +
        "                                    <input type=\"text\" placeholder='Buletooth gateway ID' style=\"width: 100%\"/>\n" +
        "
最低0.47元/天 解锁文章
不经夸的胖子
关注
山西白亮博客-tr标签在table里动态添加删除
weixin_39921526的博客
08-28 168
山西白亮博客-tr标签在table里动态添加删除自定义目录标题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tr标签动态添加删除</title> </head> <body> <table id="employeeTable" border="1"> <tr>
如何在javascript中获取table控件行数，并删除对应的行(tr)？
oadgadgad的博客
07-13 325
1.可以用table控件的rows.length获取table控件的行数。 2.用deleteRow(i)删除对应的行。(i为第i行，i从0开始)
点击按钮table增加tr数据以及全选,反全选前端页面写法
小科比的博客
03-19 481
作为后台人员,真的是每次写前端页面很烦躁,虽然很简单,简单的小案例记录一下 代码效果如下: jsp文件如下： <!DOCTYPE html> <head> <title>编辑购房人家庭成员</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></...
tr append
zengshaotao的专栏
05-08 465
table标签，有了tr的头行。后续的内容行是动态生成的，生成时候是append到table对象，而不是tr的头行对象
layui中点击按钮添加或删除table中的一行tr
AAA_BBB
08-15 7910
table &lt;table id = "tablePoSub" name = "tablePoSub" class="layui-table" style="width: 500px;"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;&
jquery 追加tr和删除tr示例代码
10-26
此外，每行末尾都有一个删除按钮，通过点击它可以移除对应的表格行。这里我们定义了一个名为 `getDel()` 的函数，接收一个参数 `k`，这个参数是触发事件的元素： ```javascript function getDel(k){ $(k).parent()....
jquery表格添加删除行点击按钮动态添加删除行
11-11
当用户点击删除按钮时，将选择的表格行（通过CSS选择器`tr:selected`获取）从表格中移除。请注意，为了能够选择表格行，可能需要在CSS中为表格行设置`cursor: pointer`样式，并在行上绑定`click`事件来实现选中效果...
jQuery实现html table行Tr的复制、删除、计算功能
10-19
jQuery实现表格行复制、删除、计算功能的知识点主要包括以下几个方面： 1. 复制表格行的操作： jQuery可以通过克隆现有的表格行（tr元素）来复制行。在上述内容中提供了一个名为addtr的函数实现复制操作。具体操作...
jQuery中点击按钮创建表格
ln201009的博客
05-16 1884
1、我们先说单个元素的创建，在一个div盒子里创建一个a标签，我们就需要先写入一个按钮和一个div盒子。如下图所示，要实现的功能就是点击按钮在盒子内创建一个表格。 2、我们想要的功能需要通过jQuery来实现，所以先引入一个jQuery的插件，然后写一个script标签来写jQuery代码块。 3、首先我们先写一个页面加载事件，在jQuery中的页面加载事件是一个$符号然后一个小括号，小括号里面写function。 4、我们创建表格首先就需要先创建一个存储表格数据的数.
table 通过 append 动态追加的 tr，点击事件与修改样式
u012431404的博客
08-25 5976
首先。问题在 通过 $('#table1').append(                        ""+                           ""+num+""+                           ""+datas.F_BKDH+""+                           ""+datas.F_WCJE+""+       
jquery的table操作之在指定行后添加新行
子夜轻风
12-30 801
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt; New Document &lt;/TITLE&gt; &lt;META NAME="Generator" CONTENT="EditPlus&qu
js指定tr添加一行，删除一行
热门推荐
b422761838的专栏
08-09 1万+
0   1 在此行下插入新行   2 function instTR(){    var tab=document.getElementById('tab');    var n=document.getElementById('x').rowIndex+1;    var tr=tab.insertRow(n);    var td=tr.inser
制作table，点击加号添加tr，点击减号删除tr,并判断数值，方法封装
qq2315030934的博客
07-31 200
<head> <meta charset="utf-8"> <title></title> <script src="js/jquery-2.1.1.js"></script> </head> <body> 样品数量<input id="num" /> <table border="1">
html表格中设置按钮,table的tr设置为类似于button的形式
weixin_39897758的博客
06-15 851
问题描述将table的tr设置为类似于按钮的形式，因为之前已经将数据拼接到table中的tr td中，所以想在不动table的前提下，用其他方式模拟这种形式问题出现的环境背景及自己尝试过哪些方法尝试过在tr中加但是貌似不可以，非要用div代替table才能实现这种功能吗？望走过的大佬关照一下前端小白相关代码// 请把代码文本粘贴到下方(请勿用图片代替代码)此代码是html的table名称(方向)时...
html+在tr后追加,用js 怎么实现在一个tr 后面追加一个tr
weixin_32656107的博客
06-02 946
满意答案var mybody =document.getElementsByTagName("body")[0];var mydiv = document.createElement("div");var _mydiv = document.createElement("div");var mybr = document.createElement("br");var myspa...
简单的删除table中tr（和数据库操作有关）
cyk_en5566的博客
02-13 957
@RequestMapping(value="/deleteProduct") public void deleteProductByid(HttpServletRequest request,HttpServletResponse response) throws IOException { JSONObject result = new JSONObject(); String ...
JavaScript
qq_52060072的博客
08-27 5717
JavaScript基础笔记
js在最后一个 tr 后面追加新的tr，js删除当前tr
凉梦的博客
08-02 996
【代码】js在指定tr后面追加tr，js删除当前tr。
vue 点击按钮动态插入一行表格的tr
最新发布
09-20
在Vue.js中，要实现点击按钮动态插入一行表格（<tr>标签），你可以利用JavaScript事件处理结合v-for指令。首先，你需要创建一个数组来存储表格数据，然后在模板中绑定这个数组。当点击按钮时，可以使用`this.$refs`获取对应的元素并添加新的数据项。 以下是一个简单的示例： ```html <!-- HTML模板 --> <table> <thead> <!-- 表头... --> </thead> <tbody ref="tableBody"> <tr v-for="(item, index) in tableData" :key="index"> <!-- 表格每一行的元素... --> </tr> </tbody> </table> <button @click="addRow">添加新行</button> <script> export default { data() { return { tableData: [], // 初始的空数组 }; }, methods: { addRow() { const newRow = {} 或者你想添加的数据结构; this.tableData.push(newRow); // 添加新数据到数组 // 如果你想要更新视图，可以考虑使用$nextTick，因为DOM更新有时需要一些时间 this.$nextTick(() => { // 获取表格tbody元素并追加新行 const tbody = this.$refs.tableBody; tbody.insertAdjacentHTML('beforeend', `<tr><td>${newRow.column1}</td><td>${newRow.column2}</td></tr>`); // 替换column1和column2为实际列名 }); }, }, }; </script> ``` 在这个例子中，`@click="addRow"`监听了按钮的点击事件，当你点击时会调用`addRow`方法。每行数据都是从`tableData`数组中渲染出来的。当你添加新行后，通过`insertAdjacentHTML`方法动态插入新行到表格最后。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值