jQuery

Question

के साथ ड्रॉपडाउन सूची के साथ तालिका पंक्ति की प्रतिलिपि कैसे करें मेरे पास एक तालिका है और मैं के बाद इसकी अंतिम पंक्ति को क्लोन करना चाहता हूं नया लिंक दबाया गया है। यह पूरी तरह से ठीक काम करता है जब मेरे पास मेरी पंक्तियों में केवल टेक्स्टबॉक्स हैं लेकिन जब ड्रॉपडाउन होता है तो ऐसा नहीं होता है। कृपया 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> 

मैं बदल रहा इनपुट को चयन whith इस लाइन को संशोधित करने की कोशिश की , लेकिन यह

की सहायता नहीं करता

var suffix = $ trNew.find (': इनपुट: पहला')। Attr ('name')। मिलान (/ \ 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>