Создайте HTML-таблицу из массива javascript

Question

Я хочу получить все классы элемента HTML на моей странице, разделить его и сохранить в массиве. После этого я хочу записать его в свою таблицу в 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> 

Можете ли вы помочь мне с остальными?

btw, элемент HTML имеет классы из modernizr.js.

PS: Код представляет собой комбинацию чистого JS и jQuery. Потому что я не знаю, как получить все классы элемента HTML в чистом JS. Есть идеи?

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

JSFiddle пример, который отображает таблицу.

Answer 2

, если у вас есть таблица уже в 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>') 
} 

Answer 3

Это не ясно, если вы хотите, чтобы имена классов по рядам или колонка. Этими примерами являются одно имя класса для каждой строки. Попробуйте это:

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

Уроженец пример JS с помощью innerHTML:

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