I am trying to add a row to the table when the add button is clicked and add and delete both buttons are working properly but when i add data-toggle="table" in the table tag the add and delete buttons are not working if i remove the data-toggle option i am losing features such as pagination and table styling
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.css">
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#500&display=swap" rel="stylesheet">
</head>
<body>
<table id="myTable" class="table"
data-toggle="table"
data-mobile-responsive="true"
data-pagination="true"
data-height="460"
>
<thead>
<tr>
<th>Product</th>
<th>QTY</th>
<th>Price</th>
<th>Total</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td >
<select id="ex1" required >
<option value="">Iphone</option>
<option value="">IPod</option>
<option value="">Galaxy Tab</option>
<option value="">PocoPhone</option>
</select>
</td>
<td >
<input id="ex2" type="number">
</td>
<td >
<input id="ex3" type="number">
</td>
<td >
<input id="ex4" type="number">
</td>
<td >
<button class="btn btn-outline-success" id="addrow" class="addnew" > Add </button>
</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<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');
$('#addrow').click(function(){
//Add row
table.append('<tr><td > <select id="ex1" required > <option value="">Iphone</option><option value="">IPod</option><option value="">Galaxy Tab</option> <option value="">PocoPhone</option> </select> </td> <td > <input id="ex2" type="number"> </td> <td ><input id="ex3" type="number"> </td> <td > <input id="ex4" type="number"> </td> <td > <button class="btnDelete btn-outline-success" id="delrow" >Delete</button> </td> </tr> ');
})
$("#myTable").on('click', '.btnDelete', function () {
$(this).closest('tr').remove();
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/extensions/mobile/bootstrap-table-mobile.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
</body>
</html>
The order is wrong. Add the JS library before your script...
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.css">
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#500&display=swap" rel="stylesheet">
</head>
<body>
<table id="myTable" class="table" data-toggle="table" data-mobile-responsive="true" data-pagination="true" data-height="460">
<thead>
<tr>
<th>Product</th>
<th>QTY</th>
<th>Price</th>
<th>Total</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select id="ex1" required>
<option value="">Iphone</option>
<option value="">IPod</option>
<option value="">Galaxy Tab</option>
<option value="">PocoPhone</option>
</select>
</td>
<td>
<input id="ex2" type="number">
</td>
<td>
<input id="ex3" type="number">
</td>
<td>
<input id="ex4" type="number">
</td>
<td>
<button class="btn btn-outline-success" id="addrow" class="addnew"> Add </button>
</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/extensions/mobile/bootstrap-table-mobile.min.js"></script>
<!-- Unrelated: version incompatibility
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
-->
<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');
$('#addrow').click(function() {
//Add row
table.append('<tr><td > <select id="ex1" required > <option value="">Iphone</option><option value="">IPod</option><option value="">Galaxy Tab</option> <option value="">PocoPhone</option> </select> </td> <td > <input id="ex2" type="number"> </td> <td ><input id="ex3" type="number"> </td> <td > <input id="ex4" type="number"> </td> <td > <button class="btnDelete btn-outline-success" id="delrow" >Delete</button> </td> </tr> ');
})
$("#myTable").on('click', '.btnDelete', function() {
$(this).closest('tr').remove();
});
});
</script>
</body>
Related
I had to align the rows' tds's input field to top, because some may have up to 3 rows, but the total and the checkbox at the end of the row are also aligned to the top. I've tried doing some padding so that these 2 stay vertically aligned to the middle, but without success...
.total_price,
.total_terms {
text-align: right;
font-weight: bold;
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.3/font/bootstrap-icons.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js" integrity="sha256-c9vxcXyAG4paArQG3xk6DjyW/9aHxai2ef9RpMWO44A=" crossorigin="anonymous"></script>
</head>
<table class="table table-hover table-vcenter" id="dtable">
<thead>
<tr>
<th style="width:4%">Yards</th>
<th style="width:9%">Total FOB</th>
<th style="width:3%">Sel.</th>
</tr>
</thead>
<tbody id="tableRows">
<tr>
<td><input type="number" min="0" class="qty" name="numberInputs" value="" onchange="add_to_total(this, getPoOrigin()); deposit(getDeposit(), getPoOrigin())"></td>
<td class="total_price"><strong>$0.00</strong></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="number" min="0" class="qty" name="numberInputs" value="" onchange="add_to_total(this, getPoOrigin()); deposit(getDeposit(), getPoOrigin())"></td>
<td class="total_price"><strong>$0.00</strong></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
<tbody>
</tbody>
</table>
</html>
You can use vertical-align: middle !important; to force that style.
.total_price,
.total_terms {
font-weight: bold;
vertical-align: middle !important;
}
.total_price {
text-align: right;
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.3/font/bootstrap-icons.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js" integrity="sha256-c9vxcXyAG4paArQG3xk6DjyW/9aHxai2ef9RpMWO44A=" crossorigin="anonymous"></script>
</head>
<table class="table table-hover table-vcenter" id="dtable">
<thead>
<tr>
<th style="width:4%">Yards</th>
<th style="width:9%">Total FOB</th>
<th style="width:3%">Sel.</th>
</tr>
</thead>
<tbody id="tableRows">
<tr>
<td><input type="number" min="0" class="qty" name="numberInputs" value="" onchange="add_to_total(this, getPoOrigin()); deposit(getDeposit(), getPoOrigin())"></td>
<td class="total_price"><strong>$0.00</strong></td>
<td class="total_terms"><input type="checkbox"></td>
</tr>
<tr>
<td><input type="number" min="0" class="qty" name="numberInputs" value="" onchange="add_to_total(this, getPoOrigin()); deposit(getDeposit(), getPoOrigin())"></td>
<td class="total_price"><strong>$0.00</strong></td>
<td class="total_terms"><input type="checkbox"></td>
</tr>
</tbody>
<tbody>
</tbody>
</table>
</html>
This Codepen works, but I'm not sure this is the same table type.
This is the Fiddle.
#buyer {
border-collapse: separate;
border-spacing: 0 0px;
}
tr {
background: pink; /* added by community */
}
<head>
<base target="_top">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.3/font/bootstrap-icons.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
<div id="buyerTable" class="table-bordered">
<table class="table table-borderless" id="buyer">
<thead style="white-space: nowrap">
<tr>
<th class="text-center">Comprador</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select id="selectBuyer" name="select" required="required" class="custom-select" onchange="loadAddress('buyer', this)">
<option value=""></option>
</select>
</td>
</tr>
<tr>
<td class="address">Contact Name<br>Calle 4567 A Sur #456741 - <br>Tiangua - Samambaia - Sabão<br>75 45465678395</td>
</tr>
</tbody>
</table>
</div>
Appreciate any help!
There is default padding: .75rem; on td (not tr) from the Bootstrap.
You can eliminate the spacing by using the p-0 which specifies padding: 0;.
#buyer {
border-collapse: separate;
border-spacing: 0 0px;
}
tr {
background: pink;
/* added by community */
}
<head>
<base target="_top">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.3/font/bootstrap-icons.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
<div id="buyerTable" class="table-bordered">
<table class="table table-borderless mb-0" id="buyer">
<thead style="white-space: nowrap">
<tr>
<th class="text-center">Comprador</th>
</tr>
</thead>
<tbody>
<tr>
<td class="p-0">
<select id="selectBuyer" name="select" required="required" class="custom-select" onchange="loadAddress('buyer', this)">
<option value=""></option>
</select>
</td>
</tr>
<tr>
<td class="address p-0">Contact Name<br>Calle 4567 A Sur #456741 - <br>Tiangua - Samambaia - Sabão<br>75 45465678395</td>
</tr>
</tbody>
</table>
</div>
function autoCalcSetup(){
$('form[name=transactions]').jAutoCalc('destroy');
$('form[name=transactions] tr[name=services]').jAutoCalc({keyEventsFire: true, decimalPlaces: 2, emptyAsZero: true});
$('form[name=transactions]').jAutoCalc({decimalPlaces: 2});
}
autoCalcSetup();
$('button[name=remove]').click(function(e){
e.preventDefault();
var form = $(this).parents('form')
$(this).parents('tr').remove();
autoCalcSetup();
});
$('button[name=add]').click(function(e){
e.preventDefault();
var $table = $(this).parents('table');
var $top = $table.find('tr[name=services]').first();
var $new = $top.clone(true);
$new.jAutoCalc('destroy');
$new.insertBefore($top);
$new.find('input[type=text]').val('');
autoCalcSetup();
});
<!DOCTYPE html>
<html lang="en">
<!-- blank.html 21 Nov 2019 03:54:41 GMT -->
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>I-MED HEALTHCARE</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="assets/css/app.min.css">
<link rel="stylesheet" href="assets/bundles/bootstrap-daterangepicker/daterangepicker.css">
<link rel="stylesheet" href="assets/bundles/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css">
<link rel="stylesheet" href="assets/bundles/select2/dist/css/select2.min.css">
<link rel="stylesheet" href="assets/bundles/jquery-selectric/selectric.css">
<link rel="stylesheet" href="assets/bundles/bootstrap-timepicker/css/bootstrap-timepicker.min.css">
<link rel="stylesheet" href="assets/bundles/datatables/datatables.min.css">
<link rel="stylesheet" href="assets/bundles/datatables/DataTables-1.10.16/css/dataTables.bootstrap4.min.css">
<script src="https://cdn.jsdelivr.net/npm/jautocalc#1.3.1/dist/jautocalc.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Template CSS -->
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/components.css">
<!-- Custom style CSS -->
<link rel="stylesheet" href="assets/css/custom.css">
<link rel='shortcut icon' type='image/x-icon' href='assets/img/imed.png' />
</head>
<body>
<div class="loader"></div>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<!-- top bar -->
<?php require_once("include/topbar.php"); ?>
<!-- top bar -->
<!-- side bar -->
<?php require_once("include/sidebar.php"); ?>
<!-- side bar -->
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-body">
<!-- add content here -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3>Patient Transactions</h3>
</div>
<div class="card-body">
<div class="form-group">
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target=".bd-example-modal-xl">Find Patient</button>
</div>
<div class="container">
<form name="transactions">
<table class="table table-hover table-bordered table-striped" name="transactions">
<thead>
<tr>
<th></th>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
<th>Item Total</th>
</tr>
</thead>
<tbody>
<tr name="services">
<td><button class="btn btn-primary" name="remove">Remove</button></td>
<td>Stuff</td>
<td><input type="text" class="form-control" name="qty" value="3"></td>
<td><input type="text" class="form-control" name="price" value="12"></td>
<td><input type="text" style="text-align:right" class="form-control" name="item_total" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr>
<td colspan="2"> </td>
<td>Subtotal</td>
<td> </td>
<td><input type="text" style="text-align:right" class="form-control" name="subtotal" jAutoCalc="SUM({item_total})"></td>
</tr>
<tr>
<td colspan="2"></td>
<td>Tax</td>
<td>
<select class="form-control" name="tax">
<option value=".06">CT Tax</option>
<option value=".00">Tax Free</option>
</select>
</td>
<td><input type="text" style="text-align:right" class="form-control" name="tax_total" jAutoCalc="{subtotal} * {tax}"></td>
</tr>
<tr>
<td colspan="2"></td>
<td>Total</td>
<td> </td>
<td><input type="text" style="text-align:right" class="form-control" name="grand_total" jAutoCalc="{subtotal} + {tax_total}"></td>
</tr>
<tr>
<td colspan="4"></td>
<td><button class="btn btn-primary" name="add">Add Row</button></td>
</tr>
</tbody>
</table>
</form>
</div>
<div class="text-right">
<button type="submit" class="btn btn-primary btn-icon icon-right" name="save"><i class="fas fa-file-invoice"></i> Process Payment</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<!-- End of Main Content -->
<!-- FIND PATIENT TABLE MODAL -->
<div class="modal fade bd-example-modal-xl" id="select-patient"tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myLargeModalLabel">Find Patient</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="section-body">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4> </h4>
</div>
<div class="card-body">
<div class="table-responsive">
<?php
require_once("include/connect.php");
try{
$sql="SELECT patient_id, CONCAT(patient_lname, ', ', patient_fname, ' ', patient_mi) AS Fullname, top, pay_method FROM tbl_patientinfo WHERE isDeleted='0'";
$result=$con->prepare($sql);
$result->execute();
?>
<table class="table table-hover" id="table-1">
<thead>
<tr>
<th class="text-center">
#
</th>
<th>Patient Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<?php while($row=$result->fetch()){ ?>
<tr style="cursor: pointer;">
<td><?php echo $row['patient_id']; ?></td>
<td><?php echo $row['Fullname']; ?></td>
<td><?php echo $row['top']; ?></td>
<td><?php echo $row['pay_method']; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
<?php
} catch (PDOException $th){
echo "Error: ".$th->getMessage();
}
$con=null;
?>
<script>
var table = document.getElementById('table-1');
for(var i = 1; i < table.rows.length; i++)
{
table.rows[i].onclick = function()
{
//rIndex = this.rowIndex;
document.getElementById("txt-patient_id").value = this.cells[0].innerHTML;
document.getElementById("txt-patient_name").value = this.cells[1].innerHTML;
document.getElementById("txt-payMethod").value = this.cells[3].innerHTML;
$('#select-patient').modal('hide');
};
}
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End of FIND PATIENT TABLE MODAL -->
<!-- setting bar -->
<?php require_once("include/settingbar.php"); ?>
<!-- setting bar -->
<!-- footer bar -->
<?php require_once("include/footer.php"); ?>
<!-- footer bar -->
<script type="text/javascript" src="assets/bundles/CRUD/transaction.js"></script>
<!-- General JS Scripts -->
<script src="assets/js/app.min.js"></script>
<script src="assets/bundles/datatables/datatables.min.js"></script>
<script src="assets/bundles/datatables/DataTables-1.10.16/js/dataTables.bootstrap4.min.js"></script>
<!-- JS Libraies -->
<script src="assets/bundles/cleave-js/dist/cleave.min.js"></script>
<script src="assets/bundles/cleave-js/dist/addons/cleave-phone.us.js"></script>
<script src="assets/bundles/jquery-pwstrength/jquery.pwstrength.min.js"></script>
<script src="assets/bundles/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="assets/bundles/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
<script src="assets/bundles/bootstrap-timepicker/js/bootstrap-timepicker.min.js"></script>
<script src="assets/bundles/select2/dist/js/select2.full.min.js"></script>
<script src="assets/bundles/jquery-selectric/jquery.selectric.min.js"></script>
<script src="assets/bundles/sweetalert/sweetalert.min.js"></script>
<!-- Page Specific JS File -->
<script src="assets/js/page/forms-advanced-forms.js"></script>
<script src="assets/js/page/sweetalert.js"></script>
<script src="assets/js/page/datatables.js"></script>
<!-- Template JS File -->
<script src="assets/js/scripts.js"></script>
<!-- Custom JS File -->
<script src="assets/js/custom.js"></script>
<script src="assets/js/page/sweetalert.js"></script>
</body>
<!-- blank.html 21 Nov 2019 03:54:41 GMT -->
</html>
I have a problem in adding and removing rows. When I type numbers to calculate it using jAutoCalc library, it's working. So I don't have any problem with that. But when I want to add some rows and removing some rows, it shows nothing. And I don't see anything error in my program. But according to Inspects in my Browser (I'm using Microsoft Edge), I have an error in "$new.jAutoCalc('destroy'); " and it says that "$new.jAutoCalc" is not a function.
I use this following codes:
function autoCalcSetup() {
$('form[name=transactions]').jAutoCalc('destroy');
$('form[name=transactions] tr[name=services]').jAutoCalc({
keyEventsFire: true,
decimalPlaces: 2,
emptyAsZero: true
});
$('form[name=transactions]').jAutoCalc({
decimalPlaces: 2
});
}
autoCalcSetup();
$('button[name=remove]').click(function(e) {
e.preventDefault();
var form = $(this).parents('form')
$(this).parents('tr').remove();
autoCalcSetup();
});
$('button[name=add]').click(function(e) {
e.preventDefault();
var $table = $(this).parents('table');
var $top = $table.find('tr[name=services]').first();
var $new = $top.clone(true);
$new.jAutoCalc('destroy'); //this is my error (According to Inspects in Browser)
$new.insertBefore($top);
$new.find('input[type=text]').val('');
autoCalcSetup();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<form name="transactions">
<table class="table table-hover table-bordered table-striped" name="transactions">
<thead>
<tr>
<th></th>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
<th>Item Total</th>
</tr>
</thead>
<tbody>
<tr name="services">
<td><button class="btn btn-primary" name="remove">Remove</button></td>
<td>Stuff</td>
<td><input type="text" class="form-control" name="qty" value="3"></td>
<td><input type="text" class="form-control" name="price" value="12"></td>
<td><input type="text" class="form-control" name="item_total" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr>
<td colspan="2"> </td>
<td>Subtotal</td>
<td> </td>
<td><input type="text" class="form-control" name="subtotal" jAutoCalc="SUM({item_total})"></td>
</tr>
<tr>
<td colspan="2"></td>
<td>Tax</td>
<td>
<select class="form-control" name="tax">
<option value=".06">CT Tax</option>
<option value=".00">Tax Free</option>
</select>
</td>
<td><input type="text" class="form-control" name="tax_total" jAutoCalc="{subtotal} * {tax}"></td>
</tr>
<tr>
<td colspan="2"></td>
<td>Total</td>
<td> </td>
<td><input type="text" class="form-control" name="grand_total" jAutoCalc="{subtotal} + {tax_total}"></td>
</tr>
<tr>
<td colspan="4"></td>
<td><button class="btn btn-primary" name="add">Add Row</button></td>
</tr>
</tbody>
</table>
</form>
</div>
I hope you can help me with this problem. If you have any question please don't hesitate to comment down below, and I will try my best to answer it just to solve my problem here. I need to do this for our Capstone Project. Thank so much! God bless you! :D
I have created a table which include a "+" font awesome icon.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<table class="table table-bordered w-auto">
<thead>
<tr>
<th>Column_1</th>
<th>Column_2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="form-group" style="position: relative">
<input type="Column_1" class="form-control" id="clmn1" placeholder="Enter the name">
<div class="justify-content-center" style="position: absolute; width: 100%; left: 50%;">
<a class="fa fa-plus-circle" href="#"></a>
</div>
</td>
</tr>
</tbody>
</table>
Now how to add a new row by clicking on the "+" icon?
You can't add another row without using javascript or Jquery. here is a solution:-
function addrow(){
var row = "<tr><td class='form-group' style='position: relative'><input type='Column_1' class='form-control' id='clmn1' placeholder='Enter the name'><div class='justify-content-center' style='position: absolute; width: 100%; left: 50%;'></div></td></tr>";
document.getElementById("myList").insertAdjacentHTML('beforeend', row);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
</head>
<body>
<table class="table table-bordered w-auto">
<thead>
<tr>
<th>Column_1</th>
<th>Column_2</th>
</tr>
</thead>
<tbody id="myList">
<tr >
<td class="form-group" style="position: relative">
<input type="Column_1" class="form-control" id="clmn1" placeholder="Enter the name">
</td>
</tr>
</tbody>
<tfoot> <tr><td><a onclick="addrow()" class="fa fa-plus-circle" href="#"></a></tfoot></td></tr>
</table>
</body>
</html>
Can someone explains how is that possible that an inputof type "submit" is placed at the top-left although it's inside the third <tr>
I can change its position to the right place through margin and position properties, but there should be no need for them at all in this case.
see the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<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>
</head>
<body>
<div class="container">
<div style="border:2px solid black;margin-top:10%;">
<div class="row">
<table style="margin-left:10%;width:85%;" class="table table-hover">
<thead>
<tr>
<th>album name</th>
<th>Number of images</th>
<th>Order</th>
</tr>
</thead>
<tr>
<td>
<input placeholder="album's name" name="album_name">
</td>
<td>
<input placeholder="#of images eg.8" id="no_of_images" name="NoOfImages">
</td>
<td>
<input placeholder="order between other albums eg. 1" name="album_order">
</td>
</tr>
<tr>
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</tr>
</table>
<table style="margin-top:10%;" id="images_table" class="table table-hover">
</table>
</div>
</div>
</div>
</body>
</html>
Insert td like this:
<td> <---------------
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</td> <--------------
<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>
<div class="container">
<div style="border:2px solid black;margin-top:10%;">
<div class="row">
<table style="margin-left:10%;width:85%;" class="table table-hover">
<thead>
<tr>
<th>album name</th>
<th>Number of images</th>
<th>Order</th>
</tr>
</thead>
<tr>
<td>
<input placeholder="album's name" name="album_name">
</td>
<td>
<input placeholder="#of images eg.8" id="no_of_images" name="NoOfImages">
</td>
<td>
<input placeholder="order between other albums eg. 1" name="album_order">
</td>
</tr>
<tr>
<td>
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</td>
</tr>
</table>
<table style="margin-top:10%;" id="images_table" class="table table-hover">
</table>
</div>
</div>
</div>
you forgot to add td in your tr section, and because your third tr has only one td, you must set colspan to 3 as it's property...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<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>
</head>
<body>
<div class="container">
<div style="border:2px solid black;margin-top:10%;">
<div class="row">
<table style="margin-left:10%;width:85%;" class="table table-hover">
<thead>
<tr>
<th>album name</th>
<th>Number of images</th>
<th>Order</th>
</tr>
</thead>
<tr>
<td>
<input placeholder="album's name" name="album_name">
</td>
<td>
<input placeholder="#of images eg.8" id="no_of_images" name="NoOfImages">
</td>
<td>
<input placeholder="order between other albums eg. 1" name="album_order">
</td>
</tr>
<tr>
<td colspan="3">
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</td>
</tr>
</table>
<table style="margin-top:10%;" id="images_table" class="table table-hover">
</table>
</div>
</div>
</div>
</body>
</html>