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 相关文章推荐
Jquery知识点一 Jquery的ready和Dom的onload的区别
Jan 15 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 Javascript
jquery入门—编写一个导航条(可伸缩)
Jan 07 Javascript
Node.js 的异步 IO 性能探讨
Oct 08 Javascript
JavaScript中的方法调用详细介绍
Dec 30 Javascript
原生js和jQuery写的网页选项卡特效对比
Apr 27 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
Dec 20 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 Javascript
前端性能优化建议
Sep 17 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 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
类的另类用法--数据的封装
2006/10/09 PHP
PHP 页面编码声明方法详解(header或meta)
2010/03/12 PHP
PHP 缓存实现代码及详细注释
2010/05/16 PHP
PHP+JQuery+Ajax实现分页方法详解
2016/08/06 PHP
php 伪造HTTP_REFERER页面URL来源的三种方法
2016/09/22 PHP
javascript 选择文件夹对话框(web)
2009/07/07 Javascript
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
angular.element方法汇总
2015/01/07 Javascript
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
Django中URLconf和include()的协同工作方法
2015/07/20 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
Python post请求实现代码实例
2020/02/28 Python
python 写一个文件分发小程序
2020/12/05 Python
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
在C#中如何实现多态
2014/07/02 面试题
工程造价专业大学生职业规划范文
2014/03/09 职场文书
法律顾问服务方案
2014/05/15 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
应用心理学专业求职信
2014/08/04 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
先进教师个人总结
2015/02/11 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
git stash(储藏)的用法总结
2022/06/25 Servers