<!DOCTYPE html>

<html>

  <head>

    <title>linshi3.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

    <script type="text/javascript">

        function insertAddress()

        {

            insertRow('t2','t1');

            //setAddressNo();

            //setAddressNum();

        }

        function insertRow(pageCode,dataPageCode)

        {

                    var oTBODY     = document.getElementById(pageCode).tBodies.item(0);//Address

          var oTBODYData = document.getElementById(dataPageCode).tBodies.item(0);//Address_date

          var rowsCount = oTBODYData.rows.length;//1

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

            oTBODY.appendChild(oTBODYData.rows[i].cloneNode(true));

          }

                }

        function deleteAddress(field,intPageDataKeyCount,intRowCount)//this,1,1

        {

          var arrayAddressNo = new Array();

          var strFieldName = field.name;//button_Address_Delete,假如有3个数据

         var intAddressNo = 0;

          var index = 0;

          var i = 0;

          //得到行索引

          for(i=1;i<fm.all(strFieldName).length;i++)//1--2

          {

            if(fm.all(strFieldName)[i]==field)

            {

              index = i;

              break;

            }

          }

         // intAddressNo = parseInt(fm.AddressNo[index].value,10);

                  deleteRow('t2',field,intPageDataKeyCount,intRowCount);

          //'Address',field,intPageDataKeyCount,intRowCount

        }

        function deleteRow(PageCode,Field,intPageDataKeyCount,intRowCount)//'Address',this,1,1

        {

          if (intPageDataKeyCount==null)

          {

            intPageDataKeyCount = 1;

          }

          if (intRowCount==null)

          {

            intRowCount = 1;

          }

          intRowCount = 4;

          var intIndex = parseInt(getElementOrder(Field),10) - 1;  //顺序改为以0开始

          var oTBODY   = document.all(PageCode).tBodies.item(0);

          for(var i=0;i<4;i++)

          {

            oTBODY.deleteRow(0);

          }

        }

        function getElementOrder(field,frm)

        {

          var intOrder = 0;

          var intCount = getElementCount(field.name,frm);

          var frmForm = (frm==null?document.fm:frm);

          if(intCount>1)

          {

            for(var i=0;i<intCount;i++)

            {

              if(frmForm.all(field.name)[i].name==field.name)

              {

                intOrder++;

              }

              if(frmForm.all(field.name)[i]==field)

              {

                break;

              }

            }

          }

          else

          {

            intOrder = 1;

          }

          return intOrder;

        }

        function getElementCount(strFieldName,frm)

        {

          var intCount = 0;

          var frmForm = (frm==null?document.fm:frm);

          try

          {

            intCount = eval( frmForm.all(strFieldName).length );

            if(isNaN(intCount)) intCount = 1;

          }

          catch(E)

          {

            intCount = 0;

          }

                    if(intCount>1 && frmForm.all(strFieldName)[0].tagName=="OPTION")

          {

            intCount = 1;

          }

          return intCount;

        }

    </script>

  </head>

  <body>

    <form name="fm" id="f1" action="" method="post">

      <table border="0" style="display: " id="t2">

       <thead>

       </thead>

       <tfoot>

        <tr class="common">

              <td id="" >

                <p align="right">

                      <input type="button" name="button_Address_Insert" class="button" alt="新增" value="新 增"

                          onclick="insertAddress()">

                </p>

              </td>

        </tr>

       </tfoot>

       <tbody><!-- 增加的区域数据，在这儿 -->

       </tbody>

      </table>

      <table border="0" style="display: none" id="t1">

       <tbody>

        <tr>

          <td>Login:</td>

          <td><input type="text" name="login" id="login"></td>

        </tr>

        <tr>

          <td>Password:</td>

          <td><input type="password" name="password" id="password"></td>

        </tr>

        <tr>

          <td colspan="2" align="center"><input type="submit"></td>

        </tr>

        <tr>

            <td>

                <input type="button" name="button_Address_Delete" class="button" alt="删除" value="删除"

                          onclick="deleteAddress(this,1,1)">

            </td>

        </tr>

       </tbody>

      </table>

    </form>

  </body>

</html>

js方法控制html表格的增加和删除的更多相关文章

  1. 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。

    前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...

  2. js回车动态添加表格，右键动态删除表格行

    <script type="text/javascript" language="javascript">//屏蔽浏览器右键function sto ...

  3. java layout 表格项增加、删除、修改

    实现的内容为:点击表格某项,再点击删除钮,可实现删除点击表格某项,再点击编辑按钮,可实现内容改变点击添加按钮,可实现向表格中添加内容 总结:总的来说中间遇到了很多困难,但是都一步步的解决了. pack ...

  4. vue.js（10）--案例--列表增加与删除

    品牌管理案例 (1)bootstrip快速布局 <div class="app"> <div class="panel panel-primary&qu ...

  5. UITableView增加和删除、移动

    复习一下: 1.在控制器上添加一个UITableView,  暂时该UITableView控件变量名命名为为tableView, 设置控件代理,实现控制器的UITableViewDataSource, ...

  6. js如何动态创建表格（两种方法）

    js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...

  7. js中控制小数点的显示位数的技术整理

    js中自带方法控制小数点的显示位数(四舍五入) alert((12.9299).toFixed(2)); //12.93 alert((12.9243).toFixed(2)); //12.92 小数 ...

  8. 网站开发进阶(二十五)js如何将html表格导出为excel文件

    js如何将html表格导出为excel文件        赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉! jsp页面数据导出成excel的方法很 ...

  9. jQuery实现表格行的动态增加与删除(改进版)

    之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故 ...

随机推荐

  1. iOS - UIWindow

    前言 NS_CLASS_AVAILABLE_IOS(2_0) @interface UIWindow : UIView @available(iOS 2.0, *) public class UIWi ...

  2. mysql 并发控制

    1.多个线程同时修改数据,存在数据不一致的情况,也就是并发控制的问题.2.mysql提供读锁和写锁,读锁之上可以再加读锁,不能加写锁,而写锁之上不能加任何锁.也就是说,读锁是共享的,写锁是排他的.3. ...

  3. pkg-config问题：

    pkg-config是一个工具,可以用于检测相应的依赖环境. pkg-config用来检索系统中安装库文件的信息,典型的是用作库的编译和连接.一般来说,如果库的头文件不在/usr/include目录中 ...

  4. spring data jpa 创建方法名进行简单查询

    版权声明:本文为博主原创文章,未经博主允许不得转载. spring data jpa 可以通过在接口中按照规定语法创建一个方法进行查询,spring data jpa 基础接口中,如CrudRepos ...

  5. 强制关闭tomcat

    ps -ef |grep tomcat //找到tomcat的端口号 kill - tomcatpid

  6. hiho_1139_二分+bfs搜索

    题目 给定N个点和M条边,从点1出发,到达点T.寻找路径上边的个数小于等于K的路径,求出所有满足条件的路径中最长边长度的最小值. 题目链接:二分     最小化最大值,考虑采用二分搜索.对所有的边长进 ...

  7. UnicodeEncodeError

    UnicodeEncodeError at /admin/shop/product/add/ 'ascii' codec can't encode characters in position 0-1 ...

  8. python网络编程socket之多线程

    #coding:utf-8 __author__ = 'similarface' import os,socket,threading,SocketServer SERVER_HOST='localh ...

  9. Machine Learning - 第3周（Logistic Regression、Regularization）

    Logistic regression is a method for classifying data into discrete outcomes. For example, we might u ...

  10. Tomcat卸载

    1.以管理员身份打开cmd,执行以下命令: C:Windows\system32>cd C:\Program Files\apache-tomcat-7.0.69\bin C:\Program ...