How to add rows in HTML Table using Jquery?
Question
I want to add rows dynamically at runtime using Jquery. At beginning table don't have any records. When user click the ADD Button it has to add the rows.
When user click ADD Button the operator dropdown list box value and Filter values should add in that table row.
Here what I tried Jquery CODE
$("#btnAdd").click(function () {
// $("#queryTable tr:last").after("<tr>...</tr><tr>...</tr>");
$('#queryTable > tbody:last-child').append('<tr>Record1</tr><tr>Record2</tr>');
});
I tried both lines. But it doesn't make any sense. Thanks
HTML Code
<table class="table table-hover " id="queryTable">
<thead>
<tr>
<th>Field Name</th>
<th>Values</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td> //Please ignore these two records. At beginning the table will be empty
<td>Otto</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</tbody>
</table>
3 answers
solution1
4 2017-02-02 06:20:10
添加HTML元素的正确jQuery代码是：
$('#queryTable tbody').append('<tr><td>Record1</td><td>Record2</td></tr>');
solution2
3 ACCPTED 2017-02-02 06:24:41
Your input string HTML is incorrect. As of now you have no TD element thus content is not displayed. However its appended and exists in DOM
'<tr><td>Record1</td><td>Record2</td></tr>
instead of
'<tr>Record1</tr><tr>Record2</tr>'
$('#queryTable > tbody:last-child').append('<tr><td>Record1</td><td>Record2</td></tr>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table table-hover" id="queryTable"> <thead> <tr> <th>Field Name</th> <th>Values</th> </tr> </thead> <tbody> <tr> <td>Mark</td> <td>Otto</td> </tr> <tr> <td>Jacob</td> <td>Thornton</td> </tr> </tbody> </table>
solution3
0 2017-02-02 06:57:25
<!DOCTYPE html>
<html>
<head>
<title>Add Rows Dynamically</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".add").click(function(){
var name = $("#name").val();
var lastname = $("#lastname").val();
var markup = "<tr><td>" + name + "</td><td>" + lastname + "</td></tr>";
$("table tbody").append(markup);
});
});
</script>
</head>
<body>
<input type="text" id="name" placeholder="Name">
<input type="text" id="lastname" placeholder="Last Name">
<input type="button" class="add" value="Add">
<table style="border: 1px solid black;">
<thead>
<tr>
<th>Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
It may help you.
solution4
0 2021-12-03 15:38:46
Using a table of 4 columns:
I can add values dinamically like this:
var TableId = "table_" + id;
var table = $("#" + TableId );
table.find("tbody tr").remove();
table.append("<tr><td>" + "1" + "</td><td>" + "lorem" + "</td><td>" + "ipsum" + "</td><td>" + "dolor" + "</td></tr>");
and the final result will be:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.