当前位置：文江博客话题详情

JavaScript Table

如何使用 JS 对比数组对象并用 Table 绘制结果？

发布于 2022-09-11 16:09:19 字数 560 浏览 11 评论 0

问题描述

给出原始数据：

var data = [
    {
        title: "张三",
        sex: "男",
        age: "22",
        address: "吉祥村"
    },
    {
        title: "李四",
        sex: "男",
        age: "24",
        address: "鱼化寨"
    }
];

如上，如何对比数组中的两个或者多个对象，并用 Table 绘制

期待结果如下：

title	张三	李四
sex	男	男
age	22	24
address	吉祥村	鱼化寨

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（1）

情何以堪。 2022-09-18 16:09:19

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>

        </style>
    </head>
    <body>
        <table border="1">
            <tbody>
                
            </tbody>
        </table>
    </body>
    <script>
        var data = [
            {
                title: "张三",
                sex: "男",
                age: "22",
                address: "吉祥村"
            },
            {
                title: "李四",
                sex: "男",
                age: "24",
                address: "鱼化寨"
            }
        ];
        var arr = [];
        for(var i in data[0]){
            arr.push([i])
        }
        for(var i in data){
            for(var j in data[i]){
                for(var k in arr){
                    if(arr[k][0]===j){
                        arr[k].push(data[i][j]);
                    }
                }
            }
        }
        var tbody = document.getElementsByTagName('tbody')[0];
        for(var i in arr){
            var tr = document.createElement("tr");
            for(var j in arr[i]){
                tr.innerHTML += '<td>'+arr[i][j]+'</td>';
            }
            tbody.appendChild(tr);
        }
        
    </script>
</html>

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

22 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

lorenzathorton8

文章 0 评论 0

Zero

文章 0 评论 0

萧瑟寒风

文章 0 评论 0

mylayout

文章 0 评论 0

tkewei

文章 0 评论 0

17818769742

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文