如何使用jQuery將下拉列表中的表格行復制到

Question

我有一張表格，並且在按下添加新鏈接後，我想克隆它的最後一行。它在我的行中只有TextBox的情況下工作得很好，但當下拉時沒有。請幫我修改jquery代碼。 這裏的表的代碼：

<div><a href="#" id="addNew">Add New</a></div> 
       <table id="dataTable"> 
        <tr> 
         <th>Item</th> 
         <th>Cost</th> 
         <th></th> 
        </tr> 
        @if (Model != null && Model.Count > 0) 
        { 
         int j = 0; 
         foreach (var i in Model) 
         { 
          <tr> 
           <td>@Html.DropDownListFor(a => a[j].fk_purchase_id, (SelectList)ViewBag.fk_purchase_id, null, htmlAttributes: new { @class = "form-control"})</td> 
           <td>@Html.TextBoxFor(a => a[j].cost, htmlAttributes: new { @class = "form-control" })</td> 
           <td> 
            @if (j > 0) 
            { 
             <a href="#" class="remove">Remove</a> 
            } 
           </td> 
          </tr> 
          j++; 
         } 
        } 
       </table> 

這裏是一個需要一些改進代碼：

<script> 
     $(function() { 
      //1. Add new row 
      $("#addNew").click(function (e) { 
       e.preventDefault(); 
       var $tableBody = $("#dataTable"); 
       var $trLast = $tableBody.find("tr:last"); 
       var $trNew = $trLast.clone(); 
       alert($trNew.html); 
       var suffix = $trNew.find(':input:first').attr('name').match(/\d+/); 
       $trNew.find("td:last").html('<a href="#" class="remove">Remove</a>'); 
       $.each($trNew.find(':input'), function (i, val) { 
       // Replaced Name 
       var oldN = $(this).attr('name'); 
       var newN = oldN.replace('[' + suffix + ']', '[' + (parseInt(suffix) + 1) + ']'); 
       $(this).attr('name', newN); 
       //Replaced value 
       var type = $(this).attr('type'); 
       if (type.toLowerCase() == "text") { 
       $(this).attr('value', ''); 
        } 
        }); 

       $trLast.after($trNew); 
      }); 

     }); 
    </script> 

我試圖修改此行蒙山改變輸入到選擇 ，但它沒有幫助

var後綴= $ trNew.find（'：input：first'）。attr（'name'）。match（/ \ d + /）;

Answer 1

首先在表中添加tbody像：

 <table id="dataTable"> 
     <thead> 
      <tr> 
       <th>Item</th> 
       <th>Cost</th> 
       <th></th> 
      </tr> 
      </thead> 
      <tbody> 
      @if (Model != null && Model.Count > 0) 
      { 
       int j = 0; 
       foreach (var i in Model) 
       { 
        <tr> 
         <td>@Html.DropDownListFor(a => a[j].fk_purchase_id, (SelectList)ViewBag.fk_purchase_id, null, htmlAttributes: new { @class = "form-control"})</td> 
         <td>@Html.TextBoxFor(a => a[j].cost, htmlAttributes: new { @class = "form-control" })</td> 
         <td> 
          @if (j > 0) 
          { 
           <a href="#" class="remove">Remove</a> 
          } 
         </td> 
        </tr> 
        j++; 
       } 
      } 
     </tbody> 
     </table> 

而且你的腳本是：

<script> 
    $(function() { 
     $("#addNew").click(function (e) { 
      e.preventDefault();      
      var last = $('#dataTable>tbody>tr:last'); 
      if (last.length > 0) { 
       var name = last.children().find('input,select')[0].name; 
       var index = Number(name.replace(/[^0-9]/gi, '')) + 1; 
       var tr = ('<tr>' + last.html().replace(/[0-9]+__/gi, index + '__') + '</tr>') .replace(/\[[0-9]+\]+[.]/gi, '[' + index + '].'); 
       $('#dataTable tbody').append(tr); 
      } 
     }); 

    }); 
</script>