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 相关文章推荐
IE7提供XMLHttpRequest对象为兼容
Mar 08 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
node.js实现多图片上传实例
Jun 03 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
微信小程序实现顶部导航特效
Jan 28 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 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开发文件系统实例讲解
2006/10/09 PHP
PHP 采集程序中常用的函数
2009/12/09 PHP
PHP iconv 解决utf-8和gb2312编码转换问题
2010/04/12 PHP
PHP 函数执行效率的小比较
2010/10/17 PHP
php验证是否是md5编码的简单代码
2014/04/01 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
Javascript的闭包详解
2014/12/26 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
招聘专员岗位职责
2014/03/07 职场文书
经典毕业生求职信
2014/07/12 职场文书
捐书倡议书
2014/08/29 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
党员争先创优承诺书
2015/01/20 职场文书
中国世界遗产导游词
2015/02/13 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
九年级历史教学反思
2016/02/19 职场文书
九年级语文教学反思
2016/03/03 职场文书
基于Redis延迟队列的实现代码
2021/05/13 Redis
Python机器学习之KNN近邻算法
2021/05/14 Python