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 相关文章推荐
Ext 表单布局实例代码
Apr 30 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 Javascript
JavaScript动态创建form表单并提交的实现方法
Dec 10 Javascript
JavaScript中的Object对象学习教程
May 20 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 Javascript
详解VUE 定义全局变量的几种实现方式
Jun 01 Javascript
vue v-for 使用问题整理小结
Aug 04 Javascript
javascript之分片上传,断点续传的实际项目实现详解
Sep 05 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
PHPlet在Windows下的安装
2006/10/09 PHP
一贴学会PHP 新手入门教程
2009/08/03 PHP
php实现的css文件背景图片下载器代码
2014/11/11 PHP
js Form.elements[i]的使用实例
2011/11/13 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
浅谈Python 中整型对象的存储问题
2016/05/16 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
解析python实现Lasso回归
2019/09/11 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
快速解决pymongo操作mongodb的时区问题
2020/12/05 Python
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
家长给孩子的表扬信
2014/01/17 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
继承权公证书
2014/04/09 职场文书
药品业务员岗位职责
2014/04/17 职场文书
祖国在我心中的演讲稿
2014/05/04 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
留学推荐信中文范文
2015/03/26 职场文书
某某店铺的开业庆典主持词范本
2019/11/25 职场文书
浅谈Redis的几个过期策略
2021/05/27 Redis
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL