根据行的内容将一个表拆分为多个表答案

【问题标题】：Split one table into multiple ones based on content of a row根据行的内容将一个表拆分为多个表
【发布时间】：2016-12-06 02:58:38
【问题描述】：

是否可以根据单元格的内容创建N个表格，例如我有下表：

  <table>
    <tr>
      <td>Row 1 Colum 1</td>
      <td>Row 1 Colum 2</td> 
      <td>Row 1 Colum 3</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Row 2 Colum 1</td>
      <td>Row 2 Colum 2</td> 
      <td>Row 2 Colum 3</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Row 3 Colum 1</td>
      <td>Row 3 Colum 2</td> 
      <td>Row 3 Colum 3</td>
      <td>2</td>
    </tr>
  </table>

第四列有 1 和 2 的值，基于此，我想创建 2 个表，每个不同的数字一个，在本例中为 1 和 2，

结果：

表 1

  <table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 Colum 1</td>
      <td>Row 1 Colum 2</td> 
      <td>Row 1 Colum 3</td>
      <td>1</td>
    </tr>
  </tbody>
  </table>

表 2

  <table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 2 Colum 1</td>
      <td>Row 2 Colum 2</td> 
      <td>Row 2 Colum 3</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Row 3 Colum 1</td>
      <td>Row 3 Colum 2</td> 
      <td>Row 3 Colum 3</td>
      <td>2</td>
    </tr>
  </tbody>
  </table>

编辑。

数据是从 CSV 中获取的，我使用 jquery-csv 创建表。这个 CSV 有大约 200 列，其中包含来自不同员工的交易信息，每行显示一个交易详细信息，例如员工 1 有 3 个交易，其中 2 个交易具有相同的 id，另一个具有不同的 id：

idEmployee|Transaction|idTransaction|..|..|..|
    1     |Buy X thing|      001    |..|..|..|
    1     |Buy Y thing|      001    |..|..|..|
    1     |Buy Z thing|      002    |..|..|..|

这个表可以有多个事务ID的多个员工，我想要的是为每个事务号创建一个表，例如，最后一个表的结果将是每个事务ID的2个表：

表 1

idEmployee|Transaction|idTransaction|..|..|..|
    1     |Buy X thing|      001    |..|..|..|
    1     |Buy Y thing|      001    |..|..|..|

表2

idEmployee|Transaction|idTransaction|..|..|..|
    1     |Buy Z thing|      002    |..|..|..|

到目前为止，我的代码是根据行数将一个表一分为二：

var rows = $("table").find ("tr").slice(3);
var $tableCopy = $("content").append("<table id='tableCopy'><tbody></tbody></table>");
$tableCopy.find("tbody").append(rows);
$("table").find ("tr").slice(3).remove();

有问题的项目是这样的：用户有一个包含大量员工数据的 CSV，他想根据 CSV 信息制作报告以打印它，所以他在页面上输入 CSV，然后选择他想在报告上显示的列，然后系统创建多个报告，其中仅包含用户选择的列，并且由于 CSV 包含多个员工的信息，系统创建多个报告。此外，用户可以制作报表的布局，但那是另一天了哈哈。

编辑 2：我创建了一些代码，根据 id 报告的数量创建多个表，首先我创建了一个包含 id 报告总数的数组：

  $scope.getReportsID = function(){
    $scope.reportsID = [];
    //Loop through the array data that contains the table
    for(var row in $scope.data){
    //Loop through the specific cell
      for(var item in $scope.data[row]){
        //The reportID is on cell 19, if that id exist on the array 
        //break the loop but if doesn't exist, check if the data is not 
        //an empty string, if not, push the data on the array
        if((jQuery.inArray( $scope.data[row][19], $scope.reportsID )) !== -1)
          break;
        if($scope.data[row][19] !== "")
          $scope.reportsID.push($scope.data[row][19]);
      }
    }
    //We call createTables function
    $scope.createTables();
  }

然后我根据reportsID的数量来制作表格的数量

创建表函数

  $scope.createTables = function() {
    //Loop through the array that contains the diferent reporst id's
    for(var i in $scope.reportsID){
      //Loop through the array data that contains the table
      for(var row in $scope.data){
         //If data on the cell 19 of the current row equals the current 
         //element of the reportsID array,break the loop and create a table
        if( $scope.data[row][19] === $scope.reportsID[i])
          break;
      }
      $('#hereTables').append('<table id=table' + i + '><tbody></tbody>' + '</table>');
    }
  }

到目前为止，这段代码可以工作，并创建了等于不同 id 数量的表，现在我只需要填写它，我还不知道，但我正在努力哈哈

【问题讨论】：

到目前为止，您尝试了哪些代码来实现这一目标？
您从哪里获取数据？这是决定下一步的重要部分。例如，如果您使用 jQuery，您可以循环访问自定义数据源的输出，然后将必要的数据附加到 HTML 格式的存储变量中。然后，只需访问必要的 div 的 innerHTML 并在其中粘贴 storage var 的内容。
能详细点就更好了。

标签： javascript jquery html html-table

【解决方案1】：

据我了解，您想将一个大表拆分为两个小表...例如：如果您在一个表中有 50 个条目，则您希望每个 25 个条目创建两个表... 这样做将条件应用于您的循环。例如：

for (i = 0; i < (YourArray.length)/2; i++) { 
 for (j = 0; j < YourLimitOfeachTable; j++) { 

   }    
}

【讨论】：