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);

感觉效率好像不佳,想问问有没有比较好的拼接方法

6个回答

//代码直接拷贝到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>
u014074697
张大教主 其他好的处理方式就是你在查询数据库的时候通过sql对结果集行转列,写起来也是有些复杂的,鱼和熊掌不可兼得哇
3 年多之前 回复
jesseszr
jesseszr 回复张大教主: 我毛想想在控制层好像也要3个循环吧,有好的处理方法吗
3 年多之前 回复
u014074697
张大教主 因为行转列的原因,必有的嵌套不可少,如果数据量过大怕效率低,那就在控制层处理好,将结果直接返回前端,然后拼接table即可,又或者直接在控制层返回拼接好的table,前端直接附加
3 年多之前 回复
jesseszr
jesseszr 看你的思路和我的大致相同,我想知道的是那3个嵌套的循环会不会在数据量比较大的时候很慢
3 年多之前 回复

ajax回调函数里面使用字符串拼接就好了,很简单的。你百度下就行。

jesseszr
jesseszr 我是想知道怎么拼效率比较高
3 年多之前 回复

可以在 后台拼接好直接返回html,也可以返回数据在前台拼接

jesseszr
jesseszr 不论是后台还是前台,我是想知道怎么样拼效率更好
3 年多之前 回复
我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());
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐