将数组切成几个块

时间:2014-07-13 19:11:32

标签: javascript jquery html arrays foreach

请查看此fiddle

如何将数组切割成几个小数组

var data = 
[ { number: '1' },
  { number: '2' },
  { number: '3' },
  { number: '4' },
  { number: '5' },
  { number: '6' },
  { number: '7' },
  { number: '8' },
  { number: '9' },
  { number: '10'}
            ];

为每个人建一张桌子?     例如:

<table>
  <thead>
   <tr>
    <th>Number</th><th>Number</th><th>Number</th>
   </tr>
  </thead>
  <tbody>
    <tr>
     <td>1</td><td>2</td><td>3</td>
    </tr>
  </tbody>
 </table>

 <table>
  <thead>
   <tr>
    <th>Number</th><th>Number</th><th>Number</th>
   </tr>
  </thead>
  <tbody>
    <tr>
     <td>4</td><td>5</td><td>6</td>
    </tr>
  </tbody>
 </table>
 ........

以下代码无效。输出有点混乱。正如您在小提琴中看到的那样,我无法访问密钥(数字),并且表之间有空<table></table>个标记。任何人都可以告诉我如何正确地切割阵列。

代码:

var data = [ { number: '1' },
  { number: '2' },
  { number: '3' },
  { number: '4' },
  { number: '5' },
  { number: '6' },
  { number: '7' },
  { number: '8' },
  { number: '9' },
  { number: '10'}
            ];
var chunks = [];
var item_html ="";
for (var i=0; i<data.length; ) {
    chunks.push(data.slice(i, i+=3));
}
for (var i=0; i<chunks.length; i++) {

     item_html += "<table><thead><tr>";

       (i, chunks[i].map(function(key,v){
       item_html += "<th>"+key+"</th>";
       })); 
     item_html += "</tr></thead><tbody><tr>";

       (i, chunks[i].map(function(v){
       item_html += "<td>"+v.number+"</td>";
       })); 

     item_html += "</tr></tbody><table>";

}

$('#area').append(item_html)

1 个答案:

答案 0 :(得分:2)

不正确的标题是因为您在第一次.map()调用中以错误的顺序拥有迭代函数的参数。第一个参数是值,第二个参数是键。它应该是:

chunks[i].map(function (v, key) {

空表是因为拼写错误。这一行:

 item_html += "</tr></tbody><table>";

应该是:

 item_html += "</tr></tbody></table>";

您错过了/中的</table>

更正的循环是:

for (var i = 0; i < chunks.length; i++) {

    item_html += "<table><thead><tr>";

    chunks[i].map(function (v, key) {
        item_html += "<th>" + key + "</th>";
    });
    item_html += "</tr></thead><tbody><tr>";

    chunks[i].map(function (v) {
        item_html += "<td>" + v.number + "</td>";
    });

    item_html += "</tr></tbody></table>";

}

每次拨打(i, ...)时,您都没有额外的.map(),所以我将其删除了。

Updated fiddle