jQuery to dynamically add table rows

Question

I want to dynamically add table rows on change of my select I already wrote a script that actually does this, but the system is not dynamic yet.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
$("#noOfSegments").change(function(){
    var counter=${#noOfSegments}.val();
    for(i=0; i<counter; i++){
    var row = $("<tr><td>"i"</td><td>"i"</td><td>"i"</td><td>"i"</td><td>"i"</td></tr>");
    $("#segmentTable").append(row);
    }
});
});
</script>

<select id="noOfSegments">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

and #segmentTable is my table id but the above script gives me this error:

"Uncaught SyntaxError: Unexpected token { "

Can anyone please suggest me a solution?

Jordi Jolink · Accepted Answer · 2013-08-24 07:58:43Z

3

You are missing a lot of parantheses, quotes and plus signs. This should work:

$(document).ready(function(){
$("#noOfSegments").change(function(){
    var counter=$('#noOfSegments').val();
    for(i=0; i<counter; i++){
    var row = $("<tr><td>" + i + "</td><td>" + i + "</td><td>" + i + "</td><td>" + i + "</td><td>" + i + "</td></tr>");
    $("#segmentTable").after(row.html());
    }
});
});

answered Aug 24, 2013 at 7:58

Jordi Jolink

4513 silver badges7 bronze badges

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

1 Comment

user2131465 Over a year ago

.after(row.html()) does not append the row so its giving me a weird structure

Tushar Gupta - curioustushar · Accepted Answer · 2013-08-24 08:00:44Z

1

DEMO

corrected code and

changed $("#segmentTable").after(row.html())

to

$("#segmentTable").html(row.html());

$(document).ready(function () {
    $("#noOfSegments").change(function () {
        var counter = $('#noOfSegments').val();
        for (i = 0; i < counter; i++) {
            var row = $("<tr><td>" + i + "</td><td>" + i + "</td><td>" + i + "</td><td>" + i + "</td><td>" + i + "</td></tr>");
            $("#segmentTable").html(row.html());
        }
    });
});

answered Aug 24, 2013 at 8:00

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

Comments

tverghis · Accepted Answer · 2013-08-24 07:59:29Z

0

Change ${#noOfSegments} to $('#noOfSegments').

answered Aug 24, 2013 at 7:59

tverghis

1,00910 silver badges31 bronze badges

Comments

Tushar Gupta - curioustushar · Accepted Answer · 2013-08-24 08:40:09Z

0

In java script you can do pure dynamically

var table = document.createElement("table");
table.id = "tbldrp";
var row = table.insertRow(table.rows.length);
var rowItems = row.insertCell(0);
var label = document.createElement("label");
label.id = "lblDripName";
label.innerHTML = "Label Content";
rowItems.appendChild(label);

edited Aug 24, 2013 at 8:40

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

answered Aug 24, 2013 at 8:06

Chandan

672 silver badges10 bronze badges

Collectives™ on Stack Overflow

jQuery to dynamically add table rows

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related