This example is useful when you don’t have a full list of data with you at the design time. You extract data dynamically from a remote source, such as, a database and then wish to add and show the data in tabular format on the web page.
jQuery provides some very useful methods designed specifically for these situations. Yes, I am talking about methods such as the jQuery .append(), .each() and .after(). I have explained about these methods before in my previous articles. Here in this article too, I am using these two methods in my example.
Finally, I’ll show you how you can design a form using dynamically created <table> with <tr> and <td> tags, and add input boxes to each row along with few buttons (submit and reset).
Therefore, first let’s see how we can add rows (that is <tr> and <td> tags) to a table with jQuery. All I have in the <body> is the <table> tag.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<table></table>
</body>
<script>
$(document).ready(function () {
$('table').append('<tr><td> Name </td><td> Profession </td></tr>');
// ADD ROWS TO THE TABLE.
$('table tr:last')
.after('<tr><td>Arun Banik</td><td>Blogger</td></tr>');
});
</script>I have only added a <table> tag in the markup section, with no rows at all. Using jQuery .append() method, I have added the first row (also serves as a header) to the table. Later, I have used jQuery .after() to add another row to the table.
The .after() method will have no effect unless and until the <table> has at least one row in it. In-addition, I am using jQuery :last selector, which will look for the last row (<tr>) in the table. This will ensure that the .after() adds a new row after the last row (not in the middle).
Now, let’s design a simple form using the above procedure and methods. Dynamically I wish to add input boxes (inside <td>) in each newly added row, also add two buttons, one to submit the form data and another to reset the form (clear all the input boxes).
<!DOCTYPE html>
<html>
<head>
<title>Dynamically Add Table Row using jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<style>
table
{
width: 100%;
font: 17px Calibri;
}
table, th, td
{
border: solid 1px #DDD;
border-collapse: collapse;
padding: 2px 3px;
text-align: center;
}
.input, div {
font:13px Verdana;
}
</style>
</head>
<body>
<p>Click the button to add rows to the table!</p>
<p><input type="button" id="bt" value="Click to add rows!" /></p>
<!--// ADD JUST THE TABLE TAG. WE'LL CREATE AND ADD ROWS TO THE TABLE DYNAMICALLY.-->
<table></table>
</body>
<script>
$(document).ready(function () {
$('#bt').click(function () {
// IF THERE IS NO <tbody> INSIDE THE <table> TAG.
$('table').append('<tr><td> Name </td><td> Designation </td></tr>');
// ADD MORE ROWS.
// USING AN ARRAY ADD 5 ROWS.
$.each(new Array(5), function (i) {
$('table tr:last')
.after('<tr><td><input id="name' + (i + 1) + '" type="text" class="input" /></td>' +
'<td><input id="desig' + (i + 1) + '" type="text" class="input" /></td>' +
'</tr>');
});
// ADD TWO BUTTONS (SUBMIT AND RESET) AT THE END OF THE TABLE.
$('table tr:last')
.after('<tr><td><input type="button" id="btSubmit" value="Submit"></td>' +
'<td><input type="button" id="btReset" value="Reset"></td>' +
'</tr>');
// EXTRACT THE VALUES ENTERED IN THE DYNAMICALLY CREATED
// INPUT BOXES.
var values, divResult;
$('#btSubmit').click(function () {
$(divResult)
.empty()
.remove();
values = '';
$('.input').each(function (i) {
divResult = $(document.createElement('div'))
.css({
padding: '5px', width: 'auto'
});
if (typeof $('#name' + (i + 1)).val() != 'undefined' &&
$('#name' + (i + 1)).val() != '') {
values += '<b>Name</b>: ' + $('#name' + (i + 1)).val() +
', <b>Designation</b>: ' + $('#desig' + (i + 1)).val() + '<br />'
}
});
// SHOW THE EXTRACTED VALUES ON THE FORM.
$(divResult).append('<p><h3>Employee Details</h3></p>' + values);
$('body').append(divResult);
});
// RESET (CLEAR) ALL THE "TEXT" FIELDS.
$('#btReset').click(function () {
$(':input')
.not(':button') // NOT THE BUTTONS.
.val('');
});
});
});
</script>
</html>In the above script, I have added few more jQuery methods, such as, .each(), .after(), .empty(), .remove() etc. to design a simple and yet a functional form.
The .each() method will loop though the <table>, creating and adding five rows to the already appended first row with two columns (as header). I am using an Array for the loop to execute 5 times.
$.each(new Array(5), function (i) {
...
});Each row has an Input box with a unique id and I have also defined a class each to the input elements. Next, outside the loop I have added another row with two input elements of type button. In addition, there are two click events, one to submit the contents of each input boxes and to reset the form.
$('#btSubmit').click(function () {
…
});
$('#btReset').click(function () {
…
});