原生js把數據循遍歷到前端table

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

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

寫在js里面的代碼：(用的ajax請求將文件保存到服務器，返回的數據遍歷到table)

function 方法名() {
$.ajax({
            type: 'POST',
            url: '路徑‘
            data: Data,
            processData: false,
            contentType: false,
            success: function (data) {
                if (data != null) {
                    var fileTable = data.FileTableList;
                    $("#TbData").empty();
                    for (var i = 0; i < fileTable.length; i++) {

                        var $trTemp = $("<tr></tr>");
                        $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>");
                        $trTemp.append("<td style='border: 1px solid #d0d0d0;color: #404060;'>" + fileTable[i].FileName + "</td>");
                        $trTemp.append("<td style='border: 1px solid #d0d0d0;color: #404060;'>" + fileTable[i].NameCh + "</td>");
                        $trTemp.append("<td style='border: 1px solid #d0d0d0;color: #404060;'>" + fileTable[i].UserId + "</td>");
                        $trTemp.append("<td style='border: 1px solid #d0d0d0;color: #404060;'>" + NewDtime + "</td>");

                        $("#TbData").append($trTemp);
                        $trTemp.appendTo("#TbData");

                    }
                }
                else {

                    dialogMsg(data.message, 0);
                }
            }
        });
}

 

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