從javascript數組創建HTML表

Question

我想在我的頁面上獲取HTML元素的所有類，將其拆分並將其存儲在數組中。 之后，我想把它寫入div中的表格，其中包含我已經擁有的id“table”。

到目前為止，我有這個代碼：

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元素的所有類。 任何的想法？

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

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

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的原生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>;