`

在页面中动态添加一行以及删除一行列表

    博客分类：
  • JS
JavaScriptJ#WebsphereHTMLIBM 
阅读更多

今天要实现一个在页面中动态添加以及删除一行列表的功能,查找了几种方法,在此备份,以便日后使用:

========================此方法比较简洁，而且可以解决问题========================

function deleteCurrentRow()//刪除當前行

{

  var currRowIndex=event.srcElement.parentNode.parentNode.rowIndex;

  document.all.table10.deleteRow(currRowIndex);//table10--表格id

}

function insertRow()

{

  var nRow=document.all.table10.rows.length; //表格的總行數

  var objTheRow=document.all.table10.insertRow(nRow);//在最下邊新增一行

  objTheRow.insertCell(0);//新增一個單元格

  objTheRow.insertCell(1);

  objTheRow.insertCell(2);

  objTheRow.cells(0).innerHTML=nRow;//對新增的單元格?容

  objTheRow.cells(1).innerHTML=" ";

  objTheRow.cells(2).innerHTML="<input type='button' value='del this row' onClick='deleteCurrentRow()'>";

}

====================我的程序代码======================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>

<HEAD>

<META http-equiv="Content-Type" content="text/html; charset=GB18030">

<META name="GENERATOR" content="IBM WebSphere Studio">

<TITLE>cfbcard.html</TITLE>

</HEAD>

<SCRIPT language="JavaScript">

var j_1 = 1;

function add_row_family(){

 newRow=document.all.family.insertRow(-1) 

 

 newcell=newRow.insertCell() 

 newRow.bgColor='#FFFFFF';

 newcell.className='STYLE3';

 newcell.align='center';

 //newcell.innerHTML="<input type='text' name='familyname"+j_1+"' style='WIDTH: 60px; font-size:9pt; color:#000000' />";

 newcell.innerHTML="<SELECT name='thesistogether"+j_1+"'>"+

                        " <option value='请选择'>"+

      "   请选择"+

      "  </option>"+

      "  <option value='1'>"+

      "   111"+

      "  </option>"+

      "  <option value='2'>"+

      "   222"+

      "  </option>"+

      "  <option value='3'>"+

      "   333"+

      "  </option>"+

      "  <option value='4'>"+

      "   444"+

      "  </option>"+

      "  <option value='5'>"+

      "   555"+

      "  </option>"+

      

                       "</SELECT>";

 for(var i = 0;i<12;i++){

 newcell=newRow.insertCell() ;

 newRow.bgColor='#FFFFFF';

 newcell.className='STYLE3';

 newcell.align='center';

 newcell.innerHTML="<input type='text' name='familyrelation"+j_1+"' style='WIDTH: 60px; font-size:9pt; color:#000000' />";

}

 

 newcell=newRow.insertCell() ;

 newRow.bgColor='#FFFFFF';

 newcell.className='STYLE3';

 newcell.align='center';

 //newcell.innerHTML="<a href='javascript:delTableRow(\""+1+"\")'>删除</a>";

  newcell.innerHTML="<input type='button' value='删除' onClick='deleteCurrentRow()'>";

 j_1++;

 document.all.j_1.value=j_1;

 document.all.family.focus();

}

 

 

 function deleteCurrentRow()//刪除當前行

{

  var currRowIndex=event.srcElement.parentNode.parentNode.rowIndex;

  document.all.family.deleteRow(currRowIndex);//table10--表格id

}

</script>

<body bgcolor="#F5F1F5"  >

<form name="form1" method="post" action="" onsubmit="">

<table>

<tr>

      <td align="right"><INPUT type="button" name="add" onclick="add_row_family();" value="添加"></td>

</tr>

<tr>

     <td>

 <table id="family" style="width:100%" border="1" cellspacing="1" cellpadding="2" class="tbMain">

        <tr>

   <td class="td_name">111</td>

   <td class="td_name">222</td>

   <td class="td_name">333</td>

   <td class="td_name">444</td>

   <td class="td_name">555</td>

   <td class="td_name">666</td>

   <td class="td_name">777</td>

   <td class="td_name">888</td>

   <td class="td_name">999</td>

   <td class="td_name">000</td>

   <td class="td_name">123</td>

   <td class="td_name">456</td>

   <td class="td_name">789</td>

      <td class="td_name">删除</td>

     </tr>

       

    </table>

    </td>

 </tr>

</table>

</form>

</body>

</html>

=================================另外一种方法==============

如何删除表格的行上次讲到了如何动态给表格增加行，那么这次就讲讲如何删除表格的行了。首先建立一个表格，

<table border="1">

 <tr>

  <td>姓名</td>

  <td>地址</td>

 </tr>

 <tbody id="mainbody">

 <tr id="delCell">

  <td>name</td>

  <td>address</td>

 </tr>

 </tbody>

</table>

取得tbody的元素var mailbody = document.getElementById("mainbody");,

接着取得要删除行的元素var cell = document.getElementById("delCell");

最后就是从tbody中移去要删除的行就可以了mainbody.removeChild(cell);

完整的代码如下：

<html>

<head>

 <title>动态删除表格的行</title>

 <script type="text/javascript">

 function deleteCell(){

  var mailbody = document.getElementById("mainbody");

  var cell = document.getElementById("delCell");

  if(cell!=undefined){

     mainbody.removeChild(cell);

  }

 }

</script>

</head>

<body>

<table border="1">

 <tr>

  <td>姓名</td>

  <td>地址</td>

 </tr>

 <tbody id="mainbody">

 <tr id="delCell">

  <td>name</td>

  <td>address</td>

 </tr>

 </tbody>

</table>

<input type="button" value="删除" onclick="deleteCell()"/>

</body>

<html>

分享到：
| DWR 学习笔记<二>util.js学习
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JQuery实现动态表格点击按钮表格增加一行

    动态表格,功能为点击添加按钮，表格增加一行并给其name属性赋予的值，点击删除，自动删除这一行，具体实现如下

    ADF动态添加Form

    在ADF的Table中，我们能实现在表格中添加，编辑，删除行的功能，以及一行数据中的级联。...那么有什么办法能以表单的方式来添加一行，添加一条数据时添加一个表单，直到有多个表单出现在页面上，当然也包括删除.

    JQuery动态添加和删除表格行的方法

    本文实例讲述了JQuery动态添加和删除表格行的方法。分享给大家供大家参考。具体分析如下： 昨天做页面表格行动态添加和删除，看了无数的介绍，发现了一个好东东，JQuery。用它实现起来还真的是很方便，这个是我用到...

    基于JavaScript实现动态添加删除表格的行

    又一个动态控制表格的效果，用JavaScript动态生成表格行、表格列，以及还可动态删除这些行列，行等，运行代码后，点击对应的功能按钮，即可实现对应的表格操作功能。 1.jsp 产品名称 编号 数量 重量 操作 ...

    动态添加JOB spring3.x+quartz2.2+maven+springMVC

    动态添加、删除、暂停、恢复、更新JOB 1.除了合法性，必填校验，功能基本都实现。 2.cronExpression 字段 输入 job 执行的间隔秒，建议2秒执行一次，好测试，看效果。 3.暂停为暂停JOB。 4.恢复为恢复暂停的job...

    JTable实现网页的编辑和删除按钮Demo.rar

    主要代码： BufferedImage bufImg = new ... delLabel.setText("删除"); delLabel.setFont(font); delLabel.setForeground(defColor); delLabel.addMouseListener(mouseL); panel.add(delLabel);

    js实现动态添加上传文件页面

    发邮件是需要添加一些文件，每添加一个文件，页面上可以显示一个表单文件上传选项。 此功能为：初始时刻只有一个添加按钮，当点击添加文件时，会增加一个选择文件和删除区域，同时显示上传按钮，当点击删除，此行...

    js实现对table动态添加、删除和更新的方法

    主要介绍了js实现对table动态添加、删除和更新的方法,涉及javascript针对html中table表格节点的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下

    Vue+Element实现表格编辑、删除、以及新增行的最优方法

    主要为大家详细介绍了Vue+Element实现表格的编辑、删除、以及新增行的最优方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

    JS表操作代码实现增加、删除

    JS表操作代码 实现增加、删除一行 表操作

    JavaScript动态生成表格案例

    然后获取了表格元素及其 tbody 元素，通过 for 循环遍历数组中的每个学生，动态创建了表格的每一行和每个单元格，并将学生的信息填充到对应的单元格中。 最后，为每行的删除操作添加了点击事件处理程序。当用户单击...

    网页自动刷新单击工具 v2.0.zip

    (5) 数据导入功能：首先准备好需要导入的文本文件（下图给出了一个示例），文件中每一行的格式需符合下列要求：a、网址、说明、ID需在同一行，之间用中文或英文的逗号和分号隔开；b、网址、说明、ID的顺序不能乱，...

    一般页面（对某张表增删改查）

    我们根据条件刷选表中的数据放到gridview中以列表形式展现，同时给gridview添加各种样式，比如一般必用的鼠标经过，鼠标离开颜色变化，行选中等颜色加深，同时给列表数据项赋值，单击保存按钮可以修改一条已存在的...

    自己动手制作jquery插件之自动添加删除行功能介绍

     这个插件的演示页面是http://www.lovewebgames.com/demo/autoAdd/autoAdd.html ，引用自己动手制作jquery插件之自动添加删除行(上)里的介绍，这是一个简单的插件，它的作用是:一个系统中有大量的需要对一个行进行...

    电子商务商城网站代码

    有效期内，用户每添加一个积分，有效期延长一天。花费积分时，不改变有效期；对现在已经有积分的用户，用户的积分有效期初始化为：90积分（含以下）为3个月；90积分以上，每个积分增加1天，最长2年；用户可在自己的...

    gfaqs-remove-friend-button:添加一个按钮以允许一键删除GameFAQs好友列表上的好友

    游戏常见问题解答“删除好友”按钮在GameFAQs朋友列表中的每个用户名之后添加一个按钮，以允许一键删除朋友，而不是使用“删除朋友”文本框。自2015年9月29日起该脚本已停产，并且将不再开发与以下浏览器扩展程序之...

    精易官方免费模块v3.60版

    【网页_访问_EX 为测试版本，完善后，将会删除该命令，功能会添加到 网页_访问（）】 2.增加 线程池类1“取状态” 感谢 我叫林舒书 提供参考代码 3.增加 普通填表类“网页_刷新”刷新当前页面 感谢 laiyihan 的建议...

    JavaScript网页特效范例宝典源码

    实例205 在表格中添加行及单元格 322 实例206 删除表中的单元格 324 7.5 表格的特殊效果 325 实例207 透明表格 326 实例208 限制表格的宽度 327 实例209 表格的标题 328 实例210 表格的外阴影 329 实例211 立体表格 ...

    微信小程序 行的删除和增加操作实现详解

    第一步：在项目的app.json中创建一个新的...，pop方法删除数据，join方法数据间隔，考虑现实逻辑关系，在删除行的时候进行if的判断是否为空（注意每个方法后面逗号隔开，最后一个方法的大括号后可不用逗号） 完整图：

    asp.net专家疑难解答200问

    如何在TreeView Web控件中动态添加、删除TreeNode节点 100.如何使用TreeView Web控件中的TreeNodeType进行外观控制 101.如何使用TreeView Web控件绑定XML文件-示例1 101.如何使用TreeView Web控件绑定...

Magicbox
Global site tag (gtag.js) - Google Analytics