for loop inside the append is 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 the append is not working.

val is the index here. Is it what you expect? ` $.each(options, function(i,val) {...});` ? — A. Wolff
– A. Wolff, Commented Aug 7, 2013 at 10:39
Typo: you have two closing brackets after the append, you need curly brace and a bracket: }); — Rory McCrossan
– Rory McCrossan, Commented Aug 7, 2013 at 10:40

Rory McCrossan · Accepted Answer · 2014-10-15 07:09:09Z

5

The problem is because you are not returning anything from the append function, only the each loop within it. Try this:

$("<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();
});

Example fiddle

edited Oct 15, 2014 at 7:09

answered Aug 7, 2013 at 10:43

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

2 Comments

Natesan Over a year ago

Thanks. it is working. but it should be tr not div in container variable. great!.

A. Wolff Over a year ago

@Natesan Why? He is returning the content not the element. Maybe he could use a TABLE but not a TR

Arun P Johny · Accepted Answer · 2013-08-07 10:46:13Z

1

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

answered Aug 7, 2013 at 10:46

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

GautamD31 · Accepted Answer · 2013-08-07 10:34:09Z

0

Try like

$.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>")
    ));
})

answered Aug 7, 2013 at 10:34

GautamD31

28.8k10 gold badges66 silver badges86 bronze badges

Comments

maverickosama92 · Accepted Answer · 2013-08-07 10:47:24Z

0

try 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/

answered Aug 7, 2013 at 10:47

maverickosama92

2,7352 gold badges24 silver badges38 bronze badges

Collectives™ on Stack Overflow

for loop inside the append is not working

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related