CODEWITHSUNDEEP
javascriptjqueryhtmlarrays
user724747
user724747

Reputation: 107

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

I'm new to javascript. Please help me out with the below question.

I have a table defined.

<div id="SampleDiv">
   <table id="SampleTable">
     <tr>
       <td></td>       
     </tr>
</table>
</div>

I have an dynamic array defined var SampleArr = ["Hello","Welcome","Folks",....];

Question : How do i loop this array and assign values to the td's in the table?

desired output::

<div id="SampleDiv">
   <table id="SampleTable">
     <tr>
       <td>Hello</td> 
       <td>Welcome</td>   
       <td>Folks</td>
       ....         
     </tr>
</table>
</div>

Upvotes: 0

Views: 2912

Answers (6)

Anonymous0day
Anonymous0day

Reputation: 3042

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>

Upvotes: 0

Kismat Konnection kknshastri
Kismat Konnection kknshastri

Reputation: 11

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

Upvotes: 1

Adjit
Adjit

Reputation: 10305

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>

Upvotes: 0

Leo Javier
Leo Javier

Reputation: 1403

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/

Upvotes: 0

GrafiCode
GrafiCode

Reputation: 3374

jQuery solution:

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

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

  });

Upvotes: 1

Scott
Scott

Reputation: 3765

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

Upvotes: 0

Related Questions