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编程起步(第七课)
Feb 27 Javascript
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
自己编写的类似JS的trim方法
Oct 09 Javascript
jquery实现弹出层完美居中效果
Mar 03 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
浅谈javascript事件取消和阻止冒泡
May 26 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
React组件中的this的具体使用
Feb 28 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
Apache服务器无法使用的解决方法
2013/05/08 PHP
php遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
php命令行用法入门实例教程
2014/10/27 PHP
PHP多文件上传类实例
2015/03/07 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
一个实用的php验证码类
2017/07/06 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
JS给按钮添加跳转功能类似a标签
2017/05/30 Javascript
利用vue重构有赞商城的思路以及总结整理
2019/02/21 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
多个应用共存的Django配置方法
2018/05/30 Python
python 图像平移和旋转的实例
2019/01/10 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
Python基于locals返回作用域字典
2020/10/17 Python
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
database面试题
2013/03/28 面试题
摄影实习自我鉴定
2013/09/20 职场文书
煤矿班组长的职责
2013/12/25 职场文书
学习心得体会
2014/01/01 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
万能检讨书
2015/01/27 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
浅谈JS的二进制家族
2021/05/09 Javascript