js方法控制html表格的增加和删除

<!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>
时间: 2024-08-02 08:02:57

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

实现表格的增加,删除,复制,克隆

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>操作表格</title> <script> function append() { var thirdtr=document.getElementById('thirdtr'); var parents=thirdtr.parentNode; /

js回车动态添加表格,右键动态删除表格行

<script type="text/javascript" language="javascript">//屏蔽浏览器右键function stop(){ return false;}document.oncontextmenu = stop;var i=3;$(function() { //点击页面其他位置右键菜单消失 $('body').bind('click', function(ev) { $('#menu').css('display','n

UITableView增加和删除、移动

复习一下: 1.在控制器上添加一个UITableView,  暂时该UITableView控件变量名命名为为tableView, 设置控件代理,实现控制器的UITableViewDataSource, UITableViewDelegate协议: 2.tableView控件的editing属性默认是NO, 并且UITableViewCell默认情况下没有删除和增加功能. 实现代理方法 - (void)tableView:(UITableView *)tableView commitEditing

NSTableView 表格操作:增加,删除,编辑(方法2)

NSTableView 表格操作:增加,删除,编辑(方法2) 在: NSWindowController 新建表单 (H,M,XIB三个文件+新建一个类放CellData) 1.不使用delegate 2.数据源直接是当前文件File's Owner 3.H继承NSTableView协议,将需要的几个函数放入 4.增加一个列表数据单元类 这个方法的特点是: 当新建立一个窗体,显示一个表格内容,不使用Deleget就少了一个类的2个文件,让程序简单化 操作步骤: STEP1 将NSTableVie

c#后台调用前台与js方法互调

c#后台调用前台与js方法互调 分类: 每天学一点2009-10-22 00:32 1527人阅读 评论(0) 收藏 举报 c#javascript脚本buttonvbscriptstring 很多人都向在服务器端调用客户端的函数来操作,也就是在asp中调用javascript脚本中已经定义好的脚本函数.经过研究,发现了一些勉强的方法. 1. 用Response.Write方法写入脚本 比如在你单击按钮后,先操作数据库,完了后显示已经完成,可以在最后想调用的地方写上Response.Write(

jQuery表格自动增加

<!DOCTYPE html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width" /> <title>jQuery 表格自动增加</title> &l

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

js中自带方法控制小数点的显示位数(四舍五入) alert((12.9299).toFixed(2)); //12.93 alert((12.9243).toFixed(2)); //12.92 小数位数增加的解决办法 javascript数字计算编码中,遇到了如下现象 var money = 116.12*11; //1277.32 money=1277.3200000000002 解决办法: money .toFixed(2);

jquery 表格的增加删除和修改及设置奇偶行颜色

最近一周在学了一点点HTML, CSS, javascript,用javascript的jquery完成了一个简单的表格操作,有增加.删除和修改功能. 表格分三列,第一列是学生编号(ID号),第二列是学生姓名,第三列为学生年龄.在姓名和年龄框内输入数据,再点"Add"就可以增加数据(ID号会自动递增的生成),输入ID号再输入新的姓名和年龄点"Edit"就可以修改,删除的话输入ID号就点"Delete"就可以删除指定行. 表格最上面会及时更新当前表

Django中使用JS通过DataTable实现表格前端分页,每页显示页数,搜索等功能

版本: django:2.1.7 python:3.7 Django架构中自带了后端分页的技术,通过Paginator进行分页,前端点击按钮提交后台进行页面切换. 优缺点:后端分页对于数据量大的场景有其优势,但页面切换比较慢. 后端分页python3代码如下: paginator = Paginator(stat_list, numtmp) try: flight_stats = paginator.page(1) except PageNotAnInteger: flight_stats =