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 相关文章推荐
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
Jun 24 Javascript
图解JavaScript中的this关键字
May 28 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
PassWord输入框代码分享
Jun 07 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
JS实现的合并两个有序链表算法示例
Feb 25 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 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/08/07 PHP
php二分查找二种实现示例
2014/03/12 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
python利用beautifulSoup实现爬虫
2014/09/29 Python
python逆序打印各位数字的方法
2018/06/25 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
python计算导数并绘图的实例
2020/02/29 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
中年人生感言
2014/02/04 职场文书
《长城》教学反思
2014/02/14 职场文书
《乡愁》教学反思
2014/02/18 职场文书
气象学专业个人求职信
2014/03/15 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
参观邀请函范文
2015/02/02 职场文书
导游词300字
2015/02/13 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
宝宝满月祝酒词
2015/08/10 职场文书
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript