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中void(0)的具体含义解释
Aug 02 Javascript
EXT窗口Window及对话框MessageBox
Jan 27 Javascript
5个javascript的数字格式化函数分享
Dec 07 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 Javascript
基于javascript编写简单日历
May 02 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
JavaScript设计模型Iterator实例解析
Jan 22 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 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
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
JavaScript中的类继承
2010/11/25 Javascript
JS编程小常识很有用
2012/11/26 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
js判断设备是否为PC并调整图片大小
2014/02/12 Javascript
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
Python获取系统默认字符编码的方法
2015/06/04 Python
python发送HTTP请求的方法小结
2015/07/08 Python
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
深入理解Django中内置的用户认证
2017/10/06 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
基于python实现获取网页图片过程解析
2020/05/11 Python
python实现网页录音效果
2020/10/26 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
中学劳技课教师的自我评价
2014/02/05 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
小学毕业感言200字
2015/07/30 职场文书
远程教育培训心得体会
2016/01/09 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
Nginx的反向代理实例详解
2021/03/31 Servers