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代码
Mar 16 Javascript
jquery $.ajax入门应用一
Nov 19 Javascript
Json实现异步请求提交评论无需跳转其他页面
Oct 11 Javascript
node.js中的fs.chownSync方法使用说明
Dec 16 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
Aug 15 Javascript
使用JS正则表达式 替换括号,尖括号等
Nov 29 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
Jan 10 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
ReactRouter的实现方法
Jan 25 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
Smarty中常用变量操作符汇总
2014/10/27 PHP
php批量删除操作代码分享
2017/02/26 PHP
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
Element Card 卡片的具体使用
2020/07/26 Javascript
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
Python入门之三角函数全解【收藏】
2017/11/08 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
Django model class Meta原理解析
2020/11/14 Python
Python实现钉钉/企业微信自动打卡的示例代码
2021/02/02 Python
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
为什么要用EJB
2014/04/17 面试题
班组长的岗位职责
2013/12/09 职场文书
写给老婆的检讨书
2014/02/21 职场文书
文明家庭事迹材料
2014/12/20 职场文书
新员工入职欢迎词
2015/01/23 职场文书
代理词怎么写
2015/05/25 职场文书
继续教育心得体会(共6篇)
2016/01/19 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python
Win11查看设备管理器
2022/04/19 数码科技
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers