迭代数组并将值分配给表中的列 - javascript

Question

我是 JavaScript 新手。请帮我解决以下问题。

我定义了一个表。

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

我定义了一个动态数组 var SampleArr = ["Hello","Welcome","Folks",....];

问题：我如何循环这个数组并将值分配给表中的 td？

想要的输出::

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

Answer 1

jQuery 解决方案：

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

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

  });

Answer 2

我尝试过使用 jQuery。希望对你有帮助。

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

确保数据数组的详细信息按名字、中间名和姓氏顺序排列。 您还可以将标签和值存储在同一个数组中并填充。

谢谢

如果您不知道数组中有多少数据，请尝试将标签和值存储在 json 中并像这样填充：-

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

谢谢

Answer 3

这里有一些可以使用的原版 javascript：

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

Answer 4

来人：

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

这是一个功能示例： http://jsfiddle.net/leojavier/gfduxa42/

Answer 5

您可以利用 JavaScripts forEach() 循环将其保存在纯 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>

Answer 6

以及解决方案纯 Javascript 和 DOM 操作（无 5Go 框架）：

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>