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 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
Jun 10 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
jQuery点击头像上传并预览图片
Feb 23 Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
讲解vue-router之命名路由和命名视图
May 28 Javascript
JSON.stringify()方法讲解
Jan 31 Javascript
微信小程序select下拉框实现效果
May 15 Javascript
js实现登录拖拽窗口
Feb 10 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/06/18 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
php读取3389的脚本
2014/05/06 PHP
php检测文本的编码
2015/07/26 PHP
JavaScript DOM进阶方法
2015/04/13 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
layui选项卡效果实现代码
2017/05/19 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
Python中Django发送带图片和附件的邮件
2017/03/31 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
佳能加拿大网上商店:Canon eStore Canada
2018/04/04 全球购物
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
我的求职计划书
2014/01/10 职场文书
业务部门经理岗位职责
2014/02/23 职场文书
体育专业自荐书
2014/05/29 职场文书
中国梦读书活动总结
2014/07/10 职场文书
伏羲庙导游词
2015/02/09 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
致我们终将逝去的青春观后感
2015/06/10 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书
防止web项目中的SQL注入
2021/12/06 MySQL
tree shaking对打包体积优化及作用
2022/07/07 Java/Android
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python