Question

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

接口：

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

添加时会创建一个包含列出的项目和要删除的选项的表格。然后用户可以提交并处理请求。到目前为止，我发现的所有插件都可以添加/删除元素，但它们不会创建表格。它只是一个不断复制的输入框。

有什么建议吗？

Answer 1

一定是个插件吗？我自己做了一些类似的代码：

＆＃13;

  
  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);
  
  }

＆＃13;

<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>

＆＃13;

JQuery动态表添加/删除

1 个答案: