JavaScript实现动态添加,删除行的方法实例详解


Posted in Javascript onJuly 02, 2015

本文实例讲述了JavaScript实现动态添加,删除行的方法。分享给大家供大家参考。具体如下:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>增加Table行</title>
  </head>
<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='javascript:;' onclick=\"DeleteSignRow('SignItem" + 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>
  <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="添加参与人" onclick="AddSignRow()" />
   <input type="button" name="Submit2" value="清空" onclick="ClearAllSign()" />
   <input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" />
  </div>
  </body>
</html>

JavaScript实现动态的增加或删除table的行

<SCRIPT LANGUAGE="JScript"> 
function numberCells() 
{
  var count=0;
  for (i=0; i < document.all.mytable.rows.length; i++)
  {
    for (j=0; j < document.all.mytable.rows(i).cells.length; j++) 
    {
      document.all.mytable.rows(i).cells(j).innerText = count;
      count++;
    }
  }
}
function tb_addnew()
{
  var ls_t=document.all("mytable")
  maxcell=ls_t.rows(0).cells.length;
  mynewrow = ls_t.insertRow();
  for(i=0;i<maxcell;i++)
  {
    mynewcell=mynewrow.insertCell();
    mynewcell.innerText="a"+i;
  }
}
function tb_delete()
{
  var ls_t=document.all("mytable");
  maxcell=ls_t.rows.length;
  if(maxcell > 1)
  {
    ls_t.deleteRow() ;
  }
}
</SCRIPT>
<BODY onload="numberCells()">
<TABLE id=mytable border=1>
<TR><TH> </TH><TH> </TH><TH> </TH><TH> </TH></TR>
<TR><TD> </TD><TD> </TD><TD> </TD><TD> </TD></TR>
<TR><TD> </TD><TD> </TD><TD> </TD><TD> </TD></TR>
</TABLE>
<input type=button value="Ins Row" onclick="tb_addnew()">
<input type=button value="Del Row" onclick="tb_delete()" >

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript与CSS复习(二)
Jun 29 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
使图片旋转的3种解决方案
Nov 21 Javascript
jquery 判断滚动条到达了底部和顶端的方法
Apr 02 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
初步使用bootstrap快速创建页面
Mar 03 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
javascript获取select值的方法分析
Jul 02 #Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 #Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 #Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
Jul 01 #Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
Jul 01 #Javascript
JS访问SWF的函数用法实例
Jul 01 #Javascript
JS随机调用指定函数的方法
Jul 01 #Javascript
You might like
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
建立文件交换功能的脚本(一)
2006/10/09 PHP
一个简单的域名注册情况查询程序
2006/10/09 PHP
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
php需登录的文件上传管理系统
2020/03/21 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
Vue-cli3多页面配置详解
2020/03/22 Javascript
一个Python最简单的接口自动化框架
2018/01/02 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
三星法国官方网站:Samsung法国
2019/10/31 全球购物
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
银行实习生的自我评价
2014/01/13 职场文书
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
和谐社区口号
2014/06/19 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
会计电算化实训报告
2014/11/04 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
大学生逃课检讨书
2015/05/04 职场文书
人民的好儿女观后感
2015/06/18 职场文书
python使用glob检索文件的操作
2021/05/20 Python