Question

我手上有一个物体，包含未知数量的属性。这些属性中的每一个，我想表示为table中的列表项，其中元素在设置的列数之间从上到下展开，如下所示，或者当它们到达时最大数量。

数据集：

{"one", "two", "three", "four"}

我想要的结果：

one   |  three |
two   |  four  |
      |        |

那么我如何用jQuery做到这一点？

Answer 1

假设您需要一个表和一个简单的Javascript / jQuery解决方案。你可以做这样简单的事情。只需找出你的物体长度，除以2，然后建立你的桌子。请参阅演示here

不是自称这是某种魔法，而是一种完成你在问题中表现出来的非常基本的方式（如果我理解正确的话）。至少希望这能让你开始。

JS：

var trCounter = 0;

var myObj = ["one", "two", "three", "four", "five", "six", "seven"];

var objHalf = Math.round(myObj.length / 2); // your example shows two columns

$(myObj).each(function(i) {

    if (i < objHalf) {
        // build initial table rows and first column
        $("#myObjOutput").append("<tr><td>" + myObj[i] + "</td></tr>");
    }
    else {
        // add subsequent column with remainder of data
        $("#myObjOutput tr:eq(" + trCounter + ")").append("<td>" + myObj[i] + "</td>");
        trCounter++;
    }

});

HTML：

<div>
    <table id="myObjOutput">
    </table>
</div>

CSS：

#myObjOutput td {
    border: 1px solid black;
    padding: 3px;
}

Answer 2

在CSS3中，您可以设置容器的column-count属性：

#container {

    column-count: 2;
    column-rule: 1px solid #000;
    column-gap: 1em;
}

然后在需要时使用column-count增加JQuery (JavaScipt)。

<强>更新

请参阅this演示。

用jQuery填充上下表？

2 个答案: