javascript - 如何使用 javascript 添加新的数据行？

Question

我正在为我的用户创建添加文件功能，在此功能中，用户必须插入他们的文件名，选择他们的文件，然后单击Add Document按钮。

一旦用户添加了文档，它将在添加文档按钮下显示用户文档。用户可以添加更多他们想要的文档。

我在添加数据时遇到了麻烦。当用户尝试附加新文件时，文件不断丢失。

我想在提交之前显示用户的所有文件列表。

首先添加文档

然后用户想要添加另一个文档，第一个文档被替换

第二份文件

当用户添加更多文档时，如何使其不覆盖旧文档？

<div class="col-md-12 mb-3">
     <textarea class="form-control" id="name" ></textarea>
</div>
<div class="col-md-12 mb-3">
   <button type="button" class="btn btn-success w-100 choseDoc">Select document</button>
   <input type="file" id="file" hidden>
</div>

<div class="col-md-12 mb-3">
 <button type="button" class="btn btn-info w-100" onclick="myFunction()">Add Document</button>
</div>

<div>
 <p id = "demo"></p>

</div>

 <script>
    function myFunction() {

    let filename= $('#name').val();
    let doc = $('#file').val();
                                                             
    let fileData = '';

    fileData += `<div class="tab-content col-12 mt-4" id="myTabContent-2">
                   <div class="tab-pane fade show active" id="addCustodian" role="tabpanel" aria-labelledby="addCustodian-tab">
                      <div class="col-md-12">         
                        <ul class="perfomer-lists m-0 p-0" id="">
                          <li class="d-flex mb-4 align-items-center">
                            <img class="avatar-20 rounded ml-2" src="assets\avatar.png" style="width: 50px;">
                             <div class="media-support-info ml-3">
                                                                                                                
                              <a class="font-size-12 font-weight-600"><b>${filename}</b></a>
                                                                                                                
                              <p class="mb-0 font-size-12"> ${doc}</p>
                                                                                                            
                            </div>
                                                                                                        
                          </li>
                      </ul>
                 </div>  
               </div>
          </div> `;
 document.getElementById("demo").innerHTML = fileData;

标签： javascripthtmljquerycss

Answer 1

除了您的方法在性能上带来一些小问题之外，您还有一点逻辑错误

<div class="col-md-12 mb-3">
     <textarea class="form-control" id="name" ></textarea>
</div>
<div class="col-md-12 mb-3">
   <button type="button" class="btn btn-success w-100 choseDoc">Select document</button>
   <input type="file" id="file" hidden>
</div>

<div class="col-md-12 mb-3">
 <button type="button" class="btn btn-info w-100" onclick="myFunction()">Add Document</button>
</div>

<div>
 <p id = "demo"></p>

</div>

 <script>
    let fileData = ''; // <--- must be declared outside your function to keep the state
    function myFunction() {

    let filename= $('#name').val();
    let doc = $('#file').val();
                                                             

    fileData += `<div class="tab-content col-12 mt-4" id="myTabContent-2">
                   <div class="tab-pane fade show active" id="addCustodian" role="tabpanel" aria-labelledby="addCustodian-tab">
                      <div class="col-md-12">         
                        <ul class="perfomer-lists m-0 p-0" id="">
                          <li class="d-flex mb-4 align-items-center">
                            <img class="avatar-20 rounded ml-2" src="assets\avatar.png" style="width: 50px;">
                             <div class="media-support-info ml-3">
                                                                                                                
                              <a class="font-size-12 font-weight-600"><b>${filename}</b></a>
                                                                                                                
                              <p class="mb-0 font-size-12"> ${doc}</p>
                                                                                                            
                            </div>
                                                                                                        
                          </li>
                      </ul>
                 </div>  
               </div>
          </div> `;
 document.getElementById("demo").innerHTML = fileData;