JS实现从表格中动态删除指定行的方法
本文实例讲述了JS实现从表格中动态删除指定行的方法。分享给大家供大家参考。具体如下:
JS的表格对象有一个deleteRow方法用于删除表格中的指定行,只需要指定行号即可
<!DOCTYPE html> <html> <head> <script> function deleteRow(r) { var i=r.parentNode.parentNode.rowIndex; document.getElementById('myTable').deleteRow(i); } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>Row 1</td> <td><input type="button" value="Delete" onclick="deleteRow(this)"></td> </tr> <tr> <td>Row 2</td> <td><input type="button" value="Delete" onclick="deleteRow(this)"></td> </tr> <tr> <td>Row 3</td> <td><input type="button" value="Delete" onclick="deleteRow(this)"></td> </tr> </table> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。
相关推荐
-
js实现table添加行tr、删除行tr、清空行tr的简单实例
如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author"
-
jquery 追加tr和删除tr示例代码
复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script> $(function(){ $("#getAtr").click(function(){ $str=''; $str+="<tr align='center'>"; $str+="<td
-
js动态给table添加/删除tr的方法
复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author"
-
js动态控制table的tr、td增加及删除的具体实现
html: 复制代码 代码如下: <table id='wifi_clients_table' style="color:#0099CC;font-size:12px;" class="table table-striped table-bordered table-hover table-condensed"> <thead> <tr class="success"> <th>序号</th&
-
Js实现动态添加删除Table行示例
最近做项目遇到要动态添加.删除表格行的操作,实现如下 html代码 复制代码 代码如下: <table cellpadding="0" cellspacing="0" border="1" style="margin:auto; width:96%;" id="LearnInfoItem"> <tr > <td colspan="8" bgcolor=&qu
-
JQuery动态给table添加、删除行 改进版
复制代码 代码如下: <html> <head> <title> </title> <script src="js/jquery-1.4.2_min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> var row
-
JS实现从表格中动态删除指定行的方法
本文实例讲述了JS实现从表格中动态删除指定行的方法.分享给大家供大家参考.具体如下: JS的表格对象有一个deleteRow方法用于删除表格中的指定行,只需要指定行号即可 <!DOCTYPE html> <html> <head> <script> function deleteRow(r) { var i=r.parentNode.parentNode.rowIndex; document.getElementById('myTable').deleteR
-
JS实现向表格中动态添加行的方法
本文实例讲述了JS实现向表格中动态添加行的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码通过表格对象的insertRow方法动态向表格的最顶端添加新的行 <!DOCTYPE html> <html> <head> <script> function insRow() { var x=document.getElementById('myTable').insertRow(0); var y=x.insertCell(0); var z=x.ins
-
javascript操作向表格中动态加载数据
本文实例为大家分享了javascript实现向表格中动态加载数据的具体代码,供大家参考,具体内容如下 首先在HTML中编写表格信息 <table width="500px" border="1"> //表格头部信息 <thead> <tr> <th>编号</th> <th>姓名</th> <th>身份</th> <th>操作</th>
-
浅析jquery数组删除指定元素的方法:grep()
遇到的问题 今天遇到一个问题,删除数组中的一个指定元素,并返回新的数组. 我定义的js数组是这样的: var sexList=new Array[3]; sexList[0]="1"; sexList[1]="2"; sexList[2]=""; 想达到的效果 我想达到的效果是这样的: 删除索引=1的元素,并返回新数组. 返回的结果是: var sexList=new Array("1",""); 我们知道
-
在 Laravel 中动态隐藏 API 字段的方法
我最近在 Laravel Brasil 社区看到一个问题,结果比看起来更有趣.想象一下你有一个 UsersResource 用下面的实现: <?php namespace App\Http\Resources; use Illuminate\Http\Resources\Json\Resource; class UsersResource extends Resource { /** * Transform the resource into an array. * * @param \Illu
-
Extjs 点击复选框在表格中增加相关信息行
功能效果:点击复选框在表格中自动增加相关信息行,复选框取消则表格中内容自动删除 初始效果大概是这样~~~~~ // 定义初始 存放表格数据 var gridItems = []; //省份复选框 var $provinceCheckbox01 = new Ext.form.CheckboxGroup({ xtype: 'checkboxgroup', fieldLabel: '省份选择', labelWidth: 60, columns: 9, vertical: true, margin: '
-
js基础之DOM中document对象的常用属性方法详解
-----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1 document.anchors 返回对文档中所有 Anchor 对象的引用.还有document.links/document.forms/document.images等 2 document.URL 返回当前文档的url 3 document.title 返回当前文档的标题 4 do
-
Python中动态创建类实例的方法
简介 在Java中我们可以通过反射来根据类名创建类实例,那么在Python我们怎么实现类似功能呢? 其实在Python有一个builtin函数import,我们可以使用这个函数来在运行时动态加载一些模块.如下: def createInstance(module_name, class_name, *args, **kwargs): module_meta = __import__(module_name, globals(), locals(), [class_name]) class_met
-
jQuery实现html表格动态添加新行的方法
本文实例讲述了jQuery实现html表格动态添加新行的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea
-
BootStrap table删除指定行的注意事项(笔记整理)
这里一定要做一个笔记,这个问题花了好几个小时,问题虽小,但是从中获得一定经验. 问题:对于table指定行的数据进行删除,仅仅是前端实现! 方法有两种: 1.使用官方文档的数据(反正我试了2个小时都不行,如有大神请指导下):使用events和operate相结合的方式 2.不使用events,在formatter里面定义事件的实现. 上面的例子只是一个细节点,bootstrap-table是一个基于Bootstrap的jQuery插件,可以实现从数据库中提取数据到前端进行相应操作的功能,很好用!
随机推荐
- 对YUI扩展的Gird组件 Part-1
- Apache 获取真实ip的配置的实现方法
- linux解决Tomcat内存溢出的问题
- 谈谈iOS开发之JSON格式数据的生成与解析
- JavaScript中Function详解
- aspx 页面弹出窗口代码大全
- python服务器与android客户端socket通信实例
- JQuery获取样式中的background-color颜色值的问题
- 在PHP中执行系统外部命令
- JavaScript中return用法示例
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- 判断ie的两种简单方法
- Nginx服务器限制访问速度的配置方法
- Android中的Service相关全面总结
- Android实现图片缓存与异步加载
- ASP.NET MVC4入门教程(五):从控制器访问数据模型
- Android TextView 去掉自适应默认的fontpadding的实现方法
- 锤炼孩子的思考力的方法
- 解决C#调用dll提示
- MySQL读取Binlog日志常见的3种错误