jesseszr
2017-07-14 02:21
采纳率: 66.7%
浏览 3.9k

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条回答 默认 最新

  • 张大教主 2017-07-14 03:20
    已采纳
    //代码直接拷贝到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>
    
    点赞 打赏 评论
  • weixin_39473435 2017-07-14 02:43

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

    点赞 打赏 评论
  • 听楼一夜雨 2017-07-14 02:57

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

    点赞 打赏 评论
  • 张大教主 2017-07-14 03:24
    我json字段名用的是中文,如果json字段名是英文,那么你只需要将createTable中的中文字段用你的英文名称替代就行了
    
    点赞 打赏 评论
  • 你大爷D 2017-07-14 03:24
    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();
    
          })
    
    点赞 打赏 评论
  • 你大爷D 2017-07-14 03:30
    //你从数据库循环取到数值后,存在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());
    
    点赞 打赏 评论

相关推荐 更多相似问题