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 相关文章推荐
多引号嵌套的变量命名的问题
May 09 Javascript
json属性名为什么要双引号(个人猜测)
Jul 31 Javascript
node.js中的console.log方法使用说明
Dec 09 Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
浅谈JavaScript中promise的使用
Jan 11 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
Bootstrap实现模态框效果
Sep 30 Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 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
Protoss魔法科技
2020/03/14 星际争霸
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
用javascript实现计算两个日期的间隔天数
2007/08/14 Javascript
javascript与CSS复习(二)
2010/06/29 Javascript
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
[03:37]2014DOTA2国际邀请赛 主赛事第一日胜者组TOPPLAY
2014/07/19 DOTA
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
[40:01]OG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python中stdout输出不缓存的设置方法
2014/05/29 Python
Python制作简易注册登录系统
2016/12/15 Python
python爬取指定微信公众号文章
2018/12/20 Python
python对象与json相互转换的方法
2019/05/07 Python
python中count函数简单用法
2020/01/05 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
AOP的定义以及作用
2013/09/08 面试题
类的返射机制中的包及核心类
2016/09/12 面试题
审计工作个人的自我评价
2013/12/25 职场文书
精神文明建设标语
2014/06/16 职场文书
初二数学教学反思
2016/02/17 职场文书
学校团代会开幕词
2016/03/04 职场文书
Python数据分析之pandas读取数据
2021/06/02 Python
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers