從javascript數組創建HTML表格

我想要在我的頁面上獲取所有類的HTML元素，將其拆分並將其存儲在數組中。之後，我想把它寫入我的表格中，我已經擁有ID爲「table」的div。從javascript數組創建HTML表格

到目前爲止，我有這樣的代碼：

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

來源

2012-03-03 ms2

如果你想刪除的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例子。

來源

2012-03-03 20:38:57 Paulpro

+1使用標準的本地DOM操作函數而不是innerHTML（儘管「高效」一詞有很多爭議......） – David 2012-03-03 20:57:06

如果您在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>') 
}

來源

2012-03-03 20:33:41

，如果你想每行或每類名目前尚不清楚柱。這些示例是每行一個類名稱。試試這個：

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

來源

2012-03-03 20:35:48 David

從javascript數組創建HTML表格

回答

相關問題