Create a bootstrap table using html with table head and table body. Now create an other table that is hidden (not shown on user interface) with table row and table data. Get hidden table's table row using java script change the id's value at run time using counter variable and than append that row inside your main table (in which you want to add row).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
function addUserRow() {
var counter = 1;
var tableRow = $("#user-detail-table").find(".user-first-row").clone();
tableRow.addClass("user-first-row"+counter);
tableRow.attr("id", "active-user-row"+counter);
var userName = tableRow.find("#user-name0");
userName.attr("id", "user-name"+counter);
var lastName = tableRow.find("#last-name0");
lastName.attr("id", "last-name"+counter);
var email = tableRow.find("#email0");
email.attr("id", "email"+counter);
var mainTable = $("#student-table");
mainTable.append(tableRow);
}
</script>
</head>
<body>
<div class="container">
<h2>Student Table</h2>
<p>Add Dynamic Row in table</p>
<table class="table" id="student-table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<input type="button" class="btn" name="btn" value="Add Row" onClick="addUserRow()">
</div>
<table id="user-detail-table" class="table" style="display:none">
<tr id="active-user-row0" class="user-first-row">
<td><input class="form-control" type="text" id="user-name0"></td>
<td><input class="form-control" type="text" id="last-name0"></td>
<td><input class="form-control" type="text" id="email0"></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
function addUserRow() {
var counter = 1;
var tableRow = $("#user-detail-table").find(".user-first-row").clone();
tableRow.addClass("user-first-row"+counter);
tableRow.attr("id", "active-user-row"+counter);
var userName = tableRow.find("#user-name0");
userName.attr("id", "user-name"+counter);
var lastName = tableRow.find("#last-name0");
lastName.attr("id", "last-name"+counter);
var email = tableRow.find("#email0");
email.attr("id", "email"+counter);
var mainTable = $("#student-table");
mainTable.append(tableRow);
}
</script>
</head>
<body>
<div class="container">
<h2>Student Table</h2>
<p>Add Dynamic Row in table</p>
<table class="table" id="student-table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<input type="button" class="btn" name="btn" value="Add Row" onClick="addUserRow()">
</div>
<table id="user-detail-table" class="table" style="display:none">
<tr id="active-user-row0" class="user-first-row">
<td><input class="form-control" type="text" id="user-name0"></td>
<td><input class="form-control" type="text" id="last-name0"></td>
<td><input class="form-control" type="text" id="email0"></td>
</tr>
</table>
</body>
</html>
No comments:
Post a Comment