Question

我有一个包含string的Javascript数组，格式为<td>200</td><td>I3</td><td>NAME NAME</td><td>EXTRA</td>

示例数组[0]包含<td>200</td><td>I3</td><td>NAME NAME</td><td>EXTRA</td>
这是一个字符串（依此类推）

如何在迭代数组时打印html表？

Answer 1

你可以用这个：

var html = '<table><tr>' + myarray.join('</tr><tr>') + '</tr></table>';

例如：

＆＃13;

myarray = [
    '<td>200</td><td>I3</td><td>NAME NAME</td><td>EXTRA</td>',
    '<td>150</td><td>I1</td><td>Some data</td><td>-999</td>',
    '<td>360</td><td>K9</td><td>other data</td><td>nothing</td>',
];

var html = '<table border=1><tr>' + myarray.join('</tr><tr>') + '</tr></table>';

document.querySelector('#mytablemustcomehere').innerHTML = html;

＆＃13;

<div id="mytablemustcomehere"></div>

＆＃13;

Answer 2

您可以循环遍历数组元素，并为每行添加<tr>。

＆＃13;

var arr = ["<td>200</td><td>I3</td><td>NAME NAME 1</td><td>EXTRA 1</td>", 
           "<td>100</td><td>I2</td><td>NAME NAME 2</td><td>EXTRA 2</td>"];

var str = "";

var table = document.getElementById("myTable");

for(var i = 0; i < arr.length; i++) str += "<tr>"+arr[i]+"</tr>";

table.innerHTML = str;

＆＃13;

<table id="myTable"></table>

＆＃13;

Answer 3

@ trincot的答案最适合具体问题。我想用DOM API扩展一下如何做到这一点。

function createRowHTML(itemData) {
  return '<tr><td>' + itemData.join('</td><td>') + '</td></tr>';
}

function appendTableTo(element, items) {
  var table = document.createElement('table');
  table.innerHTML = items.map(createRowHTML).join('');
  element.appendChild(table);
}

var items = [
  [200, 'I3', 'NAME NAME 1', 'EXTRA 1'], 
  [100, 'I2', 'NAME NAME 2', 'EXTRA 2']
];

appendTableTo(document.querySelector('body'), items);

使用javascript打印表格元素

3 个答案: