无框架加载table表中数据

    至今用到的jquery和bootstrap都有各自的加载table的方式，jquery是datagrid,bootstrap是bootstrapTable。如果不用这些框架的话，也是可以刷新table的，只不过需要拼接html。

 ----------------------------------------------------------------------------

现在有这样一个情况，点击下图中的查询，表中数据加载。

----------------------------------------------------------------------------------------------

JSP代码：

<table id="resultTable"width="100%" border="0" cellspacing="1" cellpadding="0">
  <thead>
   <tr>
    <td id="declaration_id" height="30" align="center" bgcolor="#CDE7E8" style="padding-top:0.2rem; padding-bottom:0.2rem; font-weight:bold;">序号</td>
    <td id="tax_no" align="center" bgcolor="#CDE7E8" style="padding-top:0.2rem; padding-bottom:0.2rem; font-weight:bold;">纳税人识别号</td>
    <td id="taxpayer" align="center" bgcolor="#CDE7E8" style="padding-top:0.2rem; padding-bottom:0.2rem; font-weight:bold;">纳税人名称</td>
    <td id="company" align="center" bgcolor="#CDE7E8" style="padding-top:0.2rem; padding-bottom:0.2rem; font-weight:bold;">纳税企业名称</td>
    <td id="result" align="center" bgcolor="#CDE7E8" style="padding-top:0.2rem; padding-bottom:0.2rem; font-weight:bold;">申报结果</td>
    <td id="info" align="center" bgcolor="#CDE7E8" style="padding-top:0.2rem; padding-bottom:0.2rem; font-weight:bold;">申报结果说明</td>
   </tr>
  </thead>
  <tbody></tbody>
</table>

		function search(){
		    $("#resultTable tbody").html('');
			var account=$("#account").val().trim();
			var company=$("#company").val().trim();
			var begin_time=$("#begin_time").datebox('getValue'); 
			var end_time=$("#end_time").datebox('getValue'); 
			var tax_no=$("#tax_no").val().trim();
			$.ajax({
				url:'<%=basePath %>customer/account/findReportingResult3',
				data:{account:account,company:company,begin_time:begin_time,
				end_time:end_time,tax_no:tax_no},
				dataType:"json",
				type:"post",
				success: function(result){
				   data = eval('result' );
				   console.log(data);
				   sum=data.length;
				   var message=null;
				   if(data.length>=5){
			            message=[result[0],result[1],result[2],result[3],result[4]];
				   }else{
				       message=data;
				   }
				   makeEducPlanTable(message);
				   start=1;
				 },
			  error: function(){
					alert("查找申报结果失败");
					return false;
				}
			})
		}

	//查找所有下属企业
	@RequestMapping("findReportingResult3")
        @ResponseBody  //有 算是json对象
	public void findReportingResult(HttpServletRequest req,HttpServletResponse res) throws IOException{
		JSONArray jsonArray=new JSONArray() ; 
		Map<String, String> map=new HashMap<String, String>();
		map.put("account", req.getParameter("account"));
		map.put("company", req.getParameter("company"));
		map.put("begin_time", req.getParameter("begin_time"));
		map.put("end_time", req.getParameter("end_time"));
		map.put("tax_no", req.getParameter("tax_no"));
		//List<ReportingResult> lists=new ArrayList<ReportingResult>();
		lists=registerService.findReportingResult(map);		
		jsonArray =JSONArray.fromObject(lists);
		res.setContentType("text/html;charset=utf-8");
		PrintWriter pw = res.getWriter();
		pw.write(jsonArray.toString());
		pw.flush();
		}	

这里是对tbody增加内容，通过ajax向后台请求数据，返回的json,通过for来拼接html

 function makeEducPlanTable(result){
        var data = eval( result);
	var tab = $("#resultTable tbody");
	var html = [];
	if(data.length > 0){
		for(var i=0;i<data.length;i++){
			var plan = data[i];
			if(plan.result == '成功'){//绿色
			  trBgColor = "#02B620";
			}else{//红色
			  trBgColor = '#F00';
			}
			//align="center" bgcolor="#CDE7E8" style="padding-top:0.2rem; padding-bottom:0.2rem; font-weight:bold;"
			//html.push("<tr align='center' bgcolor='#CDE7E8' style='padding-top:0.2rem; padding-bottom:0.2rem; font-weight:bold;' >");
			html.push("<tr  >");
			html.push("<td height='40' align='center' bgcolor='#FFFFFF' style='padding-top:0.2rem; padding-bottom:0.2rem;'> "+ plan.declaration_id+"</td>");
			html.push("<td align='center'  bgcolor='#FFFFF' style='padding-top:0.2rem; padding-bottom:0.2rem; '> "+ plan.tax_no+"</td>");
			html.push("<td align='center'  bgcolor='#FFFFF' style='padding-top:0.2rem; padding-bottom:0.2rem; '>"+ plan.taxpayer +"</td>");
			html.push("<td align='center'  bgcolor='#FFFFF' style='padding-top:0.2rem; padding-bottom:0.2rem; '>"+ plan.company +"</td>");
			html.push("<td align='center'  bgcolor='#FFFFF' style='padding-top:0.2rem; padding-bottom:0.2rem; '><span style='color:"+trBgColor+"'>"+ plan.result +"</span></td>");
			html.push("<td align='center'  bgcolor='#FFFFF' style='padding-top:0.2rem; padding-bottom:0.2rem;'>"+ plan.info +"</td>");
			html.push("</tr>");
		}
	}
	//tab.html("");
	tab.append(html.join(""));
	//tab.append(html);
}

----------------------------------------------------------------------------------------------------------------------------------------

当然这样还没有结束，如果一直点击的话，会出现下面这种情况：

.所以为了避免这种情况的发生，需要在每次查询的时候讲table中的tbody内容清空:

 $("#resultTable tbody").html('');

这样就可以啦