用前端框架去给表格赋值简直不要太容易和简单。但是原生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;' οnclick=" + "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>
我这里做的是有个上传文件的功能。可以对其文件进行删除和下载。
效果图如下:
删除和下载的方法这里就不加了,有需要的可以联系我。
如若转载,请备明出处,谢谢!