欢迎光临
我的个人博客网站

原生js把数据循遍历到前端table

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

我这里做的是有个上传文件的功能。可以对其文件进行删除和下载。

效果图如下

原生js把数据循遍历到前端table

 

 

 

 

 

删除和下载的方法这里就不加了,有需要的可以联系我。

如若转载,请备明出处,谢谢!

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

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » 原生js把数据循遍历到前端table
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏