js生成动态表头和表格内容的问题
数据库查出来的数据类似这样的
通过ajax在页面获取json，想动态生成这样的一张表格
请问获取到json后js代码怎么写好一点，或者数据库查出数据后怎么样处理之后再传到页面更好一些
回答的两位没有理解我的意思
我原本是在ajax回调里写的
var rows = data.data;
var title = data.title;
var name = data.name;
var str = "<tr><th></th>";
$.each(title,function(i){
str += "<th>"+title[i]+"</th>";
});
str += "</tr>";
$.each(name,function(i){
str += "<tr>";
str += "<td>"+name[i]+"</td>";
$.each(title,function(j){
str += "<td>";
$(rows).each(function(l,item){
if (item.name == name[i] && item.foodName == title[j]){
str += item.price;
return false;
}
});
str += "</td>";
});
str += "</tr>";
});
$("#tableAll").html(str);
感觉效率好像不佳，想问问有没有比较好的拼接方法
//代码直接拷贝到html中，双击看效果
<meta charset="utf-8"></meta>
<script type="text/javascript" src="http://www.srcfans.com/js/jquery-1.9.1.min.js"></script>
<style>
.tb{border-spacing:0px;
background:#FFAA00;
border:1px solid #333;
cellspacing:0px;
}
.td{
border:1px solid #333;
width:100px;
height:30px;
}
</style>
<body>
</body>
<script>
//jsons为你ajax中获取的json值，我这里先自己定义一个
var jsons=[{"人员":"张三","物品":"饮料","花费":46},
{"人员":"李四","物品":"饮料","花费":64},
{"人员":"王二","物品":"饮料","花费":44},
{"人员":"张三","物品":"啤酒","花费":99},
{"人员":"李四","物品":"啤酒","花费":100},
{"人员":"王二","物品":"啤酒","花费":98}];
createTable(jsons);//在ajax中调用createTable函数，并把json参数传入；
//createTable 实现
function createTable(jsons){
var fields="";
var users="";
for(var i=0;i<jsons.length;i++){
if(fields.indexOf(jsons[i]["物品"])==-1){
fields+=fields==""?jsons[i]["物品"]:(","+jsons[i]["物品"]);
}
if(users.indexOf(jsons[i]["人员"])==-1){
users+=users==""?jsons[i]["人员"]:(","+jsons[i]["人员"]);
}
}
var fieldsArray=fields.split(',');
var usersArray=users.split(',');
$('<table class="tb"></table>').appendTo('body');
var th='<tr><td class="td">人员</td>';
for(var i=0;i<fieldsArray.length;i++){
th+='<td class="td">'+fieldsArray[i]+'</td>';
}
th+='</tr>';
$('.tb').append(th);
for(var i=0;i<usersArray.length;i++){
var tr='<tr>';
tr+='<td class="td">'+usersArray[i]+'</td>';//人员
for(var j=0;j<fieldsArray.length;j++){
for(var k=0;k<jsons.length;k++){
if(jsons[k]["人员"]==usersArray[i] && jsons[k]["物品"]==fieldsArray[j]){
tr+='<td class="td">'+jsons[k]["花费"]+'</td>';//物品花费;
break;
}
}
}
tr+='</tr>';
$('.tb').append(tr);
}
}
</script>
ajax回调函数里面使用字符串拼接就好了，很简单的。你百度下就行。
可以在 后台拼接好直接返回html，也可以返回数据在前台拼接
我json字段名用的是中文，如果json字段名是英文，那么你只需要将createTable中的中文字段用你的英文名称替代就行了
function fc(){
jQuery.getJSON("http://127.0.0.1:7001/LedServLet",{'typenames':$("#typenames").val(),'factorynames':$("#factorynames").val(),'specnames':$("#specnames").val()},function(json){
//异步请求清空那个下边的class要不会把查询的东西显示在，显示数据表格的下面，
$("tr").remove("._deledc");//（.是获取class，#是获取id,deledc这个class数值在下面你动态生成的表里）
//我这用的forEach循环
jQuery.each(json,function(index,array){
//这是从传回来的JSON里获取数值
var idName = array["idName"];
var typeName = array["typeName"];
var standarName=array["sstandard"]
var factoryNameS = array["factoryNameS"];
var _typerows = array["_typerows"];
var _typename = array["_typename"];
var _standard= array["_standard"];
var _standardr = array["_standardr"];
var minPrice = array["minPrice"];
var specN = array["specN"];
var standarNameSer = array["standarNameSer"];
var strcreatedate= array["strcreatedate"];
//写表格动态的生产，已经测试能生成，
sc="";//这个位置这个一定要写，不然出不来表格
sc+="<tr class='_deledc'>";
sc+="<td id="+idName+">"+typeName+"</td>";
sc+="<td id="+idName+standarName+">"+standarNameSer+"</td>";
sc+="<td>"+factoryNameS+"</td>";
sc+="<td>"+specN+"</td>";
sc+="<td>"+strcreatedate+"</td>";
sc+="<td>"+minPrice+"</td>";
sc+="</tr>";
});
});
}
jQuery(document).ready(function(){
fc();
})
//你从数据库循环取到数值后，存在MAP中
Map<String, Object> map = new HashMap<String, Object>();
map.put("idName",FString.toString(stypeid));
map.put("typeName",FString.toString(stypename));
map.put("factoryNameS", FString.toString(sfactoryname));
map.put("sstandard",Integer.toString(sstandard));
map.put("_typerows", Integer.toString(_typerows));
map.put("_typename", FString.toString(_typename));
map.put("_standard",Integer.toString(_standard));
map.put("_standardr", Integer.toString(_standardr));
map.put("minPrice", FString.toString(sprice));
map.put("specN", FString.toString(sspecname));
map.put("standarNameSer", FString.toString(sstandardtxt));
map.put("strcreatedate",Integer.toString(speriod));
list.add(map);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//用这个方法返回
JSONArray ja = JSONArray.fromObject(list);
PrintWriter out = response.getWriter();
out.write(ja.toString());