用前端框架去給表格賦值簡直不要太容易和簡單。但是原生js就會複雜一些了。特別是按鈕事件的那個（“ ）和 （’）特別讓人腦瓜子疼。

最近做了一個功能，裡面用的就是原生js實現。

寫在js裡面的程式碼：(用的ajax請求將檔案儲存到伺服器，返回的資料遍歷到table)

 1 function 方法名() {
 2 $.ajax({
 3             type: 'POST',
 4             url: '路徑‘
 5             data: Data,
 6             processData: false,
 7             contentType: false,
 
 8             success: function (data) {
 9                 if (data != null) {
10                     var fileTable = data.FileTableList;
11                     $("#TbData").empty();
12                     for (var i = 0; i < fileTable.length; i++) {
13 
14                         var $trTemp = $("<tr></tr>");
 
15                         $trTemp.append("<td style='border: 1px solid #d0d0d0;color: #404060;'>" + "<button id='delete' style ='color:blue;' onclick=" + "deleteFile('" + fileTable[i].Uploadfilekey + "')" + ">刪除</button>" + " <a arget='_blank' style='color:Blue;'  href='/Attendance/DownloadFile/?FileKey=" + fileTable[i].Uploadfilekey + "'>" + "下載" + "</a>" + "</td>");
16
 
                         $trTemp.append("<td style='border: 1px solid #d0d0d0;color: #404060;'>" + fileTable[i].FileName + "</td>");
17                         $trTemp.append("<td style='border: 1px solid #d0d0d0;color: #404060;'>" + fileTable[i].NameCh + "</td>");
18                         $trTemp.append("<td style='border: 1px solid #d0d0d0;color: #404060;'>" + fileTable[i].UserId + "</td>");
19                         $trTemp.append("<td style='border: 1px solid #d0d0d0;color: #404060;'>" + NewDtime + "</td>");
20 
21                         $("#TbData").append($trTemp);
22                         $trTemp.appendTo("#TbData");
23 
24                     }
25                 }
26                 else {
27 
28                     dialogMsg(data.message, 0);
29                 }
30             }
31         });
32 }

寫在HTML的程式碼：

<table width="540px" >
          <thead>
                    <tr >
                           <th width="90px" align="center" class="tdbga">操作</th>
                           <th width="170px" align="center" class="tdbga">檔名稱</th>
                           <th width="60px" align="center" class="tdbga">上傳人</th>
                           <th width="70px" align="center" class="tdbga">上傳工號</th>
                           <th width="150px" align="center" class="tdbga">上傳時間</th>
                     </tr>
           </thead>
          <tbody id="TbData" ></tbody>
</table>

我這裡做的是有個上傳檔案的功能。可以對其檔案進行刪除和下載。

效果圖如下：

刪除和下載的方法這裡就不加了，有需要的可以聯絡我。

如若轉載，請備明出處，謝謝！

本文地址：https://www.cnblogs.com/yifeixue/p/13895996.html