Question

我必须构建一个这样的数组：

[{'test1': 't1',  'test2' :'t2'},  
 {'test3' :'t3', 'test4': 't4' },
 {'test5': 't5',  'test6' :'t6'},
 {'test7' :'t7' , 'test8': 't7' }]

它将是一个对象数组。

对象将始终具有两个键/值对。关键和价值观将是动态的。

我必须遍历下面的对象来构建数组：

最后，我必须从数组中构建一个表，它将如下所示：

它必须是一个2列的表，带有键和值。

HTML：

<table class="detailList" >
    <tbody>
        <tr></tr>
        <tr>
            <th class="labelCol" scope="row"> <label>test1</label> </th>
            <td class="dataCol"> t1</td>
            <th class="labelCol" scope="row"> <label>test2</label> </th>
            <td class="dataCol"> t2</td>
        </tr>
        <tr>
            <th class="labelCol" scope="row"> <label>test3</label> </th>
            <td class="dataCol"> t3</td>
            <th class="labelCol" scope="row"> <label>test4</label> </th>
            <td class="dataCol"> t4</td>
        </tr>
        <tr>
            <th class="labelCol" scope="row"> <label>test5</label> </th>
            <td class="dataCol"> t5</td>
            <th class="labelCol" scope="row"> <label>test6</label> </th>
            <td class="dataCol"> t6</td>
        </tr>
        <tr>
            <th class="labelCol" scope="row"> <label>test7</label> </th>
            <td class="dataCol"> t7</td>
            <th class="labelCol" scope="row"> <label>test8</label> </th>
            <td class="dataCol"> t7</td>
        </tr>
    </tbody>
</table>

知道怎么做吗？

Answer 1

多么疯狂的要求。我喜欢。这是我的看法。（没有测试）

CREATE TABLE `day_schedules` (
    `id` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
    `user_id` INT(10) UNSIGNED NOT NULL,
    `event_id` INT(10) UNSIGNED NOT NULL,
    `day_id` INT(10) UNSIGNED NOT NULL,
    `time_s` VARCHAR(50) NOT NULL,
    `time_e` VARCHAR(50) NOT NULL,
    `sch_title` LONGTEXT NOT NULL,
    `sch_desc` LONGTEXT NOT NULL,
    `created_at` TIMESTAMP NULL DEFAULT NULL,
    `updated_at` TIMESTAMP NULL DEFAULT NULL,
    PRIMARY KEY (`id`),
    INDEX `FK_dayschedules_users` (`user_id`),
    INDEX `FK_dayschedules_events` (`event_id`),
    INDEX `FK_dayschedules_days` (`day_id`),
    CONSTRAINT `FK_dayschedules_days` FOREIGN KEY (`day_id`) REFERENCES `days` (`id`) ON UPDATE CASCADE ON DELETE CASCADE,
    CONSTRAINT `FK_dayschedules_events` FOREIGN KEY (`event_id`) REFERENCES `events` (`id`) ON UPDATE CASCADE ON DELETE CASCADE,
    CONSTRAINT `FK_dayschedules_users` FOREIGN KEY (`user_id`) REFERENCES `users` (`id`) ON UPDATE CASCADE ON DELETE CASCADE
)

Answer 2

以下是我将如何创建该表：

Working jsFiddle

var testObject = {
  some_key: {
    key1: '1',
    key2: '2',
    key3: '3',
  }
};

var elements = [];
var last = null;
// loop over the keys in the object in question
$.each(testObject.some_key, function(key, value) {
  var item = '<th class="labelCol" scope="row"><label>' + key + '</label></th><td class="dataCol">' + value + '</td>';
  if (!last) { // if no last item, set this row to last dont add to the array of elements just yet, we need the other two columns first
    last = item;
  } else {
    // if we already have a last, add these two columns to it, then add it to our array of elements
    elements.push(last + item);
    last = null;
  }
});
if (last) {
  // at the end, if we still have a "last" hanging around, add two empty columns
  var item = '<th class="labelCol" scope="row"><label></label></th><td class="dataCol"></td>';
  elements.push(last + item);
}
// join the array wrapping each set of 4 columns with a tr
var rows = '<tr>' + elements.join('<tr></tr>') + '</tr>';

$('.detailList tbody').html(rows);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="detailList">
  <tbody>
  </tbody>
</table>

使用两个键/值对构建对象数组

2 个答案:

Working jsFiddle