creating a 2 column table dynamically using jquery

Question

I am trying to generate a table dynamically using ajax call. To simplify things i have just added my code to js fiddle here -> http://jsfiddle.net/5yLrE/81/

As you click on the button "HI" first two columns are created properly.. but some how as the td length reaches 2 . its not creating another row. The reason is that when i do find on the table elements its actually retrieving the children table elements. Can some one pls help.

I want a two column table.. Thank you.

sample code:

var tr = $("#maintable tbody tr:first");

if(!tr.length || tr.find("td:first").length >= max) {
    $("#maintable").append("<tr>");
}
if(count==0) {
    $("#maintable tr:last").append("<td>hi"+content+"</td>");
}

Looking at your sample code, you really want to start using some form of templating and not inline HTML strings. e.g. create a dummy script section with an unknown type="text/template" and put your template HTML in that. You can reference that script element by id and get the html() to copy/insert. — iCollect.it Ltd
– iCollect.it Ltd, Commented Jun 10, 2014 at 15:03
Hi TrueBlueAussie. Yes i do use templating its just for the jsfiddle purpose i have written the code that way. and can you elaborate more how can i use the html property. I mean i dont understand how that solves the purpose. — user1908568
– user1908568, Commented Jun 10, 2014 at 15:06
tr.find("td:first") will always return 0 or 1 element (because of the :first) — Ian
– Ian, Commented Jun 10, 2014 at 15:10
I forgot to make that code change. Count variable is not used anymore. The fiddle is edited now. However thats not the problem.. if you can check the fiddle carefully please. — user1908568
– user1908568, Commented Jun 10, 2014 at 15:11
Thank you Ian. It worked fine. I got it. I was just trying to resolve the current code without taking efforts to think new. Thank you!! — user1908568
– user1908568, Commented Jun 10, 2014 at 15:27

iCollect.it Ltd · Accepted Answer · 2014-06-10 15:21:53Z

2

Basically the matching of descendants was allowing for great great grandchildren etc. Just needed to make the matching more specific.

JSFiddle: http://jsfiddle.net/TrueBlueAussie/5yLrE/91/

max = 2
$("button").click(function () {
    var content = $('#template').html();
    var $table = $("#maintable");
    var tr = $table.find(">tbody>tr:last");
    if (!tr.length || tr.find(">td").length >= max) {
        // Append a blank row
        tr = $("<tr>");
        $table.append(tr);
    }
    tr.append("<td>hi " + content + "</td>");
});

This one always targets the last row and adds a row if it does not exists at all (or there are too many divs already) which is what I gather you intended.

I also used the templating I suggested to separate messy HTML strings from the code.

answered Jun 10, 2014 at 15:21

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

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

1 Comment

user1908568 Over a year ago

Thank you Ian and TrueBlueAussie. Both the fiddles work fine!! I appreciate. you are right .. that is what happened it was taking decedents precedence. this is another correct fiddle link by IAN : jsfiddle.net/6UyZ3

Matt Frazee · Accepted Answer · 2014-06-10 15:26:59Z

1

You will want to check the length of the table cells before incrementing a new table row. After you have reached your max column length, reset the row and start over.

JSFiddle

max_columns = 2;
count=0;
$("button").click(function() {
    var content='column';
    if(count==max_columns||!$('#maintable tr').length){
        $("#maintable").append("<tr>");
        count=0;
    }
    if(count!=max_columns)
        $("#maintable tr:last").append("<td>"+content+"</td>");
    else
        $("#maintable tr:first").append("<td>"+content+"</td>");
    count++;
});

answered Jun 10, 2014 at 15:26

Matt Frazee

113 bronze badges

2 Comments

user1908568 Over a year ago

Matt the code you gave fails if i create another table. Try replacing the content variable defined in the question and see the effect. see here jsfiddle.net/5yLrE/95

Matt Frazee Over a year ago

nice catch! i didn't account for nested tables

Collectives™ on Stack Overflow

creating a 2 column table dynamically using jquery

2 Answers 2

JSFiddle: http://jsfiddle.net/TrueBlueAussie/5yLrE/91/

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

JSFiddle: http://jsfiddle.net/TrueBlueAussie/5yLrE/91/

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related