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>

 

posted on 2016-06-12 17:26  WesTward  阅读(2046)  评论(0)  编辑  收藏  举报