jesseszr 2017-07-14 02:21 采纳率: 66.7%
浏览 4117
已采纳

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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(5条)

报告相同问题?

悬赏问题

  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能
  • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面