The following code shows how to add rows to a table.
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
src='http://code.jquery.com/jquery-1.10.1.js'></script>
<link rel="stylesheet" type="text/css"
href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script type='text/javascript'
src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css"
href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<!--from w ww .j a v a 2s.c om-->
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function () {
$("#addRow").click(function () {
var row = $("<tr><td>1</td><td>E</td><td>E</td><td>E</td></tr>");
$("#mt > tbody").append(row);
});
});
});
</script>
</head>
<body>
<table id="mt" class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>
<div id="context-menu">
<ul class="dropdown-menu" role="menu">
<li><a tabindex="-1">Action</a></li>
<li><a tabindex="-1">Another action</a></li>
<li><a tabindex="-1">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1">Separated link</a></li>
</ul>
</div>
<br>
<button id="addRow" class="btn default">
Add row
</div>
</body>
</html>