Printing Array Into Table Through Javascript

Currently when you add some values in the 4 textboxes identified by 'Special' it outputs in a concatenated string. How would I break that up into a table where I could print it out

Solution 1:

Full solution on JSFiddle:

http://jsfiddle.net/protron/xGhnv/9/

Basically what I did was:

1. In the HTML I replaced the <div> called list for a new <table>:

   <table id="tableDailyDeals"></table>
   

2. In the Javascript instead of calling $(elem).text(... I create a new table row (<tr>) in the table just defined:

   var $tr = $('<tr>').appendTo('#tableDailyDeals');
   

3. Then besides adding the input-hidden for each dailyDeal attribute (for 0 to 3) I also create a table cell (<td>) and inside it a new <span> with the text you already have in your array named dailyDeal (the span is optional, but as I also put the input-hidden in the same td I think is better this way):

   var $td = $('<td>').appendTo($tr);
   $('<span>').text(dailyDeal[i]).appendTo($td);
   

4. Then just add another table cell (<td>) for the row remover link:

   var$tdRemoveRow = $('<td>').appendTo($tr);
   

The rest is just some css styling and minor details.