jQuery add number of rows to the table dynamically?

Question

I have a table like this

<table id="user-data">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Contact Number</th>
    </tr>
</table>

Now all the fields for the fields like Name, Email and Contact Number is populating from database. Before this I was getting only a single row of content. So I made my script like this

<script type="text/javascript">
    var html = $('<tr><td><input type=\"text\" name=\"name\"></td><td><input type=\"text\" name=\"email\"></td><td><input type=\"text\" name=\"contact-number\"></td></tr>');
    $('table#user-data').append(html);
</script>

This was adding the single row in the table without any problem. But now I want to add more then single row at a time and the row number will change every time. So can someone tell me how to add given number of rows to the table dynamically? Any help and suggestions will be really appreceable. Thanks

Update I am getting the number of rows in my jQuery. Lets say it is in a variable called Length.

"populating from database" isn't helpful at all. What's the structure of data? an array, json, json array..? you should iterate accordingly. — T J
– T J, Commented Sep 6, 2014 at 16:13
In the example above, your var html seems to be constructed independent of any data (the data you mention is being populated from the database). Anyhow, how about your wrap the code which populates a row and iterate over the collection your receive from the database? Clutching at straws here, a jsfiddle would help. — r0hitsharma
– r0hitsharma, Commented Sep 6, 2014 at 16:14

T J · Accepted Answer · 2014-09-06 16:35:41Z

1

As you mentioned, assume you have the number of records in a variable called length.

You can add that many number of rows as follows:

var html;
for(i=0; i<length; i++){
   html += '<tr><td><input type="text" name="name"></td><td><input type="text" name="email"></td><td><input type="text" name="contact-number"></td></tr>';
}
$('table#user-data').append(html);

Side notes:

It's a good practice to avoid DOM manipulation inside loops if possible. You can concatenate the HTML and append it all at once in this case.
You don't have to escape the quotes as long as you're using a different quote inside the string

edited Sep 6, 2014 at 16:35

answered Sep 6, 2014 at 16:29

T J

43.2k13 gold badges87 silver badges142 bronze badges

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

Comments

J.C · Accepted Answer · 2014-09-06 16:15:29Z

0

You can wrap your current code in a for loop which will append a new row to the table for each record that you are iterating over.

for(i=0; i<data.length; i++){
    var html = $('<tr><td><input type=\"text\" name=\"name\"></td><td><input type=\"text\" name=\"email\"></td><td><input type=\"text\" name=\"contact-number\"></td></tr>');
    $('table#user-data').append(html);
}

You can then use i+1 as the value for the row number

answered Sep 6, 2014 at 16:15

J.C

806 bronze badges

7 Comments

J.C Over a year ago

If you can post your datasource, I'll revise my answer so that it fits for your situation...it's really just a stab in the dark right now

T J Over a year ago

The comment option is there for a reason. And you seems to have enough rep to comment, asking for more information. stabbing in the dark right is a bad practise, because users will keep coming back with such dark questions without enough info.

J.C Over a year ago

I appreciate your input, but this is a legitimate answer to his question...which is why I chose not to put it in the question comment.

T J Over a year ago

"stabbing in the dark" isn't legitimate...:)

Ahmad Over a year ago

This could answer to the question so it don't have to be put in comments

|

Collectives™ on Stack Overflow

jQuery add number of rows to the table dynamically?

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related