javascript配列からHTMLテーブルを作成

Question

私のページにHTML要素のすべてのクラスを取得し、分割して配列に格納したいと考えています。その後、私はすでに持っているid "テーブル"を使って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の組み合わせです。純粋な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); 

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

カラム。これらの例は、行ごとに1つのクラス名です。これを試してみてください：

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