Generating a table in Javascript/jQuery [duplicate]

Question

Possible Duplicate:
Creating tables dynamically in jQuery

I have two Arrays, letters = [A,B,C,...] and numbers = [1,2,3,...], and would like to generate a html table with numbers as the headers and letters as the first entry (and then I can fill it in with values which I have). Is this possible for general Arrays?

That is, as shown below:

<table>
   <thead>
     <tr>
       <th></th>
       <th>1</th>
       <th>2</th>
       <th>3</th>
     </tr>
   </thead>
   <tbody>
     <tr id="A">
       <td>A</td>
       <td></td>
       <td></td>
       <td></td>
     </tr>
     <tr id="B">
       <td>B</td>
       <td></td>
       <td></td>
       <td></td>
     </tr>
     <tr id="C">
       <td>C</td>
       <td></td>
       <td></td>
       <td></td>
     </tr>
   </tbody>
 </table>

"Is this possible for general Arrays?" - Of course. What have you tried so far? — nnnnnn
– nnnnnn, Commented Jul 16, 2012 at 10:52
@hayden It's not about the code posted ;) but the ideas proposed in the answers... I would not use the code posted by the author any time, but the solutions are viable IMO. — DrColossos
– DrColossos, Commented Jul 16, 2012 at 11:15
@DrColossos This is much cleaner in both the question and the simplicity of the answers... Although the duplicate appears to share the same title, IMO the content is complete junk! Ah well. — Andy Hayden
– Andy Hayden, Commented Jul 17, 2012 at 9:37

nnnnnn · Accepted Answer · 2012-07-16 11:01:43Z

1

OK, here's the first way that came to mind:

var letters = ["A","B","C"],
    numbers = [1,2,3],
    $table = $("<table/>"),
    $body = $("<tbody/>").appendTo($table),
    $row = $("<tr><th></th></tr>");

$.each(numbers,function(i,val){
  $("<th/>").text(val).appendTo($row);
});
$("<thead/>").append($row).appendTo($table);

$.each(letters, function(i,val) {
  $row = $("<tr/>").attr("id",val).appendTo($body);
  $("<td/>").text(val).appendTo($row);
  for (var j = 0; j < numbers.length; j++)
    $row.append("<td/");
});

$table.appendTo("body");

Demo: http://jsbin.com/ocomit/edit#javascript,html,live

Yes it could be prettier and/or more efficient. This uses only very rudimentary jQuery methods - if you're not sure about any of them you know where to look...

answered Jul 16, 2012 at 11:01

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

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

Comments

hsuk · Accepted Answer · 2012-07-16 11:08:38Z

1

Please try this one :

    var html = '';
    letters = [A,B,C];
    numbers = [1,2,3];
    html+= "<table><thead><tr><th></th>";
    for(i=0;i<letters.length;i++)
       html+="<th>"++letters[i]"</th>"; 
    html+= "</tr></thead>";
    html+= "<tbody>";
    for(j=0;j<numbers.length;j++)
    {
       html+="<tr id='"+numbers[j]+"'>";
       html+="<td>"+numbers[j]+"</td>";
       for(k=1;k<letters.length;k++)
           html+= "<td></td>";
       html+= "</tr>";
    }    
    html+= "</tbody>";
    html+= "</table>";

And please alert "html" and you will get your desired output.

answered Jul 16, 2012 at 11:08

hsuk

6,87013 gold badges53 silver badges81 bronze badges

1 Comment

davidethell Over a year ago

I would +1 for using a javascript-only solution except you read his question wrong. He wanted the numbers in the header and the letters in the table data.

Collectives™ on Stack Overflow

Generating a table in Javascript/jQuery [duplicate]

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related