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

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

.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

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

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

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);

Collectives™ on Stack Overflow

jQuery to dynamically add table rows

4 Answers 4

1 Comment

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Related