javascript - 创建具有 3 列的动态表

Question

我有对象数组:

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 列和行。

例如，对于上面的 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>

或者如果我的数组是:

var arr = [{id:1, name:Mike },{id:2, name:Sam},{id:3, name:Herman},
           {id:10, name:Jorg},{id:2, name:Tom}] ;

表格是:

<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 行的表格。

Answer 1

通过除以数组length来计算空单元格的数量乘以 3，向上舍入，并减去 length .

使用 for 迭代数组循环到length数组的 + 空单元格数量，并添加新的 <tr>每当索引 % 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":"Surgen"},{"id":10,"name":"Jorg"}];
           
var table = $('<table>');
var tr;
var empty = Math.ceil(arr.length / 3) * 3 - arr.length;
  
for(var i = 0; i < arr.length + empty; i++) {
  i % 3 === 0 && (tr = $('<tr>').appendTo(table));
  
  tr.append('<td>' + (i < arr.length ? arr[i].name : 'empty') + '</td>');
}

$('#here_table').append(table);

table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

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

<div id="here_table"></div>