For loop inside append not working

Question

below is my code.

$("<table/>",{"cellspacing":"0","cellpadding":"0","border":"0","width":"100%"}) .append( $("<tbody/>") .append(function(){ options=["ONE","TWO","THREE","FOUR"]; $.each(options, function(val) { return ($("<tr/>") .append( $("<td/>").html("4/6/2013 10:41"), $("<td/>").html("5/6/2013 10:42"), $("<td/>").html(val), $("<td/>").html("<img src='pdf_16x16.png'/>"), $("<td/>").html("<a href='#'>Re-Upload Documents</a>") )); }) }) ).appendTo("body"); 

for loop inside append does not work.

Answer 1

The problem is that you are not returning anything from the append function, only inside the each loop. Try the following:

 $("<tbody/>").append(function(){ options = ["ONE","TWO","THREE","FOUR"]; var $container = $('<table></table>'); $.each(options, function(val) { $container.append($("<tr/>").append( $("<td/>").html("4/6/2013 10:41"), $("<td/>").html("5/6/2013 10:42"), $("<td/>").html(val), $("<td/>").html("<img src='pdf_16x16.png'/>"), $("<td/>").html("<a href='#'>Re-Upload Documents</a>") )); }); return $container.html(); }); 

Script example

Answer 2

Try

 var tbody = $("<tbody/>").appendTo($("<table/>", { "cellspacing" : "0", "cellpadding" : "0", "border" : "0", "width" : "100%" }).appendTo("body")); options = ["ONE", "TWO", "THREE", "FOUR"]; $.each(options, function(key, val) { return tbody .append($("<tr/>") .append($("<td/>").html("4/6/2013 10:41")) .append($("<td/>").html("5/6/2013 10:42")) .append($("<td/>").html(val)) .append($("<td/>").html("<img src='pdf_16x16.png'/>")) .append($("<td/>").html("<a href='#'>Re-Upload Documents</a>"))); }) 

Demo: Fiddle

Answer 3

Try

 $.each(options, function(val) { return ($("<tr/>") .append( $("<td/>").html("4/6/2013 10:41") + $("<td/>").html("5/6/2013 10:42") + $("<td/>").html(val) + $("<td/>").html("<img src='pdf_16x16.png'/>") + $("<td/>").html("<a href='#'>Re-Upload Documents</a>") )); }) 

Answer 4

try the following:

 $("<table/>",{"cellspacing":"0","cellpadding":"0","border":"0","width":"100%"}) .append("<tbody></tbody>").appendTo("body"); $("tbody").append(function(){ options = ["ONE","TWO","THREE","FOUR"]; var $container = $('<div></div>'); $.each(options, function(val) { $container.append($("<tr/>").append( $("<td/>").html("4/6/2013 10:41"), $("<td/>").html("5/6/2013 10:42"), $("<td/>").html(val), $("<td/>").html("<img src='pdf_16x16.png'/>"), $("<td/>").html("<a href='#'>Re-Upload Documents</a>") )); }); return $container.html(); }); 

working fiddle here: http://jsfiddle.net/mCLsm/2/