2017-05-05 36 views
5

ile nasıl kopyalayabilirsiniz Tablo var ve Add New Ekle düğmesine basıldıktan sonra son satırını kopyalamak istiyorum. Satırlarımda yalnızca TextBox'larım olduğunda tamamen iyi çalışır, ancak bir açılır kapanmaz olduğunda olmaz. Lütfen jquery kodunu değiştirmeme yardım edin. İşte tablonun kod:Tablo satırını 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> 

Ve burada bazı iyileştirme ihtiyaçları kod:

<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> 

Ben giriş için seçmek değişen nereye bu çizgiyi değiştirmeye çalıştı ancak bu,

numaralı telefona yardımcı olmadı

var suffix = $ trNew.find (': giriş: ilk'). Attr ('name'). Match (/ \ d + /); İlk gibi tablodaki tbody eklemek

+1

Cevapları [buradan] (http göre farklı bir yaklaşım öneriyoruz:

 <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> 

Ve Senaryonuzun olduğu // stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) ve [burada] (http://stackoverflow.com/questions/40539321/a -kısmi-view-geçer-a-toplama-kullanma-html-begincollectionitem-yardımcı/40541892 # 4054 1892) –

cevap

2

:

<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> 
+0

Teşekkürler @Ashiquzzaman, şimdi kontrolöre veri iletme ile ilgili başka bir sorun olmasına rağmen, kopyalama ile yardımcı oldu. ** Sadece 4 satır kopyalanmış olsa bile en fazla 2 model ürün geçmektedir. ** Sadece metin kutuları ile tüm öğeleri gönderebilirim .. Hala jquery ile, muhtemelen indeksi ile ... – Amelie

+0

lütfen bana gösterebilir misiniz senin html. 4 kopyadan sonra @Amelie – Ashiquzzaman

+0

kullanıyorum tam görünüm şu: https://jsfiddle.net/aiste/mp5cx5sL/ @Ashiquzzaman – Amelie