JQuery动态TableAdd/Remove

Question

我正在寻找一个允许创建和提交动态项目列表的 JQuery 插件。

接口：

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

当您添加时，它会创建一个 table，其中列出了项目和要删除的选项。然后用户可以提交，请求将被处理。到目前为止，我发现的所有插件都可以 Add/Remove 元素，但它们不会创建 table。它只是一个不断复制自己的输入框。

有什么建议吗？

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>

JQuery动态TableAdd/Remove

JQuery Dynamic Table Add/Remove

jquery

crud