如何使用數組按列填充表？

Question

例如，我有3個長度相同的數組：

arrayOne = ['a', 'b', 'c']

arrayTwo = ['d', 'e', 'f']

arrayThree = ['g', 'h', 'i']

我想知道是否存在一種使用jQuery按列填充HTML5表的方法（ 即使這是諸如此類的最佳做法 ）。 到目前為止，我已經看過這篇文章 。

這篇文章非常接近回答我的問題，但是它不使用數組。

理想的解決方案是通過使行數與任何數組的長度相同來填充表。 （用戶將能夠選擇數組的長度，因此可以選擇行數……我想我被嚇倒了）。

例如：

之前

<table class="table">
    <thead class="thead-dark">
       <tr>
          <th scope="col">First Column</th>
          <th scope="col">Second Column</th>
          <th scope="col">Third Column</th>
       </tr>
     </thead>
     <tbody id="table-content">
     </tbody>
</table>

預期產量

<table class="table">
    <thead class="thead-dark">
       <tr>
          <th scope="col">First Column</th>
          <th scope="col">Second Column</th>
          <th scope="col">Third Column</th>
       </tr>
     </thead>
     <tbody id="table-content">
       <tr>
         <td>a</td>
         <td>d</td>
         <td>g</td>
       </tr>
       <tr>
          <td>b</td>
          <td>e</td>
          <td>h</td>
       </tr>
       <tr>
          <td>c</td>
          <td>f</td>
          <td>i</td>
       </tr>
     </tbody>
</table>

我嘗試過的代碼能夠填充其中一列，但是我無法再進一步了。

const columnOne = arrayOne.map(p => {
     const rowItem = $('<td>').html(p)
     return $('<tr>').append(rowItem)
           })
$('#table-content').append(columnOne)

Answer 1

基本上，您需要創建一個行數據數組，然后可以使用代碼將其映射到表行中。 我采用了一種簡單化的方法，以使其更容易處理與其他數組長度不同的數組。

 const arrayOne = ['a', 'b', 'c']; const arrayTwo = ['d', 'e', 'f']; const arrayThree = ['g', 'h']; // make a row array, adding blank values where insufficient data const l = Math.max(arrayOne.length, arrayTwo.length, arrayThree.length); let arrays = []; for (let i = 0; i < l; i++) { arrays[i] = [ arrayOne[i] || '', arrayTwo[i] || '', arrayThree[i] || '' ]; } const columns = arrays.map(p => { let row = $('<tr>'); p.forEach(v => row.append($('<td>').html(v))); return row; }); $('#table-content').append(columns) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table"> <thead class="thead-dark"> <tr> <th scope="col">First Column</th> <th scope="col">Second Column</th> <th scope="col">Third Column</th> </tr> </thead> <tbody id="table-content"> </tbody> </table> 

Answer 2

為什么要精確地使用兩次迭代？ 數組長度最長的一次直接迭代。

 const arrayOne = ['a', 'b', 'c']; const arrayTwo = ['d', 'e', 'f']; const arrayThree = ['g', 'h']; const maxSize = Math.max(arrayOne.length, arrayTwo.length, arrayThree.length); for (let i = 0; i < maxSize; i++) { let row = $('<tr>'); row.append($('<td>').html(arrayOne[i])); row.append($('<td>').html(arrayTwo[i])); row.append($('<td>').html(arrayThree[i])); $('#table-content').append(row); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table"> <thead class="thead-dark"> <tr> <th scope="col">First Column</th> <th scope="col">Second Column</th> <th scope="col">Third Column</th> </tr> </thead> <tbody id="table-content"> </tbody> </table> 

Answer 3

非JQuery解決方案

您需要的是一個行數組。 只需將您的列數組放在父數組中：

const rows = [arrayOne, arrayTwo, arrayThree];

然后，您可以使用double forEach循環創建行和列：

 const table = document.getElementById('my-table'); const tbody = table.querySelector('tbody'); const arrayOne = ['a', 'b', 'c']; const arrayTwo = ['d', 'e', 'f']; const arrayThree = ['g', 'h', 'i']; const rows = [arrayOne, arrayTwo, arrayThree]; rows.forEach(row => { const tr = document.createElement('tr'); row.forEach(d => { const td = document.createElement('td'); td.textContent = d; tr.appendChild(td); }); tbody.appendChild(tr); }); 

 <table id="my-table"> <thead> <tr> <th>One</th> <th>Two</th> <th>Three</th> </thead> <tbody></tbody> <table> 

d3解決方案

我建議在jQuery上使用d3進行數據處理（ 在此處查看如何連接數據 ）：

 const arrayOne = ['a', 'b', 'c']; const arrayTwo = ['d', 'e', 'f']; const arrayThree = ['g', 'h', 'i']; const rows = [arrayOne, arrayTwo, arrayThree]; const tr = d3.select('#my-table tbody') .selectAll('tr') .data(rows) .join('tr') .selectAll('td') .data(row => row) .join('td') .text(d => d); 

 <script src="https://d3js.org/d3-selection.v1.min.js"></script> <table id="my-table"> <thead> <th>One</th> <th>Two</th> <th>Three</th> </thead> <tbody></tbody> <table> 

Answer 4

這是使用$.each()的簡單方法。

 arrayOne = ['a', 'b', 'c']; arrayTwo = ['d', 'e', 'f']; arrayThree = ['g', 'h', 'i']; var newArray = [ arrayOne, arrayTwo, arrayThree ]; $.each(newArray, function(index, tr) { var $tr = $('<tr>'); $.each(tr, function(i, td) { $tr.append('<td>' + td + '</td>'); }) $('#table-content').append($tr); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <table class="table"> <thead class="thead-dark"> <tr> <th scope="col">First Column</th> <th scope="col">Second Column</th> <th scope="col">Third Column</th> </tr> </thead> <tbody id="table-content"> </tbody> </table>