javascript - How to populate a table column-wise using arrays?

As an example, I have 3 arrays with same length:

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

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

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

I wish to know if there is a way to populate a HTML5 table by columns using jQuery (or even if this is the best practice for things like this). So far, I've seen this post.

This post came very close to answering my question but it doesn't use arrays.

The ideal solution would be to populate the table by having the number of rows same as the length of any of the arrays. (Users will be able to choose the length of the array(s), therefore, the number of rows... I think I got carried away).

For example:

Before

<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>

Expected Output

<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>

The code I've tried was able to populate one of the columns, but I can't get any further.

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

As an example, I have 3 arrays with same length:

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

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

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

I wish to know if there is a way to populate a HTML5 table by columns using jQuery (or even if this is the best practice for things like this). So far, I've seen this post.

This post came very close to answering my question but it doesn't use arrays.

For example:

Before

<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>

Expected Output

<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>

The code I've tried was able to populate one of the columns, but I can't get any further.

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

Share Improve this question edited Sep 3, 2019 at 5:42 Nick 147k23 gold badges66 silver badges105 bronze badges asked Sep 3, 2019 at 3:06 MrCorote 5739 silver badges22 bronze badges

Generally it is easier to use d3 over jquery as a library to manipulate data and construct DOM elements using the data, including filling up tables. – Rúnar Berg Commented Sep 3, 2019 at 3:43
Hello, I am a bit new to coding and wasn't able to find the meaning of the syntax in your code. Would you mind explaining what "$('<td>').html(p)" means? Thank you in advance! – webdesignnoob Commented Jul 23, 2020 at 8:40

Add a ment |

4 Answers 4

Sorted by: Reset to default 2

Why exactly use two iterations??. Just a single straight iteration with the longest array length.

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./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>

Basically you need to create an array of row data, and then you can use your code to map that into table rows. I've taken a simplistic approach to make it easier to deal with an array which isn't the same length as the others.

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./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>

Here is a simple way using $.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./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>

Non JQuery Solution

What you need is an array of rows. Simply put your column arrays in a parent array:

const rows = [arrayOne, arrayTwo, arrayThree];

Then you can use a double forEach loop to create the rows and columns:

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 solution

I remend using d3 over jquery for data manipulation (see how to join data here):

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/d3-selection.v1.min.js"></script>
<table id="my-table">
  <thead>
    <th>One</th>
    <th>Two</th>
    <th>Three</th>
  </thead>

  <tbody></tbody>
<table>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to populate a table column-wise using arrays? - Stack Overflow

4 Answers 4

Non JQuery Solution

d3 solution

与本文相关的文章

评论列表(0)