I have an array of values in Javascript as follows:
var data = {"A", "B", "C", "D", "E", "F", "G", "H", "I" };
How can I generate a 3x3 HTML table like the following
A B C
D E F
G H I
-
4have you tried anything?meo– meo2011-02-09 12:40:35 +00:00Commented Feb 9, 2011 at 12:40
-
That's not even valid JavaScript...Álvaro González– Álvaro González2011-02-09 12:45:32 +00:00Commented Feb 9, 2011 at 12:45
-
var data = {...} <= object ...var data = [...] <= arraystecb– stecb2011-02-09 12:50:55 +00:00Commented Feb 9, 2011 at 12:50
Add a comment
|
3 Answers
var data = ["A", "B", "C", "D", "E", "F", "G", "H", "I" ]; // corrected Array syntax
var table = document.createElement("table");
var i = 0;
for (var r = 0; r < 3; r++) {
var row = table.insertRow(-1);
for (var c = 0; c < 3; c++) {
var cell = row.insertCell(-1);
cell.appendChild(document.createTextNode(data[i++]));
}
}
document.body.appendChild(table);
3 Comments
Bazzz
+1 for using DOM
createElement, and createTextNode. I've seen many programmers take the shortcut using a string and innerHTML. Personally I prefer your approach.
tehaaron
I have this same issue, except 4 columns and undefined number of rows. I like that your answer doesn't use innerHtml, however I can't seem to get it to work. Even when I plug yours into jsfiddle.net nothing shows up. Does the html body need to have a table set up?
RoToRa
Yep, I forgot the argument for
insertRow and insertCell. It works now: jsfiddle.net/ekaw7 For your requirements, replace the outer for loop with a while loop, that checks if data is still available, and an additional check before using the data. Example: jsfiddle.net/ekaw7/1var data = ["A", "B", "C", "D", "E", "F", "G", "H", "I" ];
var html = '<table><tr>';
for(var i = 0 ; i<data.length; i++){
if(i%3 == 0 && i != 0){
html+= '</tr><tr>'
}
html+='<td>'+data[i]+'</td>';
}
html+='</tr></table>';
document.write(html);
http://jsfiddle.net/DuSP5/ just tried this one.
