Question

我有一个大型数组，我将其转换为7个较小的块/组的多维数组。现在我希望这些组中的每一个都显示在表的每一行中，其中td的数量等于每个块中的项目数。例如我的数组是：

var arr = ["OH","2090923","14 Dec 2017","01 Jan 2018","01 Jan 2018","1.0","Approval","CL","105452","31 Jan 2018","07 Feb 2018","07 Feb 2018","0.5","Approval","CL","2100909","06 Feb 2018","06 Feb 2018","06 Feb 2018","0.5","Approval","CL","105452","06 Feb 2018","16 Mar 2018","16 Mar 2018","1.0","Approval","ML","2100909","09 Feb 2018","09 Feb 2018","09 Jul 2018","151.0","Approval","PL","2130989","09 Feb 2018","12 Feb 2018","16 Feb 2018","5.0","Approval"]

现在我把它分成7块，但是想在表格中显示为：

<table>
    <tr>
        <td>OH</td>
        <td>2090923</td>
        <td>14 Dec 2017</td>
        <td>01 Jan 2018</td>
        <td>01 Jan 2018</td>
        <td>1.0</td>
        <td>Approval</td>
    </tr>

    <tr>
        <td>CL</td>
        <td>105452</td>
        <td>31 Jan 2018</td>
        <td>07 Feb 2018</td>
        <td>07 Feb 2018</td>
        <td>0.5</td>
        <td>Approval</td>
    </tr>

</table>

但我的代码显示为：

<table class="tbl">

    <tbody>
    <tr>
        <td>OH,2090923,14 Dec 2017,01 Jan 2018,01 Jan 2018,1.0,Approval</td>
    </tr>
    <tr>
        <td>CL,105452,31 Jan 2018,07 Feb 2018,07 Feb 2018,0.5,Approval</td>
    </tr>
    <tr>
        <td>CL,2100909,06 Feb 2018,06 Feb 2018,06 Feb 2018,0.5,Approval</td>
    </tr>
    <tr>
        <td>CL,105452,06 Feb 2018,16 Mar 2018,16 Mar 2018,1.0,Approval</td>
    </tr>
    <tr>
        <td>ML,2100909,09 Feb 2018,09 Feb 2018,09 Jul 2018,151.0,Approval</td>
    </tr>
    <tr>
        <td>PL,2130989,09 Feb 2018,12 Feb 2018,16 Feb 2018,5.0,Approval</td>
    </tr>
    <tr>
    </tbody>
</table>

每个夹头进入一个完整的<td>，请帮忙。

fsfiddle：https://jsfiddle.net/23ojbmkp/3/

Answer 1

 var createGroupedArray = function(arr, chunkSize) {
        var groups = [], i;
        
        for (i = 0; i < arr.length; i += chunkSize) {
            groups.push(arr.slice(i, i + chunkSize));
        }
        return groups;
    }
    var arr = ["OH","2090923","14 Dec 2017","01 Jan 2018","01 Jan 2018","1.0","Approval","CL","105452","31 Jan 2018","07 Feb 2018","07 Feb 2018","0.5","Approval","CL","2100909","06 Feb 2018","06 Feb 2018","06 Feb 2018","0.5","Approval","CL","105452","06 Feb 2018","16 Mar 2018","16 Mar 2018","1.0","Approval","ML","2100909","09 Feb 2018","09 Feb 2018","09 Jul 2018","151.0","Approval","PL","2130989","09 Feb 2018","12 Feb 2018","16 Feb 2018","5.0","Approval"]
    
    var groupedArr = createGroupedArray(arr, 7);
    
    for(i=0;i < groupedArr.length;i++){
    
      var temp = '';
      for(var j = 0; j < groupedArr[i].length; j++)
      	 temp += '<td>' + groupedArr[i][j] + '</td>';
      $(".tbl").append('<tr>' + temp + '</tr>');          
}

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

您不需要var result = JSON.stringify(groupedArr);和var res=JSON.parse(result);。
i<=res.length应为i < res.length。
使用嵌套的for循环。
如果您重构for函数，则可以在一个createGroupedArray循环中完成。

Answer 2

您需要遍历嵌套数组中的元素，并将每个元素作为<td>附加到当前<tr>。

var createGroupedArray = function(arr, chunkSize) {
  var groups = [],
    i;
  for (i = 0; i < arr.length; i += chunkSize) {
    groups.push(arr.slice(i, i + chunkSize));
  }
  return groups;
}
var arr = ["OH", "2090923", "14 Dec 2017", "01 Jan 2018", "01 Jan 2018", "1.0", "Approval", "CL", "105452", "31 Jan 2018", "07 Feb 2018", "07 Feb 2018", "0.5", "Approval", "CL", "2100909", "06 Feb 2018", "06 Feb 2018", "06 Feb 2018", "0.5", "Approval", "CL", "105452", "06 Feb 2018", "16 Mar 2018", "16 Mar 2018", "1.0", "Approval", "ML", "2100909", "09 Feb 2018", "09 Feb 2018", "09 Jul 2018", "151.0", "Approval", "PL", "2130989", "09 Feb 2018", "12 Feb 2018", "16 Feb 2018", "5.0", "Approval"]
var groupedArr = createGroupedArray(arr, 7);
var table = $(".tbl");
$.each(groupedArr, function() {
  var row = $("<tr>");
  $.each(this, function() {
    row.append($("<td>", {
      text: this
    }));
  });
  table.append(row);
});

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

将每个较小的数组放在每一行中

2 个答案: