HTML table from multiple JavaScript arrays

Question

I am building a little interactive website for some people to use. I have a lot of it built but am stuck on this part.

There are 4 arrays that are based on a users selections, they start as empty arrays. As a user clicks on an item it's four components are added to each array respectively, they are all numbers.

Item 1: 3,5,7,9

Item 2: 2,4,6,8

    var bgArray = [3,2]; 
    var minority = [5,4];
    var poverty = [7,6];
    var lep = [9,8];

What I want to do is build an HTML table from the four arrays and have it look like the following. Basically row 1 would be [0] for each array, row 2 would be [1] and so on. I cannot figure out a way to get them to line up. (run code snippet to see table)

<table>
<tr>
  <td>H1</td>
  <td>H2</td>
  <td>H3</td>
  <td>H4</td>

  </tr>
<tr>
  <td>3</td>
  <td>5</td>
  <td>7</td>
  <td>9</td>

  </tr>
<tr>
  <td>2</td>
  <td>4</td>
  <td>6</td>
  <td>8</td>
  </tr>
</table>

I plan to have users make their selections and then click a button to generate the table. They can also deselect an item and regenerate the table.

Thanks in advance.

What did you try to write so far? What is the problem exactly? — Dekel
– Dekel, Commented Oct 25, 2016 at 17:03

E. Salazar · Accepted Answer · 2016-10-25 17:21:06Z

1

Eric, this code may be what you are requesting. This will help you draw your table with the values of the arrays on a button click.

var bgArray = [3,2,1]; 
var minority = [5,4,3];
var poverty = [7,6,5];
var lep = [9,8,7];

$("button").on("click", function(e){
  e.preventDefault();
  
  // Get the length of one array
  var numRows = bgArray.length;
  
  // Clear the table (except first row)
  $("table tr:not(:first-child)").remove();
  
  // Add the rows
  for(var i = 0; i < numRows; i++){
    var newRow = $("<tr></tr>");
    newRow.append(createNewColData(bgArray[i]));
    newRow.append(createNewColData(minority[i]));
    newRow.append(createNewColData(poverty[i]));
    newRow.append(createNewColData(lep[i]));
    $("table").append(newRow);
  }  
});

// Auxiliar function to render a table data
function createNewColData(data){
  return "<td>" + data + "</td>";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Add values</button>
<br/>
<br/>
<table>
  <tr>
    <td>H1</td>
    <td>H2</td>
    <td>H3</td>
    <td>H4</td>
  </tr>
</table>

I'm not sure how your button display will work, but if you update your markup I could update my answer.

Good luck and happy coding!

answered Oct 25, 2016 at 17:21

E. Salazar

931 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eric.18 Over a year ago

This is my preferred solution as i am already using Jquery. This works great for what I need, nice and simple and integrated great with my existing code. Your button implementation/display worked great.

BrTkCa · Accepted Answer · 2016-10-25 17:10:43Z

1

You can iterate the arrays (considering that the length of the four matrixes is the same) and build the lines of table:

var bgArray = [3,2]
  , minority = [5,4]
  , poverty = [7,6]
  , lep = [9,8];

var lines = "";
for (let i = 0 ; i < bgArray.length ; i++){
      lines += "<tr>"  
      lines += "<td>" + bgArray[i] + "</td>"      
      lines += "<td>" + minority[i] + "</td>" 
      lines += "<td>" + poverty[i] + "</td>" 
      lines += "<td>" + lep[i] + "</td>" 
      lines += "</tr>"
}

$("table").append(lines);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <th>H1</th>
    <th>H2</th>
    <th>H3</th>
    <th>H4</th>
  </tr>

</table>

answered Oct 25, 2016 at 17:10

BrTkCa

4,7894 gold badges28 silver badges46 bronze badges

1 Comment

Eric.18 Over a year ago

thanks so much for this answer. While it did do what I was looking for it did not work as well with my code and this is my mistake. Every time i clicked the button it would add the rows again to the table, over and over. Thanks for you answer.

Abk · Accepted Answer · 2016-10-25 17:46:20Z

You can achieve this without using any javascript library.

Vanilla Javascript will do

HTML

<table border="1">
  <tr>
    <th>H1</th>
    <th>H2</th>
    <th>H3</th>
    <th>H4</th>
  </tr>

</table>

JavaScript

var bgArray = [3,2], minority = [5,4], poverty = [7,6], lep = [9,8];

var row = "";
for (var i = 0 ; i < bgArray.length ; i++){
      row += "<tr>" ; 
      row += "<td>" + bgArray[i] + "</td>"  ;    
      row += "<td>" + minority[i] + "</td>" ;
      row += "<td>" + poverty[i] + "</td>" ;
      row += "<td>" + lep[i] + "</td>" ;
      row += "</tr>";
}

var t = document.querySelector('table');

t.innerHTML = t.innerHTML + row;

The JSFiddle is here

var bgArray = [3,2], minority = [5,4], poverty = [7,6], lep = [9,8];

var row = "";
for (var i = 0 ; i < bgArray.length ; i++){
      row += "<tr>" ; 
      row += "<td>" + bgArray[i] + "</td>"  ;    
      row += "<td>" + minority[i] + "</td>" ;
      row += "<td>" + poverty[i] + "</td>" ;
      row += "<td>" + lep[i] + "</td>" ;
      row += "</tr>";
}

var t = document.querySelector('table');

t.innerHTML = t.innerHTML + row;

<table border="1">
  <tr>
    <th>H1</th>
    <th>H2</th>
    <th>H3</th>
    <th>H4</th>
  </tr>

</table>

Collectives™ on Stack Overflow

HTML table from multiple JavaScript arrays

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related