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 设置某DIV区域内的checkbox复选框
Nov 30 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
Jan 07 Javascript
jQuery 计算iframe 窗口大小的方法
May 13 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
jQuery中$(function() {});问题详解
Aug 10 Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 Javascript
JavaScript提高性能知识点汇总
Jan 15 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
Easyui使用Dialog行内按钮布局的实例
Jul 27 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 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 面向对象之成员方法详解
2013/05/04 PHP
php判断两个浮点数是否相等的方法
2015/03/14 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
windows系统php环境安装swoole具体步骤
2021/03/04 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
vue引入ueditor及node后台配置详解
2018/01/03 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
基于VUE实现判断设备是PC还是移动端
2020/07/03 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
Python元组常见操作示例
2019/02/19 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
中专毕业生的自我鉴定
2013/12/01 职场文书
2014年会演讲稿范文
2014/01/06 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript