JQuery Dynamic Table Добавить/Удалить

Question

Я ищу JQuery-вилку, которая позволяет создавать и отправлять список динамических элементов.

Интерфейс:

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

При добавлении его создает таблицу, которая имеет пункты, перечисленные и возможность удаления. Затем пользователь может отправить и запрос будет обработан. Пока все подключаемые модули могут добавлять/удалять элементы, но они не создают таблицу. Это всего лишь поле ввода, которое продолжает копировать себя.

Любые предложения?

Answer 1

Должно быть, это плагин? Ive сделали что-то подобное с небольшим количеством коды на моем собственном:

 
    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>