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 相关文章推荐
利用腾讯的ip地址库做ip物理地址定位
Jul 24 Javascript
javascript函数中的arguments参数
Aug 01 Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
javascript自定义startWith()和endWith()的两种方法
Nov 11 Javascript
js实现目录定位正文示例
Nov 14 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
vue项目中使用scss的方法步骤
May 16 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 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
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
Linux基于php-fpm模式的lamp搭建phpmyadmin的方法
2018/10/25 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
2013/06/26 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
jquery实现折叠菜单效果【推荐】
2017/03/08 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
python下对hsv颜色空间进行量化操作
2020/06/04 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
天猫精选:上天猫,就够了
2016/09/21 全球购物
Java里面如何创建一个内部类的实例
2015/01/19 面试题
送餐员岗位职责范本
2014/02/21 职场文书
小学运动会班级口号
2014/06/09 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
教师党员整改措施
2014/10/24 职场文书
同学会邀请函模板
2015/01/30 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
活动新闻稿范文
2015/07/17 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android