js操作html增加删除tr/td

eason26_li

浏览: 395281 次
性别:
来自: 北京

最近访客更多访客>>

wangyy

anthrax2

gaozy

pistolove

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Javascript

HTML JavaScript ASP.net Oracle ASP

总结：可以通过parentElement定位父级元素，有待验证

<html>
 <head>
  <title>Adding and Removing Rows from a table using DHTML and JavaScript</title>
  <script language="javascript">
  
   //add a new row to the table
   function addRow()
   {
    //add a row to the rows collection and get a reference to the newly added row
    var newRow = document.all("tblGrid").insertRow();
    
    //add 3 cells (<td>) to the new row and set the innerHTML to contain text boxes
    
    var oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t1'>";
    
    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t2'>";
    
    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t3'> &nbsp;&nbsp;<input type='button' value='Delete' onclick='removeRow(this);'/>";   
   }
   
   //deletes the specified row from the table
   function removeRow(src)
   {
    /* src refers to the input button that was clicked. 
       to get a reference to the containing <tr> element,
       get the parent of the parent (in this case case <tr>)
    */   
    var oRow = src.parentElement.parentElement;  
    
    //once the row reference is obtained, delete it passing in its rowIndex   
    document.all("tblGrid").deleteRow(oRow.rowIndex);  
   }
  
  </script>
 </head>
 <body>
  Demo of a simple table grid that allows adding and deleting rows using DHTML 
  and Javascript 
  <p/>
  Try it out - Click on the Delete button to delete the corresponding row. Click Add Row button to insert a new row.
  <p/>
  <p/>Browser compatility - this sample has been tested to work with IE5.0 and above.
  <p/>
  <hr>
  <!-- sample table grid with 3 columns and 4 rows that are presented by default -->
  <table id="tblGrid" style="table-layout:fixed">
   <tr>
    <td width="150px">Field1</td>
    <td width="150px">Field2</td>
    <td width="250px">Field3</td>
   </tr>
   <tr>
    <td><input type="text" name="t1" /></td>
    <td><input type="text" name="t2" /></td>
    <td><input type="text" name="t3" /> &nbsp;&nbsp;<input type="button" value="Delete" onclick="removeRow(this);" /></td>
   </tr>
   <tr>
    <td><input type="text" name="t1" /></td>
    <td><input type="text" name="t2" /></td>
    <td><input type="text" name="t3" /> &nbsp;&nbsp;<input type="button" value="Delete" onclick="removeRow(this);" /></td>
   </tr>
   <tr>
    <td><input type="text" name="t1" /></td>
    <td><input type="text" name="t2" /></td>
    <td><input type=&quot;text" name="t3" /> &nbsp;&nbsp;<input type="button" value="Delete" onclick="removeRow(this);" /></td>
   </tr>
   <tr>
    <td><input type="text" name="t1" /></td>
    <td><input type="text" name="t2" /></td>
    <td><input type="text" name="t3" /> &nbsp;&nbsp;<input type="button" value="Delete" onclick="removeRow(this);" /></td>
   </tr>
  </table>
  <hr>
  <input type="button" value="Add Row" onclick="addRow();" />
  <hr>
  <a href='http://www.interviewboard.com'>Interviewboard - Interview Questions and Answers on ASP.NET, C#, SQL, Oracle and more....</a>
 </body>
</html>

文章出处：DIY部落(http://www.diybl.com/course/1_web/javascript/jsjs/200897/139878.html)

分享到：

戏说java web开发中的listener和filter | 判断页面属于哪个iframe

2009-07-17 13:33
浏览 5587
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

alexnet模型-通过CNN卷积神经网络的动漫角色识别-不含数据集图片-含逐行注释和说明文档.zip: 本代码是基于python pytorch环境安装的。下载本代码后，有个环境安装的requirement.txt文本首先是代码的整体介绍总共是3个py文件，十分的简便本代码是不含数据集图片的，下载本代码后需要自行搜集图片放到对应的文件夹下即可需要我们往每个文件夹下搜集来图片放到对应文件夹下，每个对应的文件夹里面也有一张提示图，提示图片放的位置然后我们需要将搜集来的图片，直接放到对应的文件夹下，就可以对代码进行训练了。运行01生成txt.py,是将数据集文件夹下的图片路径和对应的标签生成txt格式,划分了训练集和验证集运行02CNN训练数据集.py,会自动读取txt文本内的内容进行训练，这里是适配了数据集的分类文件夹个数，即使增加了分类文件夹，也不需要修改代码即可训练训练过程中会有训练进度条，可以查看大概训练的时长,每个epoch训练完后会显示准确率和损失值训练结束后，会保存log日志，记录每个epoch的准确率和损失值最后训练的模型会保存在本地名称为model.ckpt 运行03pyqt界面.py，就可以实现自己训练好的模型去识别图片了

电商购物网站 SSM毕业设计附带论文.zip: 电商购物网站 SSM毕业设计附带论文启动教程:https://www.bilibili.com/video/BV1GK1iYyE2B

题目源码2024年强网杯全国网络安全挑战赛 Pwn题目chat-with-me源码: 强网杯

mobilenet模型-基于深度学习AI算法对建筑装饰风格识别-不含数据集图片-含逐行注释和说明文档.zip: 本代码是基于python pytorch环境安装的。下载本代码后，有个环境安装的requirement.txt文本首先是代码的整体介绍总共是3个py文件，十分的简便本代码是不含数据集图片的，下载本代码后需要自行搜集图片放到对应的文件夹下即可需要我们往每个文件夹下搜集来图片放到对应文件夹下，每个对应的文件夹里面也有一张提示图，提示图片放的位置然后我们需要将搜集来的图片，直接放到对应的文件夹下，就可以对代码进行训练了。运行01生成txt.py,是将数据集文件夹下的图片路径和对应的标签生成txt格式,划分了训练集和验证集运行02CNN训练数据集.py,会自动读取txt文本内的内容进行训练，这里是适配了数据集的分类文件夹个数，即使增加了分类文件夹，也不需要修改代码即可训练训练过程中会有训练进度条，可以查看大概训练的时长,每个epoch训练完后会显示准确率和损失值训练结束后，会保存log日志，记录每个epoch的准确率和损失值最后训练的模型会保存在本地名称为model.ckpt 运行03pyqt界面.py，就可以实现自己训练好的模型去识别图片了

2-数字化转型对企业劳动力就业的影响的研究数据（2001-2021年）.zip: 随着数字技术和企业数字化转型的推进，企业的人力资源管理方式也在不断的变化，尤其是企业数字化转型对劳动力就业产生了深远的影响。传统制造企业的工作模式一般是人工操作，处于低劳动力成本下的位置，而数字化转型要求企业应用物联网、云计算、大数据等先进技术，提高生产效率和减少人力成本。数字化转型对企业劳动力就业的影响是多方面的，除替代性影响外，还会给企业带来新的机会，促进员工自我提升和企业人力资源管理意识的提高。本数据的整理让大家能够更清晰了解数字化转型对有关企业劳动力就业的影响。相关数据指标企业年龄，资产负债率，流动比率，股权集中度，所有制性质，总资产收益率，地区人均GDP

非常好的电子设计小软件GIF2BMP非常好用的软件.zip: 非常好的电子设计小软件GIF2BMP非常好用的软件.zip

学报稿件管理系统 SSM毕业设计附带论文.zip: 学报稿件管理系统 SSM毕业设计附带论文启动教程:https://www.bilibili.com/video/BV1GK1iYyE2B

OpenSSL 1.1加密开源库: OpenSSL 是一个用于实现安全通信的软件包，它由一组密码学函数库组成。它的主要目标是通过使用公开的密码学算法来保护数据的机密性、完整性和身份验证。它支持对称加密、非对称加密、数字签名、证书管理等功能。

文书用电子小印生成器V124: 可以根据需要生成小印章，自己输入文字、选择日期、调整颜色。

锐捷三擎云办公解决方案3.0全面提升用户体验和数据安全: 内容概要：文章介绍了锐捷三擎云办公解决方案3.0的关键技术和应用场景。该解决方案通过多项技术创新提升了用户体验和数据安全性，支持多层防护、自研协议、多终端适配和高效资源管理等功能。适用人群：企业IT管理人员和技术爱好者。使用场景及目标：该方案适用于各种企业的云办公需求，包括普通办公、研发、移动办公等，主要目标是提高用户办公体验，加强数据安全管理和提升资源利用效率。其他说明：解决方案还包括全面的用户管理、桌面管理和策略管理，确保系统的整体稳定性和易管理性。同时，支持第三方设备和平台的灵活纳管，实现业务敏捷。

springboo母婴商城: 摘要现代经济快节奏发展以及不断完善升级的信息化技术，让传统数据信息的管理升级为软件存储，归纳，集中处理数据信息的管理方式。本母婴商城系统就是在这样的大环境下诞生，其可以帮助管理者在短时间内处理完毕庞大的数据信息，使用这种软件工具可以帮助管理人员提高事务处理效率，达到事半功倍的效果。此母婴商城系统利用当下成熟完善的SSM框架，使用跨平台的可开发大型商业网站的Java语言，以及最受欢迎的RDBMS应用软件之一的Mysql数据库进行程序开发.母婴商城系统的开发根据操作人员需要设计的界面简洁美观，在功能模块布局上跟同类型网站保持一致，程序在实现基本要求功能时，也为数据信息面临的安全问题提供了一些实用的解决方案。可以说该程序在帮助管理者高效率地处理工作事务的同时，也实现了数据信息的整体化，规范化与自动化。关键词：母婴商城系统；SSM框架；Mysql；自动化

w 是一个大于10的无符号整数，若 w 是 n (n ≥ 2)位的整数，函数求出w的低 n-1位的数作为函数值返回: c语言基础代码练习题

基于Java的SQL慢查询镜像分析工具设计源码: 该项目是一款基于Java语言开发的SQL慢查询镜像分析工具源码，总共有53个文件，其中包含38个Java源文件、4个XML配置文件、3个属性文件、2个Git忽略文件、2个PNG图片文件、1个Markdown文件、1个JPG图片文件、1个SQL文件和1个YML文件。该工具旨在辅助开发人员高效识别和解决MyBatis数据库操作中的性能瓶颈，尤其是针对那些可能导致应用程序响应缓慢或资源消耗过高的慢SQL查询问题。

【java毕业设计】KTV点歌系统源码（ssm+jsp+mysql+说明文档+LW）.zip: 功能说明：实现功能包括管理员：个人中心、用户管理、歌曲库管理、歌曲类型管理、点歌信息管理，用户：个人中心、歌曲库管理、点歌信息管理等功能。环境说明：开发语言：java 框架：ssm jdk版本：jdk1.8 数据库：mysql 5.7+ 数据库工具：Navicat11+ 管理工具：maven 开发工具：idea/eclipse 部署容器：tomcat7+

Screenrecorder-2024-11-07-21-33-20-304.mp4: Screenrecorder-2024-11-07-21-33-20-304.mp4

stata软件安装包（stata18）（stata软件安装包下载与安装）: 软件主体：stata软件安装包。版本：stata18。价格：免费。安装教程：请阅读本人相对应的安装教程文章。描述：安装教程保姆级别仔细，直接按步骤来就行了。本人申明：本安装包需要的人可以免费获取，不用于商业买卖，只用于学术研究。（如果可以帮到大家就给个关注吧）

基于C++云飞针图像，把麻将的每张牌分离并识别，其中使用了颜色直方图和25维像素占比两种特征，识别方法采用了SVM: 【作品名称】：基于C++云飞针图像，把麻将的每张牌分离并识别，其中使用了颜色直方图和25维像素占比两种特征，识别方法采用了SVM 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。【项目介绍】：基于C++云飞针图像，把麻将的每张牌分离并识别，其中使用了颜色直方图和25维像素占比两种特征，识别方法采用了SVM 基于C++云飞针图像，把麻将的每张牌分离并识别，其中使用了颜色直方图和25维像素占比两种特征，识别方法采用了SVM 基于C++云飞针图像，把麻将的每张牌分离并识别，其中使用了颜色直方图和25维像素占比两种特征，识别方法采用了SVM 基于C++云飞针图像，把麻将的每张牌分离并识别，其中使用了颜色直方图和25维像素占比两种特征，识别方法采用了SVM 【资源声明】：本资源作为“参考资料”而不是“定制需求”，代码只能作为参考，不能完全复制照搬。需要有一定的基础看懂代码，自行调试代码并解决报错，能自行添加功能修改代码。

IMG_3659.JPG: IMG_3659.JPG

数据分析 - 机器学习写诗 - python: 数据分析 - 机器学习写诗 - python Chinese_poem、lyrics_writer、poet_master

性能优化与加载时间控制.docx: 性能优化与加载时间控制.docx

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js操作html增加删除tr/td

评论

发表评论

相关推荐

[转]js获取滚动条位置：绝对有效（经验之谈）

Javascript 最简单检测网速的方法和应用

js自定义对象

IE6，IE7和FireFox兼容处理（持续发现中）

Javascript的IE和Firefox兼容性汇编

FF IE 兼容动态增加onclick事件

javascript十个最常用的自定义函数

js 事件的动态添加与注销

JavaScript通过attachEvent和detachEvent方法处理带参数的函数

用javascript编写优美的代码

如何使用Javascript格式化日期显示

Javascript操作Select和Option

javascript下的时间函数详解

JS网页高度相关

JS 中面向对象的5种写法

用javasript判断一个图片的宽度，如果宽度小于一个数值，就以正常显示，大于就设置宽度width属性

js替换br 为换行 textarea

判断页面属于哪个iframe

最基础的JS添加样式实例

Js动态添加样式

最近访客更多访客>>