js 动态新增、删除行 添加事件

最新推荐文章于 2019-08-30 10:52:00 发布
最新推荐文章于 2019-08-30 10:52:00 发布
阅读量2.1k 收藏
点赞数
分类专栏： JS 文章标签： input javascript button border function html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bolink5/article/details/5744722
版权

  也没啥好说的，完全是因为项目中需要

    直接上html代码，读者可以根据自己的需求再进行修改。

    

     由于第一次搞，花了点时间，感谢下javaeye的原作者，我在在其上根据自己的需求改写的。供大家参考

bolink5
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
动态table添加或者删除一行使序号重新排序，placeholder、id和name同时重新排序
05-06
动态table添加或者删除一行使序号重新排序，placeholder、id和name同时重新排序
js添加、删除点击事件
路漫漫~
09-15 1万+
1）当方法没有参数时，赋值可以直接用onclick = 方法名 window.onload = function() { $('btnTest').onclick = test; } function test() { alert(val); } 2）当方法有参数时，用onclick = 方法名(参数)时就有错了，需要在方法名前面加function() window
JQuery实现表格动态增加行并对新行添加事件
weixin_30315723的博客
08-30 643
实现功能： 通常在编辑表格时表格的行数是不确定的，如果一次增加太多行可能导致页面内容太多，反应变慢；通过此程序实现表格动态增加行，一直保持最下面有多个空白行。 效果： 一：原始页面 二：表1增加新行并绑定timepicker 三：表2自动增加行，新行绑定timepicker HTML源码： ? 1 2 3 4 5 6 7 8 9 ...
JS点击事件删除单行数据
living_ren的博客
12-18 7729
今天学得的新知识点：采用js方式实现页面跳转并传递get参数实现数据库的单行删除          用户表              用户信息表                      ID用户名密码性别电话邮箱部门简介操作                  {*此处是smarty模板所接收到的值使用foreach遍历出来数据库的内容*}         {
js动态添加行和删除行
08-24
js动态添加行和删除行
js 动态给元素添加、移除事件的实现方法
10-21
下面小编就为大家带来一篇js 动态给元素添加、移除事件的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js实现对table动态添加、删除和更新的方法
10-24
主要介绍了js实现对table动态添加、删除和更新的方法,涉及javascript针对html中table表格节点的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
Vue.js动态添加、删除选题的实例代码
10-21
主要介绍了Vue.js动态添加、删除选题的实例代码,非常不错具有参考借鉴价值，需要的朋友可以参考下
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
10-18
主要介绍了使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能,需要的朋友可以参考下
js-行事件
weixin_34184561的博客
11-02 116
没有实现 除去表头选中 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <style type="text/css"> table { c...
JS_增加事件,移除事件,动态元素的增删事件
关于代码的那些事
01-07 4064
/* * 静态页面要施放因(add)此元素添加事件的内存. */ (function(){ var add = document.getElementById("add"); var det = document.getElementById("det"); /*增加事件*/ ~function(){ var str = new Array
js动态新增表格行
loverong的专栏
05-26 2198
New Document String.prototype.trim = function(){    // 用正则表达式将前后空格，用空字符串替代。      //用法 a.trim()    return this.replace(/(^/s*)|(/s*$)/g, "");}function doAdd(){ var myTable = document.all.myTable; var
JS监控DOM的事件（内部插入、移除、修改属性等）！爽！
weixin_33810006的博客
08-12 1659
2019独角兽企业重金招聘Python工程师标准>>> ...
js添加事件和移除事件:addEventListener()与removeEventListener()
热门推荐
Just do it
03-28 14万+
作用：      addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。      它们都接受3个参数：事件名、事件处理的函数和布尔值。      布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。 示例： 环境：移动端，界面禁止触摸事件 要在bo
动态移除元素属性
weixin_30512785的博客
07-21 97
<select name="hour" style="width: 5%" id="hour" onclick="hourShow()" onchange="show();"> <option>{$scheduleItem['hour']}</option> </select> <script> function h...
动态表单添加一行，删除一行
weixin_30929011的博客
02-27 753
效果图 html部分 <form class="cus-form" id="form"> <div class="padding20 bgWhite marginTop20"> <div class="container form-horizontal form-box"> <...
element动态添加新增一行并保存行
最新发布
05-25
假设你是指在一个表格中动态添加一行，并将新增的行保存到后端数据库中。以下是一个基本的示例代码： HTML: ```html <table id="myTable"> <thead> <tr> <th>Name</th> <th>Email</th> <th>Phone</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td><input type="text" name="name[]" /></td> <td><input type="text" name="email[]" /></td> <td><input type="text" name="phone[]" /></td> <td><button type="button" onclick="addRow()">Add Row</button></td> </tr> </tbody> </table> <button type="button" onclick="saveRows()">Save Rows</button> ``` JavaScript: ```javascript function addRow() { var table = document.getElementById("myTable").getElementsByTagName('tbody')[0]; var row = table.insertRow(-1); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); var cell4 = row.insertCell(3); cell1.innerHTML = '<input type="text" name="name[]" />'; cell2.innerHTML = '<input type="text" name="email[]" />'; cell3.innerHTML = '<input type="text" name="phone[]" />'; cell4.innerHTML = '<button type="button" onclick="deleteRow(this)">Delete</button>'; } function deleteRow(btn) { var row = btn.parentNode.parentNode; row.parentNode.removeChild(row); } function saveRows() { var table = document.getElementById("myTable"); var formData = new FormData(table); var xhr = new XMLHttpRequest(); xhr.open("POST", "/save.php", true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } }; xhr.send(formData); } ``` 这段代码做了以下几件事情： 1. 在表格的末尾添加一行，并为每个单元格添加一个输入框和“删除”按钮。 2. 在单击“删除”按钮时删除行。 3. 在单击“保存行”按钮时，使用XMLHttpRequest对象将表单数据发送到服务器。 请注意，此示例仅用于演示目的，并且需要使用后端脚本来实际保存行。在此示例中，我们将表单数据作为FormData对象发送到服务器。在服务器端，您可以使用PHP等脚本语言来接收表单数据并将其保存到数据库中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值