使用JavaScript動態添加、刪除表格

效果圖：


頁面代碼：
<table id="tabBill">
      <tr>
            <td colspan="2" align="center">
                  <input id="btnAddOne"  onclick="Addtr();" type="button" value="增加項" />
                  <input id="btnRemoveOne"  onclick="Removetr();" type="button" value="刪尾行" />
            </td>
      </tr>
      <tr>
            <td>
                   故障代碼&nbsp;<asp:DropDownList  ID="ddlFailureCode1" Width="196px" runat="server"/>
            </td>
            <td>
                  故障數&nbsp;<asp:TextBox ID="txtFailureCodeAmount1" runat="server"/>
             </td>
      </tr>
</table>

JavaScript代碼：
<script type="text/javascript" language="javascript">
      var i=1;
      var sub=true;  

      //添加行方法
      function Addtr(){
            i = tabBill.rows.length;
            var ii = tabBill.rows.length;
            var newTr = tabBill.insertRow(-1);
            var newTd1= newTr.insertCell(-1);
            var newTd2 = newTr.insertCell(-1);
            //設置列內容和屬性
            newTd1.innerHTML = "故障代碼&nbsp;<select id='ddlFailureCode" + ii + "' style='width:196px'></select>";
            newTd2.innerHTML = "故障數&nbsp;<input type='text' id='txtFailureCodeAmount" + ii + "' class='tbStyle'/>";
            AddOptions();
      }    
    
      //刪除行方法
      function Removetr(){
            if (tabBill.rows.length > 2)
            {
                  tabBill.deleteRow(tabBill.rows.length - 1);
                  i--;
            }  
      }
 
      //添加選項
      function AddOptions(){
            var options = document.getElementById("ddlFailureCode1").options;
            for (var m = 0; m < options.length; m++) {
                  var newOption = new Option(options[m].innerText, options[m].value);
                  document.getElementById("ddlFailureCode" + i).add(newOption);
            }
      }

      //獲取表單里面的值
      function SaveHF(){   
            var subStr = "";
            var count = tabBill.rows.length-1;
            for (var n =1; n <= count; n++) {
                  var failureCode = document.getElementById("ddlFailureCode"+n).value;    
                  var failureCodeAmount = document.getElementById("txtFailureCodeAmount"+n).value;
                  subStr += failureCode + "|" + failureCodeAmount+ "~";
            }
            //使用表單域保存得到的數據,"hfvalues"為表單域的ID
            document.getElementById("hfvalues").value = subStr;
      }
</script>