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权威指南 学习笔记之null和undefined
Sep 25 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
Jan 11 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
css和js实现弹出登录居中界面完整代码
Nov 26 Javascript
微信小程序switch开关选择器使用详解
Jan 31 Javascript
vue中el-upload上传图片到七牛的示例代码
Oct 19 Javascript
vue+eslint+vscode配置教程
Aug 09 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
Jul 20 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
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
基于php实现长连接的方法与注意事项的问题
2013/05/10 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
PHP数据库操作三:redis用法分析
2017/08/16 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
js或css文件后面跟参数的原因说明
2010/01/09 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
JS画5角星方法介绍
2013/09/17 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
2016/08/10 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
Python的函数嵌套的使用方法
2014/01/24 Python
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
python查看zip包中文件及大小的方法
2015/07/09 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
django最快程序开发流程详解
2019/07/19 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
Python使用windows设置定时执行脚本
2020/11/12 Python
建筑设计专业求职自我评价
2014/03/02 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang