Javascript 动态创建包含3列的表

我有一组对象：

var arr = [{id:1, name:Mike },{id:2, name:Tom},{id:3, name:Herman},
           {id:4, name:Ursula},{id:5, name:Sam},{id:6, name:Jenny},
           {id:7, name:Helga},{id:8, name:Nikolas},{id:9, name:Surgen},
           {id:10, name:Jorg}] 

我需要动态生成一个表，在上面的数组中显示项目。 根据数组中的项数，该表应包含3列和3行

例如，对于上面的arr，我希望我的表是：

<div id="here_table">
    <table>
          <tr><td>Mike</td><td>Tom</td><td>Herman</td></tr>
          <tr><td>Ursula</td><td>Sam</td><td>Jenny</td></tr>
         <tr><td>Helga</td><td>Nikolas</td><td>Surgen</td></tr>
          <tr><td>Jorg</td><td>Empty</td><td>Empty</td></tr>
    </table>
</div>

表格如下：

<div id="here_table">
    <table>
          <tr><td>Mike</td><td>Sam</td><td>Herman</td></tr>
          <tr><td>Jorg</td><td>Tom</td><td>Empty</td></tr>
    </table>
</div>

米凯萨默尔曼
豪尔托空虚

---

如何根据数组中的项目数实现具有3列和3行的表。

通过将数组长度除以3，四舍五入，然后减去

长度来计算空单元格的数量

使用
for
循环迭代数组，直到数组的
长度
加上空单元格数，并在索引%3等于0时添加一个新的
（索引可被3整除）


var arr=[{“id”：1，“name”：“Mike”}，{“id”：2，“name”：“Tom”}，{“id”：3，“name”：“Herman”}，{“id”：4，“name”：“Ursula”}，{“id”：5，“name”：“Sam”}，{“id”：6，“name”：“Jenny”}，{“id”：7，“name”：“Helga”}，{“id”：8，“name”；“Nikolas”}，{“id”：9，“name”；“name”；“id”：10，“name”：“Jorg；
变量表=$（''）；
var-tr；
var empty=数学单元（arr.length/3）*3-arr.length；
对于（变量i=0；i
表格{
边界塌陷：塌陷；
}
运输署{
边框：1px纯黑；
}
使用模数运算符
%


var arr=[{id:1，名称：“Mike”}，{id:2，名称：“Tom”}，{id:3，名称：“Herman”}，
{id:4，名字：“Ursula”}，{id:5，名字：“Sam”}，{id:6，名字：“Jenny”}，
{id:7，姓名：“赫尔加”}，{id:8，姓名：“尼古拉斯”}，{id:9，姓名：“斯佩根”}，
{id:10，姓名：“Jorg”}]；
var str=“”；
用于（arr中的var i）{
如果（i%3==0）
str+=”；
str+=“”+arr[i]。名称+“”；
如果（（i+1）%3==0）
str+=”；
}
str+=”；
document.querySelector（“#here_table”）.innerHTML=str
trtd{
宽度：10%；
}
只需创建一个JavaScript函数即可创建该表

这里，我使用jQuery库来附加元素，但您也可以直接使用JavaScript添加元素。


//对象数组
var arr=[
{id:1，名字：“Mike”}，
{id:2，名字：“汤姆”}，
{id:3，名字：“赫尔曼”}，
{id:4，名字：“Ursula”}，
{id:5，名字：“Sam”}，
{id:6，名字：“珍妮”}，
{id:7，姓名：“Helga”}，
{id:8，姓名：“尼古拉斯”}，
{id:9，名字：“Surgen”}，
{id:10，姓名：“Jorg”}
];
//生成表格创建HTML代码
函数createTable（数组）{
var tableString=“”；
var numOfCells=数学单元（arr.length/3）*3；
对于（var i=0；i


<div id="here_table">
    <table>
          <tr><td>Mike</td><td>Sam</td><td>Herman</td></tr>
          <tr><td>Jorg</td><td>Tom</td><td>Empty</td></tr>
    </table>
</div>