JQuery動態表格添加/刪除

Question

我正在尋找一個JQuery插件，它允許創建和提交動態項目列表。

接口：

<Select Item> - <Select Quantity> <Add> 

當您添加它創建了一個具有列出的項目，並刪除選項表。然後用戶可以提交併處理請求。到目前爲止，我發現的所有插件都可以添加/刪除元素，但不創建表格。這只是一個不斷複製自己的輸入框。

有什麼建議嗎？

Answer 1

它必須是一個插件嗎？香港專業教育學院做了一個小的代碼類似的東西我自己：

 
    var fileList = []; 
 
    
 
    fileList.push({fileName: "somefile1", fileExt: ".jpg", fileSize: 128000}); 
 
    fileList.push({fileName: "somefile2", fileExt: ".DOC", fileSize: 158930}); 
 
    fileList.push({fileName: "somefile3", fileExt: ".xml", fileSize: 3695200}); 
 
    CreateTable(fileList); 
 
    
 
    
 
function CreateTable(fileList) 
 
     { 
 
      
 
      $("#fileList tbody").empty(); 
 
      for (var n = 0; n < fileList.length; n++) { 
 
       $("#fileList tbody").append(
 
        "<tr>" + 
 
        "<td>" + fileList[n].fileName + "</td>" + 
 
        "<td>" + fileList[n].fileExt + "</td>" + 
 
        "<td>" + Math.round(fileList[n].fileSize * .001) + " kb" + "</td>" + 
 
        "<td> <img src='/Content/Images/file_delete_small.png' width:50% height:50% class='btnDelete'/> </td>" + 
 
        "</tr>"     
 
       ); 
 
      } 
 
      
 
      $(".btnDelete").on("click", Delete); 
 
      $('#fileList').show() 
 
     } 
 

 

 
function Delete() { 
 
      var deleteName = $(this).closest('tr').find('td:eq(0)').text(); 
 
      var deleteExt = $(this).closest('tr').find('td:eq(1)').text(); 
 
      var deleteFile = deleteName + '.' + deleteExt; 
 
      var rowNumber = $(this).closest('tr').index()+1; 
 
    
 
      document.getElementById("fileList").deleteRow(rowNumber); 
 
    
 
    } 
 

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

 
<table style="width:50%" id="fileList" class="table table-bordered"> 
 
     <thead> 
 
     <tr> 
 
      <th>File Name</th> 
 
      <th>File Type</th> 
 
      <th>File Size</th> 
 
      <th>Remove File</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody></tbody> 
 
</table>