js 将二维数组打印成table | json数据格式化

最新推荐文章于 2024-01-10 17:06:16 发布

原创最新推荐文章于 2024-01-10 17:06:16 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

前端显示专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种将二维数组转换为HTML表格的方法，通过使用jQuery和动态生成表头及表格内容，实现数据的清晰展示。文章详细展示了如何配置表头显示，并通过遍历数组填充表格数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

将二维数组打印成table

//根据键名配置表头显示
arr={'id':'id',
     'name':'姓名',
     'phone':'手机号'
};
var obj = '#lend_area';
$(obj).append('<table class="moretable"><thead></thead><tbody></tbody></table>');
var num=1;
$.each(info.res, function (i, v) {
    $(obj).find('.moretable tbody').append('<tr></tr>');
    $(obj).find('.moretable tbody').find('tr:last').append('<td>'+num+'</td>');
    if (i == 0) {
        $(obj).find('.moretable thead').append('<th class="th">id</th>');
        $.each(v, function(si, sv) {
            $(obj).find('.moretable thead').append('<th class="th">'+arr[si]+'</th>');
            $(obj).find('.moretable tbody').find('tr:last').append('<td>'+sv+'</td>');
        })
    } else {
        $.each(v, function(si, sv) {
            $(obj).find('.moretable tbody').find('tr:last').append('<td>'+sv+'</td>');
        })
    }
    num ++;
})

JSON数据格式化

function formatJson(msg) {
    var rep = "~";
    var jsonStr = JSON.stringify(msg, null, rep)
    var str = "";
    for (var i = 0; i < jsonStr.length; i++) {
        var text2 = jsonStr.charAt(i)
        if (i > 1) {
            var text = jsonStr.charAt(i - 1)
            if (rep != text && rep == text2) {
                str += "<br/>"
            }
        }
        str += text2;
    }
    jsonStr = "";
    for (var i = 0; i < str.length; i++) {
        var text = str.charAt(i);
        if (rep == text)
            jsonStr += "&nbsp;&nbsp;&nbsp;&nbsp;"
        else {
            jsonStr += text;
        }
        if (i == str.length - 2)
            jsonStr += "<br/>"
    }
    console.log(jsonStr);
    return jsonStr;
}