时间戳

首页 > 解决方案 > 如何在单个对象中并排表格行？

javascript - 如何在单个对象中并排表格行？

问题描述

当我在表中输入数据并保存时，我有并排的表，它返回第一个表的数据，如

[{"circuit_no_left":"1","rating_left":"3","description_left":"test1","circuit_no_right":"2","rating_right":"5","description_right":"test2"},{"circuit_no_left":"3","rating_left":"","description_left":"","circuit_no_right":"4","rating_right":"","description_right":""},{"circuit_no_left":"5","rating_left":"","description_left":"","circuit_no_right":"6","rating_right":"","description_right":""},{"circuit_no_left":"7","rating_left":"","description_left":"","circuit_no_right":"8","rating_right":"","description_right":""}]

我想要这样的输出

[{"circuit_no_left":"1","rating_left":"3","description_left":"test1"},{"circuit_no_right":"2","rating_right":"5","description_right":"test2"},{"circuit_no_left":"3","rating_left":"","description_left":""},{"circuit_no_right":"4","rating_right":"","description_right":""},{"circuit_no_left":"5","rating_left":"","description_left":""},{"circuit_no_right":"6","rating_right":"","description_right":""},{"circuit_no_left":"7","rating_left":"","description_left":""},{"circuit_no_right":"8","rating_right":"","description_right":""}]

我只想要一个对象中的一个表格行。我在一个不正确的对象中并排放置。一个对象的左侧列和另一个对象的右侧列。

html:

    <div class="table-responsive">
                            <table id="table" class="table table-bordered custom_table">
                                <thead>
                                <tr>
                                    <th style="width: 72px;">Circuit</th>
                                    <th style="width: 72px;">Rating</th>
                                    <th>Description</th>
                                    <th style="width: 72px;">Circuit</th>
                                    <th style="width: 72px;">Rating</th>
                                    <th>Description</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>

脚本：

  var table = document.getElementById('table');
                var jsonArr = [];
                for (var i = 1, row; row = table.rows[i]; i++) {
                    var col = row.cells;
                    var jsonObj = {
                         circuit_no_left: col[0].innerHTML,
                        rating_left: col[1].innerHTML,
                        description_left: col[2].innerHTML,
                        circuit_no_right: col[3].innerHTML,
                        rating_right: col[4].innerHTML,
                        description_right: col[5].innerHTML,
                    }

                    jsonArr.push(jsonObj);
                }
                this.table_data = JSON.stringify(jsonArr);

                console.log('tableData', this.table_data);

标签： javascriptjqueryhtml

解决方案

如果您希望将左右条目分成单独的对象，只需在循环中创建两个对象并将它们分别推送到数组中。

var jsonArr = [];
for (var i = 1, row; row = table.rows[i]; i++) {
    var col = row.cells;
    var jsonObjLeft = {
        circuit_no_left: col[0].innerHTML,
        rating_left: col[1].innerHTML,
        description_left: col[2].innerHTML
    };
    var jsonObjRight = {
        circuit_no_right: col[3].innerHTML,
        rating_right: col[4].innerHTML,
        description_right: col[5].innerHTML
    };

    jsonArr.push(jsonObjLeft);
    jsonArr.push(jsonObjRight);
}
this.table_data = JSON.stringify(jsonArr);

console.log('tableData', this.table_data);

推荐阅读