用JavaScript数组创建HTML表格

Question

我希望能获取页面上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的类。

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

- user1247294

Answer 1

如果您想完全删除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);

- Paul

---

使用标准的本地DOM操作函数而不是innerHTML（尽管“高效”一词存在争议...）+1 - David Hellsing

Answer 2

如果您在HTML中已经有表格了

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

您可以简单地将新行附加到它上面。

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

- Jayantha Lal Sirisena

Answer 3

不清楚您是想按行还是按列获取类名。这些示例每行只有一个类名。可以尝试以下方式：

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

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

我使用原生代码获取HTML元素的classNames：document.documentElement.className，但你也可以使用$('html').attr('class')。

下面是一个使用innerHTML的JavaScript示例：

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

- David Hellsing