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学习阶段性总结(2)--(X)HTML学习
Feb 03 Javascript
date.parse在IE和FF中的区别
Jul 29 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
jQuery+ajax实现文章点赞功能的方法
Dec 31 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
AngularJS路由Ui-router模块用法示例
May 29 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 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笔记之:文章中图片处理的使用
2013/04/26 PHP
PHP提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
Prototype 工具函数 学习
2009/07/23 Javascript
jQuery 表单验证扩展(三)
2010/10/20 Javascript
jQuery function的正确书写方法
2013/08/02 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
VsCode插件整理(小结)
2017/09/14 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
如何基于python生成list的所有的子集
2019/11/11 Python
AmazeUI 列表的实现示例
2020/08/17 HTML / CSS
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
一组SQL面试题
2016/02/15 面试题
养殖人员的创业计划书范文
2013/12/26 职场文书
优秀党务工作者事迹材料
2014/05/07 职场文书
先进工作者推荐材料
2014/12/23 职场文书
机械生产实习心得体会
2016/01/22 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery
python tkinter模块的简单使用
2021/04/07 Python
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫