添加TR動態

Question

當我在輸入文本（.item-input）類型，它應該在table的底部添加一個新tr - 它應該從class="template-row"複製和更改類名class="row"（只有新在

還應不守添加在底部的新潮流，如果底部的輸入是空的（新'TR'）

出於某種原因，底部）動態tr，它在表的底部會添加一旦和class="template-row" tr被刪除的頂部，它不應該發生？

例如：

<style> 
    .template-row { display: none; } 
</style> 

    <table> 
     <tr class="template-row"> 
      <td> <input class='item-input' type="text"> </td> 
     </tr> 
     <tr class="row"> 
      <td> <input class='item-input' type="text"> </td> 
     </tr> 
    </table> 

的jquery：

$(document).ready(function() { 
    $('.item-input').on('keydown', function (e) { 
     var itemName = $.trim($(this).val()); 

     if (itemName != '') { 
      var templateRow = $(".template-row"); 

      $('table tr:last').after(templateRow).removeClass('template-row').addClass("row"); 
     } 
    }); 
}); 

Answer 1

jquery: 
 
$(document).ready(function() { 
 
    $('.item-input').on('keyup', function (e) { 
 
     var itemName = $.trim($(this).val()); 
 

 
     if (itemName.length > 0 && $(this).data("copied") == undefined) { 
 
      var templateRow = $(".template-row").clone(true).removeClass('template-row').addClass("row"); 
 
      $('table').append(templateRow); 
 
      $(this).data("copied", true); 
 
     } 
 
    }); 
 
});

.template-row { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 
    <table> 
 
     <tr class="template-row"> 
 
      <td> <input class='item-input' type="text"> </td> 
 
     </tr> 
 
     <tr class="row"> 
 
      <td> <input class='item-input' type="text"> </td> 
 
     </tr>  
 
    </table>

該代碼會在每次先前的輸入被填滿時添加一個新的輸入。它每個輸入只執行一次。

• $(this).data("copied")檢查數據屬性copied。如果存在，則輸入之前已被填充並且創建了新的輸入。它爲屬於tr的元素設置了一個屬性：data-copied="true"。 data真的是jQuery的簡寫attr("data-copied")。
• clone(true)複製模板和事件。
• 克隆後，模板類被刪除。

Answer 2

嘗試此，哪些克隆的節點，並將其追加的元件。

$(document).ready(function() { 
    $('.item-input').on('keyup', function (e) { 

     var itemName = $.trim($(this).val()); 

     if (itemName != '') { 
      var templateRow = $(".template-row").clone(); 

      templateRow.appendTo('table').removeClass('template-row').addClass("row"); 
     } 
    }); 
});