<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to add or remove rows in a table dynamically jQuery </title>
<link href="css/bootstrap-4.0.0.css" rel="stylesheet" type="text/css">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script>
/*find varial in textbox*/
function myFunction(){
var test_code = $('#tests').find(':selected').data('testcode');
var test_name = $('#tests').find(':selected').data('testname');
var generalprice = $('#tests').find(':selected').data('generalprice');
var totalprice = $('#tests').find(':selected').data('totalprice');
$('#test_code').val(test_code);
$('#test_name').val(test_name);
$('#generalprice').val(generalprice );
$('#totalprice').val(totalprice);
}
</script>
</head>
<body>
<form>
<input name="patid" type="text" id="patid" placeholder="patid" value="">
<select name="name" ID="tests" onchange="myFunction()" class="form-control">
<option value="Select">Select</option>
<?php
include("database.php");
$qu="SELECT DISTINCT test_name,test_name_code,test_name,general_test_price, general_Total_Amount from test_name_setup ";
$res=$conn->query($qu);
while($r=mysqli_fetch_row($res))
{
echo "<option data-testcode='$r[1]' data-testname='$r[2]' data-generalprice='$r[3]' data-totalprice='$r[4]' value='$r[0]'> $r[0] </option>";
}
?>
</select>
<div class="container" id="multiple">
<input name="test_code" type="text" id="test_code" placeholder="test code" value="">
<input name="test_name" type="text" id="test_name" placeholder="test Name" value="">
<input class="qtol1" name="generalprice" type="Number" id="generalprice" placeholder="general price">
<input class="qtol2" name="quantity" type="Number" id="quantity" value="1" onClick="calc()" placeholder="quantity">
<input class="qtol3" name="totalprices" type="Number" id="totalprices" placeholder="total prices">
<input class="qtol" name="totalprice" type="text" id="totalprice" placeholder="total price">
<input name="send" type="button" id="butsend" class="add-row" value="Add Row">
<input name="send" type="reset" id="butsend" class="add-row" value="Rest Row">
</div>
<input name="save" type="button" class="btn btn-primary" value="Save to database" id="butsave">
</div>
<table id="table1" name="table1" class="table table-bordered">
<tbody>
<tr>
<th>Serial no.</th>
<th>ID</th>
<th>Test code</th>
<th>Test name</th>
<th>General price</th>
<th>Quantity</th>
<th>Total prices</th>
<th>Total price</th>
<th>Action</th>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Total Amount:</td>
<td ><input id="subtotal" name="subtotal" type="Number"></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
</form>
</div>
<script>
$(document).ready(function() {
var id = 1;
var generalprice = 0;
var quantity = 0;
var totalprice =0;
var totalprices =0;
/*Assigning id and class for tr and td tags for separation add in column.*/
$("#butsend").click(function() {
var newid = id++;
$("#table1").append('<tr valign="top" id="'+newid+'">\n\
<td width="100px" >' + newid + '</td>\n\
<td width="100px" class="patid'+newid+'">' + $("#patid").val() + '</td>\n\
<td width="100px" class="test_code'+newid+'">' + $("#test_code").val() + '</td>\n\
<td width="100px" class="test_name'+newid+'">' + $("#test_name").val() + '</td>\n\
<td width="100px" id="generalprice" class="generalprice'+newid+'">' + $("#generalprice").val() + '</td>\n\
<td width="100px" id=quantity class="quantity'+newid+'">' + $("#quantity").val() + '</td>\n\
<td width="100px" id="qntytolprices" class="totalprices'+newid+'">' + $("#totalprices").val() + '</td>\n\
<td width="100px" id="qntytolprice" class="totalprice'+newid+'">' + $("#totalprice").val() + '</td>\n\
<td width="100px"><a href="javascript:void(0);" class="remCF">Remove</a></td>\n\ </tr>');
});
$("#table1").on('click', '.remCF', function() {
$(this).parent().parent().remove();
$('#table1 tbody tr').each(function(id){
$($(this).find('td')[0]).html(id++);
});
$.each(data,function(i,value){
};
});
/*creating new click event for save button*/
$("#butsave").click(function() {
var lastRowId = $('#table1 tr:last').attr("id"); /*finds id of the last row inside table*/
var test_code = new Array();
var test_name = new Array();
var generalprice = new Array();
var quantity = new Array();
var totalprice = new Array();
var totalprices = new Array();
var patid = new Array();
for ( var i = 1; i <= lastRowId; i++) {
patid.push($("#"+i+" .patid"+i).html()); /*pushing all the test_code listed in the table*/
test_code.push($("#"+i+" .test_code"+i).html()); /*pushing all the test_code listed in the table*/
test_name.push($("#"+i+" .test_name"+i).html()); /*pushing all the test_name listed in the table*/
generalprice.push($("#"+i+" .generalprice"+i).html()); /*pushing all the gprice listed in the table*/
quantity.push($("#"+i+" .quantity"+i).html()); /*pushing all the quantity listed in the table*/
totalprices.push($("#"+i+" .totalprices"+i).html()); /*pushing all the tprice listed in the table*/
totalprice.push($("#"+i+" .totalprice"+i).html()); /*pushing all the tprice listed in the table*/
}
var sendtest_code = JSON.stringify(test_code);
var sendtest_name = JSON.stringify(test_name);
var sendgeneralprice = JSON.stringify(generalprice);
var sendquantity = JSON.stringify(quantity);
var sendtotalprices = JSON.stringify(totalprices);
var sendtotalprice = JSON.stringify(totalprice);
var sendpatid = JSON.stringify(patid);
$.ajax({
url: "rough9process.php",
type: "post",
data: {patid : sendpatid , test_code : sendtest_code , test_name : sendtest_name , generalprice : sendgeneralprice, quantity: sendquantity , totalprices : sendtotalprices ,totalprice : sendtotalprice},
success : function(data){
alert(data); /* alerts the response from php.*/
}
});
});
});
</script>
<script>
$(".qtol2,.qtol1").keyup(function() {
$('.qtol3').val($('.qtol1').val() * $('.qtol2').val());
});
</script>
<script>
/*get sum in col*/
$(document).ready(function(){
var TotalValue = 0;
$("#table1 tr").each(function(){
TotalValue += parseFloat($(this).find('.totalprices').text());
});
});
</script>
<script>
$(document).ready(function() {
$('table thead th').each(function(i) {
calculateColumn(i);
});
});
function calculateColumn(index) {
var total = 0;
$('table tr').each(function() {
var value = parseInt($('td', this).eq(index).text());
if (!isNaN(value)) {
total += value;
}
});
$('table tfoot td').eq(index).text('Total:' + total);
}
</script>
</body>
</html>