Question

这是我的代码：

$.ajax({
    type: 'POST', 
    url: '/tableResult', 
    data: form.serialize()
}).done(function (data) {
    for (var i in data.fields){
        $('.thead').append("<th>" + data.fields[i].name.charAt(0).toUpperCase() + data.fields[i].name.slice(1).replace(/_/g," "));
    }

    data.rows.map(function (item) {
        for (i = 0; i < 4; i++) {
            $('.tbody').append("<tr><td>" + item[Object.keys(item)[i]])
            console.log(item[Object.keys(item)[i]])
        }
    });
}

这是输出：

Actor id    First name  Last name   Last update
1
Penelope
Guiness
2013-05-26T12:47:57.620Z
2
Nick
Wahlberg
2013-05-26T12:47:57.620Z

我需要这样的输出：

Actor id          First name     Last name      Last update
 1                Penelope       Guiness        2013-05-26T12:47:57.620Z

我该怎么做？

Answer 1

这里的关键是将行（tr）的概念与列（td）分开。对于每行，您有x列是考虑它的方式。这意味着你需要为每组x设置一个标签。

由于没有提供数据样本，我不得不进行逆向工程。让我知道它是否与我提出的不同，我可以调整代码以匹配。

我假设你有一张桌子上有一个thead和tbody。

<!doctype html>
<html lang="en">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
    <script>
        $(function() {
            var data = {
                fields: {
                    1: {name: 'actor_id'},
                    2: {name: 'first_name'},
                    3: {name: 'last_name'},
                    4: {name: 'last_update'}
                },
                rows: [
                    {
                        actor_id: 1,
                        first_name: 'Penelope',
                        last_name: 'Guiness',
                        last_update: '2013-05-26T12:47:57.620Z'
                    },
                    {
                        actor_id: 2,
                        first_name: 'Nick',
                        last_name: 'Wahlberg',
                        last_update: '2013-05-26T12:47:57.620Z'
                    }
                ]
            };
            var fieldCount = 0;
            for (var i in data.fields){
                $('thead').append("<th>" + data.fields[i].name.charAt(0).toUpperCase() + data.fields[i].name.slice(1).replace(/_/g," "));
                fieldCount++;
            }
        data.rows.forEach(function (item) {
            var el = $('tbody').append("<tr>");
            Object.keys(item).forEach(function(key) {
                $(el).append("<td>" + item[key])
            });
        });
        });
    </script>

    <meta charset="utf-8">
    <title>clicker game</title>
</head>

<body>
    <table>
        <thead></thead>
        <tbody></tbody>
    </table>

</body>
</html>

如果有人知道如何用循环和.map解决这个问题

1 个答案: