<div class="page-content page-container" id="page-content">
<div class="padding">
<div class="row container d-flex justify-content-center">
<div class="col-lg-8 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title text-center">Add and remove row in table using jquery</h4>
<hr>
<div class="table-responsive">
<table id="faqs" class="table table-hover">
<thead>
<tr>
<th>User</th>
<th>Product</th>
<th>Sale</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control" placeholder="User name"></td>
<td><input type="text" placeholder="Product name" class="form-control"></td>
<td class="text-warning mt-10"> 18.76% <i class="fa fa-arrow-up"></i></td>
<td class="mt-10"><button class="badge badge-danger"><i class="fa fa-trash"></i> Delete</button></td>
</tr>
</tbody>
</table>
</div>
<div class="text-center"><button onclick="addfaqs();" class="badge badge-success"><i class="fa fa-plus"></i> ADD NEW</button></div>
</div>
</div>
</div>
</div>
</div>
</div>
body {
background-color: #f9f9fa
}
.flex {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto
}
@media (max-width:991.98px) {
.padding {
padding: 1.5rem
}
}
@media (max-width:767.98px) {
.padding {
padding: 1rem
}
}
.padding {
padding: 5rem
}
.card {
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none
}
.pl-3,
.px-3 {
padding-left: 1rem !important
}
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid #d2d2dc;
border-radius: 0
}
.card .card-title {
color: #000000;
margin-bottom: 0.625rem;
font-size: 0.875rem;
font-weight: 500
}
.card .card-description {
margin-bottom: .875rem;
font-weight: 400;
color: #76838f
}
p {
font-size: 0.875rem;
margin-bottom: .5rem;
line-height: 1.5rem
}
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar
}
.table,
.jsgrid .jsgrid-table {
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
background-color: transparent
}
.table thead th,
.jsgrid .jsgrid-table thead th {
border-top: 0;
border-bottom-width: 1px;
font-weight: 500;
font-size: .875rem;
text-transform: uppercase
}
.table td,
.jsgrid .jsgrid-table td {
font-size: 0.875rem;
padding: .475rem 0.4375rem
}
.mt-10 {
padding: 0.875rem 0.3375rem !important
}
button {
outline: 0 !important
}
.form-control:focus {
box-shadow: 0 0 0 0rem rgba(0, 123, 255, .25) !important
}
.badge {
border-radius: 0;
font-size: 12px;
line-height: 1;
padding: .375rem .5625rem;
font-weight: normal;
border: none
}
var faqs_row = 0;
function addfaqs() {
html = '';
html += '';
html += '';
html += ' 18.76% ';
html += ' Delete';
html += '';
$('#faqs tbody').append(html);
faqs_row++;
}