Create HTML table from javascript array

Question

I want to get all classes of the HTML element on my page, split it and store it in array. After that I want to write it into my table in the div with the id "table" which I already have.

So far I have this code:

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>

Can you help me with the rest?

btw, the HTML element has the classes from a modernizr.js.

PS: The code is combination of pure JS and jQuery. Because I dont know how to get all classes of the HTML element in pure JS. Any Idea?

Paul · Accepted Answer · 2018-07-25 16:05:27Z

11

If you're trying to remove jQuery altogether use this:

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

edited Jul 25, 2018 at 16:05

answered Mar 3, 2012 at 20:38

Paul

142k28 gold badges285 silver badges272 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

David Hellsing Over a year ago

+1 for using standard native DOM manipulation functions instead of innerHTML (although the term "efficient" is highly debated...)

Jayantha Lal Sirisena · Accepted Answer · 2012-03-03 20:38:42Z

2

if you have a table already in the html

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

you can simply append new rows to it,

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

edited Mar 3, 2012 at 20:38

answered Mar 3, 2012 at 20:33

Jayantha Lal Sirisena

21.4k11 gold badges74 silver badges94 bronze badges

Comments

David Hellsing · Accepted Answer · 2012-03-03 20:47:22Z

2

It is not clear if you want the class names per row or per column. These examples are one class name per row. Try this:

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

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

I used native code to get the classNames of the HTML element: document.documentElement.className, but you might as well use $('html').attr('class').

A native JS example using 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>;

edited Mar 3, 2012 at 20:47

answered Mar 3, 2012 at 20:35

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

Collectives™ on Stack Overflow

Create HTML table from javascript array

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related