这里是写好的html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./index-1-x.css"/>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
<script src="./index.js"></script>
<title>教学成果奖</title>
</head>
<body>
<input type="checkbox" id="check">
<label for="check" onclick="Bclick()">
<i class="fa fa-mail-reply" id="btn"></i>
</label>
<table class="chart">
<tr>
<th>教师工号</th>
<th>教师姓名</th>
<th>获奖成果名称</th>
<th>本人排名</th>
<th>完成单位排名</th>
<th>级别</th>
<th>获奖时间</th>
</tr>
<tr>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
</table>
</body>
</html>
界面是空的表，然后要把数据库的数据显示上去，要怎么办
用ajax异步通讯获取后台数据，动态生成tr,然后设置到table里面，参考：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>学生资料列表</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/ajax.js"></script>
<script type="text/javascript">
function recedata(){
if(xmlhttp.status==200){
if(xmlhttp.readyState==4){
//responseXML：服务器发送给客户端的xml文件格式的数据
var data=xmlhttp.responseXML;
//取数据getElementsByTagName
var listData = data.getElementsByTagName("student");
var row="";
for(var i=0;i<listData.length;i++)
{
row+="<tr>";
//取第一个字段的值
var studid = listData[i].childNodes[0].firstChild.nodeValue;
row+="<td>"+studid+"</td>";
//取第二个字段的值
var studname = listData[i].childNodes[1].firstChild.nodeValue;
row+="<td>"+studname+"</td>";
//取第三个字段的值
var age = listData[i].childNodes[2].firstChild.nodeValue;
row+="<td>"+age+"</td>";
//取第四个字段的值
var sex = listData[i].childNodes[3].firstChild.nodeValue;
row+="<td>"+sex+"</td>";
//取第五个字段的值
var classname = listData[i].childNodes[4].firstChild.nodeValue;
row+="<td>"+classname+"</td>";
row+="</tr>";
}
var content = document.getElementById("databody");
//把读取的内容放在id中
content.innerHTML = row;
}
}
}
//获取学生资料
function getStudentData(){
var param="";
var url = "${pageContext.request.contextPath}/xmlServlet";
send('post',url,param,true);
}
</script>
</head>
<body>
<h1 align="center" onclick="getStudentData();">学生资料列表</h1>
<hr/>
<input type="button" value="获取学生资料" onclick="getStudentData();"><br/>
<table border="1" align="center" width="600" cellpadding="3" cellspacing="1">
<thead>
<tr>
<th onclick="getStudentData();">学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>班级</th>
</tr>
</thead>
<tbody id="databody">
</tbody>
</table>
</body>
</html>
看你用什么框架，如果是模板引擎在后台获取数据渲染好返回前端；
如果没有框架，那就在页面加载完成后ajax从后端接口获取
如果是纯html文件，要把查出来的数据放到前台html页面上，就需要把数据以json的方式，传递到前台，之后，前台解析json数据。把数据放到相应的位置上去。
你可以参考这个
ajax异步获取数据后动态向表格中添加数据(行)