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

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

报告相同问题？

悬赏问题

  • ¥50 永磁型步进电机PID算法
  • ¥15 sqlite 附加（attach database）加密数据库时，返回26是什么原因呢？
  • ¥88 找成都本地经验丰富懂小程序开发的技术大咖
  • ¥15 如何处理复杂数据表格的除法运算
  • ¥15 如何用stc8h1k08的片子做485数据透传的功能？(关键词-串口)
  • ¥15 有兄弟姐妹会用word插图功能制作类似citespace的图片吗？
  • ¥200 uniapp长期运行卡死问题解决
  • ¥15 latex怎么处理论文引理引用参考文献
  • ¥15 请教：如何用postman调用本地虚拟机区块链接上的合约？
  • ¥15 为什么使用javacv转封装rtsp为rtmp时出现如下问题：[h264 @ 000000004faf7500]no frame？