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 相关文章推荐
Js 获取Gridview选中行的内容操作步骤
Feb 05 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
Vue.js添加组件操作示例
Jun 13 Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
Electron 调用命令行(cmd)
Sep 23 Javascript
Vuex的API文档说明详解
Feb 05 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
Aug 03 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
Nov 07 Javascript
create-react-app开发常用配置教程
Jun 25 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
PHP include任意文件或URL介绍
2014/04/29 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
详解python多线程之间的同步(一)
2019/04/03 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
Python解析json时提示“string indices must be integers”问题解决方法
2019/07/31 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
如何通过Django使用本地css/js文件
2020/01/20 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
幼儿园大班教学反思
2014/02/10 职场文书
小小的船教学反思
2014/02/21 职场文书
2015年除四害工作总结
2015/07/23 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏