How to Create dynamic tbody onclick of button using javascript
I have this HTML
HTML
<input name="row_no" type="text" placeholder="Type Your Number of row" />
<button>Add row</button>
<table id="myTable">
<tbody>
<tr>
<th class="column-title">Product name</th>
<th class="column-title">Quantity</th>
<th class="column-title">Price</th>
</tr>
</tbody>
</table>
JQuery
<script>
$(document).ready(function() {
//Try to get tbody first with jquery children. works faster!
var tbody = $('#myTable').children('tbody');
//Then if no tbody just select your table
var table = tbody.length ? tbody : $('#myTable');
$('button').click(function(){
//Add row
table.append('<tr>\n\
<td><input name="product_name[]" type="text"/></td>\n\
<td><input name="qty[]" type="text"/></td>\n\
<td><input name="price[]" type="text"/></td>\n\
</tr>');
})
});
</script>
When I click on the button "Add row", it appends the table and add row.
But now, I have a textbox in the HTML. I want to append the table to generate rows based on the value of:
<input name="row_no" type="text" placeholder="Type Your Number of row" />
With document.createElement() method you can create a specified HTML element dynamically in JavaScript. Once created, you can insert (or add) the element to your web page, or add it to a pre-defined element or a dynamically created element. In fact, you can create an entire form dynamically using this method. In this article, I’ll show you how to create an HTML table dynamically using the “createElement()” method and populate the table with data extracted from an array.
A form usually contains not just a table, but other elements too. For example, we will need a button to extract the data from the table and submit it. Therefore, along with a , I’ll also show you how to create an Input type button element along with DIV element (will serve as a container) using the createElement() method.
That is, using the method we’ll actually create three elements, dynamically in this example.
