iterate over array and assign values to columns in table - javascript

jQuery solution:

  $.each(SampleArr, function(index, value) {

    $('#SampleTable td:last').after('<td>'+value+'</td>');

  });

I have tried using jQuery. I hope it may help you.

HTML:-

<table id="mytable">
  <tr><td><label>First Name : </label></td></tr>
  <tr><td><label>Middle Name : </label></td></tr>
  <tr><td><label>Last Name : </label></td></tr>
</table>

-----------

JQuery:-

var data = ["Krishna","Kant","Shastri"];  //first name, midle name, last name

//get all <td> element
var myTD = $('#mytable td');

//iterate all <td> and append values from data array
$.each(myTD,function(idx,tdHTML){
  $(tdHTML).append(data[idx]);
});

----------
Output:-
First Name : Krishna
Middle Name : Kant
Last Name : Shastri

make sure data array should have details in order first name, middle name & last name. You can also store both label and values in same array and populate.

Thanks

If you dont know how many data is there in array than try storing label and value in json and populate like this:-

HTML:-

<table id="mytable">
</table>

jquery:-

var data = {"First Name":"Krishna", "Middle Name":"Kant", "Last Name":"Shastri", "Place":"India"};

var tableHTML = '';

$.each(data,function(key,value){
  tableHTML += '<tr><td><label>'+ key +' : '+ value +'</label></td></tr>';
});
$('#mytable').html(tableHTML);

Thanks

Here is some vanilla javascript to use:

var SampleArr = ["Hello","Welcome","Folks"];

var html = '<div id="SampleDiv"><table id="SampleTable"><tr>';

for (var i=0,max=SampleArr.length;i<max;i++) {
	html += '<td>'+SampleArr[i]+'</td>';  
}
html += '</tr></table></div>';
document.write(html);

Here man:

var template = null;
var array = ['leo', 'Liz', 'Michael'];

for(var i =0; i<array.length; i++){
    template = '<tr><td>' + array[i] + '</td></tr>';
    $('table').append(template);
}

here is a functional example: http://jsfiddle.net/leojavier/gfduxa42/

You can utilize the JavaScripts forEach() loop to keep this in plain JS.

var sampleArr = ["Hello,", "Welcome", "to", "the", "jungle"];

var tableRow = document.getElementById("row1");

sampleArr.forEach(function(value){
  tableRow.innerHTML += "<td>" + value + "</td>";
});

<table id="t-table">
  <tbody>
    <tr id="row1"></tr>
  </tbody>
</table>

And the solution Pure Javascript and DOM manipulation (without 5Go framework):

var SampleArr = ["Hello","Welcome","Folks"];
var table = document.getElementById('SampleTable');

SampleArr.forEach(function(val  , i){

  var curCell = table.rows[0].cells[i];
  if(!curCell) curCell = table.rows[0].insertCell();

   var curValue = curCell.innerText || curCell.textContent;

   curCell.innerHTML = curValue + val;
})

<div id="SampleDiv">
   <table id="SampleTable" border=1>
     <tr>
       <td>First Name : </td>       
       <td>Middle Name : </td>       
       <td>Last Name : </td>       
     </tr>
</table>
</div>