js动态给table添加/删除tr的方法


Posted in Javascript onAugust 02, 2013
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript">// Example: obj = findObj("image1");
function findObj(theObj, theDoc)
{ 
var p, i, foundObj; 
if(!theDoc) theDoc = document; 
if( (p = theObj.indexOf("?")) > 0 && parent.frames.length) 
{ theDoc = parent.frames[theObj.substring(p+1)].document; theObj = theObj.substring(0,p); } if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj]; for (i=0; !foundObj && i < theDoc.forms.length; i++) foundObj = theDoc.forms[i][theObj]; for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++) foundObj = findObj(theObj,theDoc.layers[i].document); if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj); return foundObj;
}
//添加一个参与人填写行
function AddSignRow(){ //读取最后一行的行号,存放在txtTRLastIndex文本框中 
var txtTRLastIndex = findObj("txtTRLastIndex",document);
var rowID = parseInt(txtTRLastIndex.value);
var signFrame = findObj("SignFrame",document);
//添加行
var newTR = signFrame.insertRow(signFrame.rows.length);
newTR.id = "SignItem" + rowID;
//添加列:序号
var newNameTD=newTR.insertCell(0);
//添加列内容
newNameTD.innerHTML = newTR.rowIndex.toString();
//添加列:姓名
var newNameTD=newTR.insertCell(1);
//添加列内容
newNameTD.innerHTML = "<input name='txtName" + rowID + "' id='txtName" + rowID + "' type='text' size='12' />";
//添加列:电子邮箱
var newEmailTD=newTR.insertCell(2);
//添加列内容
newEmailTD.innerHTML = "<input name='txtEMail" + rowID + "' id='txtEmail" + rowID + "' type='text' size='20' />";
//添加列:电话
var newTelTD=newTR.insertCell(3);
//添加列内容
newTelTD.innerHTML = "<input name='txtTel" + rowID + "' id='txtTel" + rowID + "' type='text' size='10' />";
//添加列:手机
var newMobileTD=newTR.insertCell(4);
//添加列内容
newMobileTD.innerHTML = "<input name='txtMobile" + rowID + "' id='txtMobile" + rowID + "' type='text' size='12' />";//添加列:公司名
var newCompanyTD=newTR.insertCell(5);
//添加列内容
newCompanyTD.innerHTML = "<input name='txtCompany" + rowID + "' id='txtCompany" + rowID + "' type='text' size='20' />";

//添加列:删除按钮
var newDeleteTD=newTR.insertCell(6);
//添加列内容
newDeleteTD.innerHTML = "<div align='center' style='width:40px'><a href='#'" + rowID + "')">删除</a></div>";
//将行号推进下一行
txtTRLastIndex.value = (rowID + 1).toString() ;
}
//删除指定行
function DeleteSignRow(rowid){
var signFrame = findObj("SignFrame",document);
var signItem = findObj(rowid,document);
//获取将要删除的行的Index
var rowIndex = signItem.rowIndex;
//删除指定Index的行
signFrame.deleteRow(rowIndex);
//重新排列序号,如果没有序号,这一步省略
for(i=rowIndex;i<signFrame.rows.length;i++){
signFrame.rows[i].cells[0].innerHTML = i.toString();
}
}//清空列表
function ClearAllSign(){
if(confirm('确定要清空所有参与人吗?')){
var signFrame = findObj("SignFrame",document);
var rowscount = signFrame.rows.length;
//循环删除行,从最后一行往前删除
for(i=rowscount - 1;i > 0; i--){
signFrame.deleteRow(i);
}
//重置最后行号为1
var txtTRLastIndex = findObj("txtTRLastIndex",document);
txtTRLastIndex.value = "1";
//预添加一行
AddSignRow();
}
}
</script>
</HEAD>
<BODY>
<div>
<table width="613" border="0" cellpadding="2" cellspacing="1" id="SignFrame">
<tr id="trHeader">
<td width="27" bgcolor="#96E0E2">序号</td>
<td width="64" bgcolor="#96E0E2">用户姓名</td>
<td width="98" bgcolor="#96E0E2">电子邮箱</td>
<td width="92" bgcolor="#96E0E2">固定电话</td>
<td width="86" bgcolor="#96E0E2">移动手机</td>
<td width="153" bgcolor="#96E0E2">公司名称</td>
<td width="57" align="center" bgcolor="#96E0E2"> </td>
</tr>
</table>
</div>
<div>
<input type="button" name="Submit" value="添加参与人" /> 
<input type="button" name="Submit2" value="清空" />
<input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" />
</div>
</BODY>
</HTML>
Javascript 相关文章推荐
奉献给JavaScript初学者的编写开发的七个细节
Jan 11 Javascript
jQuery Animation实现CSS3动画示例介绍
Aug 14 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 Javascript
常用的javascript设计模式
Jan 11 Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
Aug 02 #Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 #Javascript
JS限制Textarea文本域字符个数的具体实现
Aug 02 #Javascript
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 #Javascript
JS解决ie6下png透明的方法实例
Aug 02 #Javascript
用innerhtml提高页面打开速度的方法
Aug 02 #Javascript
JQuery 获取json数据$.getJSON方法的实例代码
Aug 02 #Javascript
You might like
2021年最新CPU天梯图
2021/03/04 数码科技
PHP+MYSQL 出现乱码的解决方法
2008/08/08 PHP
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
php curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
使用Vue自定义指令实现Select组件
2018/05/24 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
2020/09/12 Javascript
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
解读Python编程中的命名空间与作用域
2015/10/16 Python
Python 登录网站详解及实例
2017/04/11 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
Python中私有属性的定义方式
2020/03/05 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
Pycharm-community-2020.2.3 社区版安装教程图文详解
2020/12/08 Python
当当网官方旗舰店:中国图书销售夺金品牌
2018/04/02 全球购物
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
英国自行车商店:AW Cycles
2021/02/24 全球购物
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
文明家庭先进事迹材料
2014/05/14 职场文书
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
护士年终个人总结
2015/02/13 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP