• 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>
  • 相关阅读:
    『转载』Git管理工具sourcetree安装与使用
    实用网站分享:全栈开发可能需要用到的网站
    低版本浏览器(IE6+)页面兼容性问题相关处理
    Git常用命令说明
    jquery的全局函数 多库并存
    深浅拷贝
    localStorage
    jquery中封装了三种ajax请求方式
    jquery的树状菜单
    自定义动画 jquery的结束动画
  • 原文地址:https://www.cnblogs.com/westward/p/5578251.html
Copyright © 2020-2023  润新知