从 javascript 数组创建 HTML 表

Posted 2023-03-05

【中文标题】从 javascript 数组创建 HTML 表

【英文标题】：Create HTML table from javascript array

【发布时间】：2012-03-21 22:02:22

【问题描述】：

我想在我的页面上获取 html 元素的所有类，将其拆分并存储在数组中。之后，我想将它写入我已经拥有的 id "table" 的 div 表中。

到目前为止，我有这个代码：

var string = $('html').attr('class');
var array = string.split(' ');
var arrayLength = parseInt(array.length);

for (i=0; i<=arrayLength; i++) 
    // code


<div id="test><!-- table goes here --></div>

剩下的可以帮我吗？

顺便说一句，HTML 元素具有来自modernizr.js 的类。

PS：代码是纯JS和jQuery的结合。因为我不知道如何在纯 JS 中获取 HTML 元素的所有类。有什么想法吗？

【参考方案1】：

如果您的 html 中已有表格

<div id="test><table >
    </table>
</div>  

您可以简单地 append 为其添加新行，

var string = $('html').attr('class');
var array = string.split(' ');
var arrayLength = parseInt(array.length);

for (i=0; i<=arrayLength; i++) 
  $("#test table") .append('<tr><td>'+array[i]+'</td></tr>') 

【参考方案2】：

不清楚你是想要每行还是每列的类名。这些示例是每行一个类名。试试这个：

var elm = $('#test'),
    table = $('<table>').appendTo(elm);

$(document.documentElement.className.split(' ').each(function() 
    table.append('<tr><td>'+this+'</td></tr>');
);

我使用本机代码来获取 HTML 元素的类名：document.documentElement.className，但您不妨使用$('html').attr('class')。

使用 innerHTML 的原生 JS 示例：

var d = window.document,
    elm = d.getElementById('test'),
    html = '<table>',
    classes = d.documentElement.classNames.split(' '),
    i = 0;

for(; classes[i]; i++) 
    html += '<tr><td>' + classes[i] + '</td></tr>';


elm.innerHTML = html + '</table>;

【参考方案3】：

如果您想完全删除 jQuery，请使用：

// Get array of classes without jQuery
var array = document.getElementsByTagName('html')[0].className.split(/\s+/);

var arrayLength = array.length;
var theTable = document.createElement('table');

// Note, don't forget the var keyword!
for (var i = 0, tr, td; i < arrayLength; i++) 
    tr = document.createElement('tr');
    td = document.createElement('td');
    td.appendChild(document.createTextNode(array[i]));
    tr.appendChild(td);
    theTable.appendChild(tr);


document.getElementById('table').appendChild(theTable);

【讨论】：

+1 用于使用标准的原生 DOM 操作函数而不是 innerHTML（尽管“高效”这个词备受争议......）