案例：
创建动态表格：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<style type="text/css">
</style>
</head>
<body>
<h3>动态创建表格1</h3>
行数 <input type="text" value="5" id="rows">
列数 <input type="text" value="5" id="cols">
<input type="button" value="创建表格" onclick="creatTab()">
<div id="div1"></div>
<script>
function creatTab(){
rows=document.getElementById('rows').value
cols=document.getElementById('cols').value
div1=document.getElementById('div1')
// alert(rows+'\n'+cols)
var tab='<table border=1 width=500">'
for(var i=0;i<rows;i++){
tab+='<tr>'
for(var j=0;j<cols;j++){
tab+="<td style='background:green'>"+i+j+"</td>"
}
tab+='</tr>'
}
tab+='</table>';
div1.innerHTML=tab
}
</script>
</body>
</html>效果图：
项目中创建动态表格：
一、HTML中的代码：
将table展示在这个位置。
<div id="downloadlistTable"></div>二、JS中的代码
2.1 动态表格
///文件下载//
$(function () {
downloadlistTable=document.getElementById('downloadlistTable');
var tab='<table style="border-collapse:separate; border-spacing:0px 5px;" width=100% height="100" border="0.1" bordercolor="#FFFFFF">';
$.ajax({
type: "POST",
//发送请求，查找所有文件，返回结果，展示在表格里面
url: "/downInfo/getFileListShouYe",
dataType: 'json',
success: function (data) {
if (data!=null) {
for(var i=0;i<data.length;i++){
if(i==6){
break;
}
if (data[i].obj.length > 30) {
tab+='<tr>';
tab+="<td style='background:#f9f9f9; height:31pt;'>"+
"<a onclick='downloadFile(\"" + data[i].msg+ "\")'>"+" "+data[i].obj.substr(0, 20)+"..."+"</a>"
+"</td>";
}else {
tab+='<tr>';
tab+="<td style='background:#f9f9f9; height:31pt;'>"+
"<a onclick='downloadFile(\"" + data[i].msg+ "\")'>"+" "+data[i].obj+"</a>"
+"</td>";
}
tab+='</tr>';
}
tab+='<tr>';
tab+="<td style='background:#f9f9f9; height:31pt;'>"+" "+ "......" +"</td>";
tab+='</tr>';
tab+='</table>';
downloadlistTable.innerHTML=tab;
} else {
parent.forNotice("Warning", "下载失败，请联系管理员！");
}
progressDestroy("abc1");
}
});
});table表格的属性：
<table style="border-collapse:separate; border-spacing:0px 5px;" width=100% height="100" border="0.1" bordercolor="#FFFFFF">1、table表格边框
border="0.1" 设置边框的宽度，设置为“0.1”，基本没有边框。bordercolor="#FFFFFF" ，边框背景为“白色”。2、tr行间距
border-collapse属性加上border-spacing属性就可以设置tr行间距。
style="border-collapse:separate; border-spacing:0px 5px;" //第一个值为0px，第二个值为5px。3、设置表格中的行高和列宽
tr style=' height:21pt; ' // 行高
td style=' width:100pt;' // 列宽
<td style='background:#f9f9f9; height:31pt;'>2.1 点击文件名称，下载文件
//文件下载
function downloadFile(id){
sweetAlert({
title: "确定下载文件？",
text: "",
type: "warning",
showCancelButton: true,
confirmButtonText: '确定',
confirmButtonClass: 'green',
cancelButtonText: '取消',
cancelButtonClass: 'red',
closeOnConfirm: true
}, function (isConfirm) {
if (isConfirm) {
progressInit("abc1");
$.ajax({
type: "POST",
url: "/downInfo/downloadFile",
data: {id: id},
dataType: 'json',
success: function (data) {
if (data.success) {
if(data.obj!=null){
window.location.href=encodeURI("/fileUpLoadController/downResult?path="+data.obj);
}
/*parent.forNotice("Success", data.msg);*/
} else {
parent.forNotice("Warning", data.msg);
}
progressDestroy("abc1");
}
});
}
})
}三、展示效果：
四、后端代码：
4.1 查询文件列表的Controller层代码
/**
* 系统首页获取下载中心文件列表
*/
@RequestMapping("/getFileListShouYe")
@ResponseBody
public List<Result> getFileListShouYe() throws Exception {
List<Result> listResult= new ArrayList<>();
// 查找
EntityWrapper<DownInfo> wrapper = new EntityWrapper<>();
List<DownInfo> downInfo = downInfoService.getAll();
//类别转中文
if (downInfo != null && downInfo.size() > 0){
for (DownInfo df : downInfo) {
df.setTypeCode(dataDictionaryService.getDictionaryAttributeValue("downInfo_typeCode",df.getTypeCode()));
}
}
for(int i=0;i<downInfo.size();i++){
Result resultTemp = new Result();
resultTemp.setSuccess(true);
resultTemp.setMsg(downInfo.get(i).getId()); //文件ID
resultTemp.setObj(downInfo.get(i).getUrl()); //文件路径，即文件名称
listResult.add(resultTemp);
}
return listResult;
}4.2 点击文件名称，进行下载，Controller层代码
以“文件流”的方式，返回给前端，前端进行“文件下载”。
/**
* 文件下载
*/
@RequestMapping("/downResult")
@ResponseBody
public void downResult(HttpServletRequest request, HttpServletResponse response) {
String filename = "";
try {
String path = request.getParameter("path");
File file = new File(path);
boolean exists = file.exists();
if (!exists) {
throw new Exception("文件不存在！");
}
// 获取文件名
filename = file.getName();
// 获取文件后缀名
String ext = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();
// 将文件写入输入流
FileInputStream fileInputStream = new FileInputStream(file);
InputStream fis = new BufferedInputStream(fileInputStream);
byte[] buffer = new byte[fis.available()];
fis.read(buffer);
fis.close();
// 清空response
response.reset();
// 设置response的Header
response.setCharacterEncoding("UTF-8");
//Content-Disposition的作用：告知浏览器以何种方式显示响应返回的文件，用浏览器打开还是以附件的形式下载到本地保存
//attachment表示以附件方式下载 inline表示在线打开 "Content-Disposition: inline; filename=文件名.mp3"
// filename表示文件的默认名称，因为网络传输只支持URL编码的相关支付，因此需要将文件名URL编码后进行传输,前端收到后需要反编码才能获取到真正的名称
response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(filename, "UTF-8"));
// 告知浏览器文件的大小
response.addHeader("Content-Length", "" + file.length());
OutputStream outputStream = new BufferedOutputStream(response.getOutputStream());
response.setContentType("application/octet-stream");
outputStream.write(buffer);
outputStream.flush();
auditInfoService.saveAuditInfo(request, "下载中心", filename + "元下载成功", "4", "1", "0");
} catch (Exception e) {
auditInfoService.saveAuditInfo(request, "下载中心", filename + "元下载失败", "4", "1", "1");
e.printStackTrace();
}
}本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
