javascript实现动态增加删除表格行(兼容IE/FF)


Posted in Javascript onApril 02, 2007

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>动态增删表格行</title>
<script language="JavaScript">
<!--
//author: Robin
//email: griefforyou@gmail.com

var rowIndex=0;
function addLine(obj){
var objSourceRow=obj.parentNode.parentNode;
var objTable=obj.parentNode.parentNode.parentNode.parentNode;
if(obj.value=='增加'){
rowIndex++;
var objRow=objTable.insertRow(rowIndex);
var objCell;

objCell=objRow.insertCell(0);
objCell.innerHTML=" "; 

objCell=objRow.insertCell(1);
objCell.innerHTML=objSourceRow.cells[1].innerHTML;

objCell=objRow.insertCell(2);
objCell.innerHTML=objSourceRow.cells[2].innerHTML.replace(/增加/,'删除');
}
else{
objTable.lastChild.removeChild(objSourceRow);
rowIndex--;

}

function removeLine(){

}

//-->
</script>
</head>
<body bgcolor="#ffffff">
<form name="form1" method="post">
<table width="400" border="0">
<tr>
<td>基本信息</td>
<td><select name="select">
<option value="" selected>选择</option>
<option value="1">第一</option>
<option value="2">第二</option>
</select></td>
<td><input name="basicinfo" type="text" id="basicinfo">
<input name="add" type="button" id="add" value="增加" onClick="addLine(this)"></td>
</tr>
<tr>
<td>其它信息</td>
<td> </td>
<td><input type="text" name="textfield"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>

Javascript 相关文章推荐
javascript类继承机制的原理分析
Sep 12 Javascript
innerHTML与jquery里的html()区别介绍
Oct 12 Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
Node.js的基本知识简单汇总
Sep 19 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
JavaScript实现经纬度转换成地址功能
Mar 28 Javascript
vue2.0 keep-alive最佳实践
Jul 06 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
js表达式与运算符简单操作示例
Feb 15 Javascript
js利用iframe实现选项卡效果
Aug 09 Javascript
在IE中调用javascript打开Excel的代码(downmoon原作)
Apr 02 #Javascript
在你的网页中嵌入外部网页的方法
Apr 02 #Javascript
关于文本限制字数的js代码
Apr 02 #Javascript
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 #Javascript
Javascript中的常见排序算法
Mar 27 #Javascript
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
Mar 27 #Javascript
CSDN轮换广告图片轮换效果
Mar 27 #Javascript
You might like
第十一节 重载 [11]
2006/10/09 PHP
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
node通过npm写一个cli命令行工具
2017/10/12 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
Python将图片转换为字符画的方法
2020/06/16 Python
python实现在pandas.DataFrame添加一行
2018/04/04 Python
python 实现登录网页的操作方法
2018/05/11 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
Python常见数据结构之栈与队列用法示例
2019/01/14 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
django列表筛选功能的实现代码
2020/03/27 Python
加拿大最大的书店:Indigo
2017/01/01 全球购物
缴纳养老保险的证明
2014/01/10 职场文书
读书活动总结
2014/04/28 职场文书
保管员岗位职责
2015/02/14 职场文书
行政撤诉申请书
2015/05/18 职场文书