用前端框架去给表格赋值简直不要太容易和简单。但是原生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