I am working on a simple web application that:
Adds table rows to a BS HTML website.
Has a function that adds the current time to a table cell with an onclick event.
Right now I'm having trouble finding some examples, I am able to execute the onclick event when linking a button to a text area, but how can I achieve this with a table cell?
Many thanks!
<script type='text/javascript'>
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" class="form-control" name="item' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="surgeonRequest' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="scrubCallout' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="implantUsed' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="implantRemoved' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="nurseRecord' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
counter -= 1
});
});
function calculateRow(row) {
var price = +row.find('input[name^="price"]').val();
}
function calculateGrandTotal() {
var grandTotal = 0;
$("table.order-list").find('input[name^="price"]').each(function () {
grandTotal += +$(this).val();
});
$("#grandtotal").text(grandTotal.toFixed(2));
}
//Timestamp Javascript
function getTimeStamp() {
var now = new Date();
return ((now.getMonth() + 1) + '/' + (now.getDate()) + '/' + now.getFullYear() + " " + now.getHours() + ':'
+ ((now.getMinutes() < 10) ? ("0" + now.getMinutes()) : (now.getMinutes())) + ':' + ((now.getSeconds() < 10) ? ("0" + now
.getSeconds()) : (now.getSeconds())));
}
window.onclick = "getTimeStamp" ;
</script>
<!-- BEGIN HTML -->
<!-- Tables -->
<div class="fluid-container">
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td><center><b>Item</b></center></td>
<td><center><b>Surgeon Request</b></center></td>
<td><center><b>Scrub Callout</b></center></td>
<td><center><b>Implant Used</b></center></td>
<td><center><b>Implant Removed</b></center></td>
<td><center><b>EHR Record</b></center></td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-2">
<input type="text" name="name" class="form-control" onclick="this.name.value=getTimeStamp()/>
</td>
<td class="col-sm-2">
<input type="text" name="surgeonRequest" class="form-control"/>
</td>
<td class="col-sm-2">
<input type="text" name="scrubCallout" class="form-control"/>
</td>
<td class="col-sm-2">
<input type="text" name="implantUsed" class="form-control"/>
</td>
<td class="col-sm-2">
<input type="text" name="implantRemoved" class="form-control"/>
</td>
<td class="col-sm-2">
<input type="text" name="nurseRecord" class="form-control"/>
</td>
<td class="col-sm-2"><a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="7" style="text-align: left;">
<center>
<input type="button" class="btn btn-lg btn-lg " id="addrow" value="Add Row" />
</center>
</td>
<tr>
</tr>
</tfoot>
</table>
</div>
First of all, there's a typo in your code above at onclick line where it doesn't close the ". Anyway, here's the complete modified code, please check and see if it solves your problem.
Note that I have modified both html and javascript part
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" class="form-control" name="item' + counter + '" onClick="this.value=getTimeStamp()" /></td>';
cols += '<td><input type="text" class="form-control" name="surgeonRequest' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="scrubCallout' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="implantUsed' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="implantRemoved' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="nurseRecord' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
counter -= 1
});
});
function calculateRow(row) {
var price = +row.find('input[name^="price"]').val();
}
function calculateGrandTotal() {
var grandTotal = 0;
$("table.order-list").find('input[name^="price"]').each(function () {
grandTotal += +$(this).val();
});
$("#grandtotal").text(grandTotal.toFixed(2));
}
//Timestamp Javascript
window.getbla = function(){
alert("hi");
return "bla";
};
window.getTimeStamp = function() {
var now = new Date();
return ((now.getMonth() + 1) + '/' + (now.getDate()) + '/' + now.getFullYear() + " " + now.getHours() + ':'
+ ((now.getMinutes() < 10) ? ("0" + now.getMinutes()) : (now.getMinutes())) + ':' + ((now.getSeconds() < 10) ? ("0" + now
.getSeconds()) : (now.getSeconds())));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- BEGIN HTML -->
<!-- Tables -->
<div class="fluid-container">
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td><center><b>Item</b></center></td>
<td><center><b>Surgeon Request</b></center></td>
<td><center><b>Scrub Callout</b></center></td>
<td><center><b>Implant Used</b></center></td>
<td><center><b>Implant Removed</b></center></td>
<td><center><b>EHR Record</b></center></td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-2">
<input type="text" name="name" class="form-control" onClick="this.value=getTimeStamp()">
</td>
<td class="col-sm-2">
<input type="text" name="surgeonRequest" class="form-control"/>
</td>
<td class="col-sm-2">
<input type="text" name="scrubCallout" class="form-control"/>
</td>
<td class="col-sm-2">
<input type="text" name="implantUsed" class="form-control"/>
</td>
<td class="col-sm-2">
<input type="text" name="implantRemoved" class="form-control"/>
</td>
<td class="col-sm-2">
<input type="text" name="nurseRecord" class="form-control"/>
</td>
<td class="col-sm-2"><a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="7" style="text-align: left;">
<center>
<input type="button" class="btn btn-lg btn-lg " id="addrow" value="Add Row" />
</center>
</td>
<tr>
</tr>
</tfoot>
</table>
</div>
jsfiddle: https://jsfiddle.net/3he1962o/15/
I hope it helps.
Related
I'm working with a checkbox which will disable amount textfield in the incoming added rows if the checkbox is unchecked and will enable the lot_price textfield if check.
IF(checkbox is checked) = Enable lot_price field and disable the incoming amount rows
IF(checkbox is unchecked) = Disable lot_price field and enable the incoming amount rows
Here is the current code
function disable() {
var elements = document.getElementsByClassName("amount");
document.getElementById("state").checked ? doIt(elements, true) : doIt(elements, false);
}
function doIt(elements, status) {
for (var i = 0; i < elements.length; i++) {
elements[i].disabled = status;
}
}
var rowCount = $('#table_body tr').length;
var m;
var month_label;
var check = document.getElementById("state");
if (check.checked) {
} else {
}
$(document).ready(function() {
$("#add_row").click(function(e) {
$('tr').find('input').prop('enabled', true)
$('#addr' + rowCount).html('<td><input type="text" id="item_no" name="item_no[' + rowCount + ']" placeholder="" class="form-control" autocomplete="off"></td>' +
'<td><input type="text" id="stock_no" name="stock_no[' + rowCount + ']" placeholder="Stock No" class="form-control" autocomplete="off"></td>' +
'<td><input type="text" id="unit" name="unit[' + rowCount + ']" placeholder="Unit" class="form-control" autocomplete="off"></td>' +
'<td><textarea name="description[' + rowCount + ']" id="description" rows="1" placeholder="Description" class="form-control" required></textarea></td>' +
'<td><input type="text" id="quantity' + rowCount + '" name="quantity[' + rowCount + ']" placeholder="Quantity" class="form-control" onkeypress="return isNumberKeyQTY(event)" autocomplete="off">' +
'<td><input type="text" id="unit_cost' + rowCount + '" name="unit_cost[' + rowCount + ']" placeholder="Unit Cost" class="form-control" onkeypress="return isNumberKeyUCOST(event)" autocomplete="off"></td>' +
'<td><input type="text" id="amount' + rowCount + '" name="amount[' + rowCount + ']" placeholder="Amount" class="form-control amount" required></td>'
);
$('#tab_logic').append('<tr id="addr' + (rowCount + 1) + '"></tr>');
rowCount++;
});
});
//This will Remove the row
//before the last row then
//changes the id of the last
//row which is hidden
$('#remove_row').click(function() {
var row_count_minus_btn = $('#table_body tr').length - 1
if ($('#table_body tr').length != 2) {
$("#table_body tr:nth-last-child(2)").remove();
$('#table_body tr:last-child').attr('id', 'addr' + row_count_minus_btn);
rowCount--;
} else {
swal("Oops...", "Cannot Delete First Row!", "warning");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="state" id="state" onclick="disable()">Check
<input type="text" id="lot_price" name="lot_price" placeholder="" class="form-control" value="" />
<table id="tab_logic">
<thead>
<tr>
<th style="width: 4%; text-align: center;">Item<br> No.</th>
<th style="width:10%; text-align: center">Stock No.</th>
<th style="width:10%; text-align: center">Unit</th>
<th style="width:36%; text-align: center">Description</th>
<th style="width:10%; text-align: center">Quantity</th>
<th style="width:15%; text-align: center">Unit Cost</th>
<th style="width:15%; text-align: center">Amount</th>
</tr>
</thead>
<tbody id="table_body">
<tr id='addr1'>
<td><input type="text" id="item_no" name="item_no[1]" placeholder="" class="form-control" autocomplete="off"></td>
<td><input type="text" id="stock_no" name="stock_no[1]" placeholder="Stock No" class="form-control" autocomplete="off"></td>
<td><input type="text" id="unit" name="unit[1]" placeholder="Unit" class="form-control" autocomplete="off"></td>
<td><textarea name="description[1]" id="description" rows="1" placeholder="Description" class="form-control" required></textarea></td>
<td><input type="text" id="quantity0" name="quantity[1]" placeholder="Quantity" class="form-control" onkeypress='return isNumberKeyQTY(event)' autocomplete="off"></td>
<td><input type="text" id="unit_cost0" name="unit_cost[1]" placeholder="Unit Cost" class="form-control" onkeypress='return isNumberKeyUCOST(event)' autocomplete="off"></td>
<td><input type="text" id="amount0" name="amount[1]" placeholder="Amount" class="form-control amount" required></td>
</tr>
<tr id="addr2">
</tbody>
</table>
<button type="button" id="add_row" style="display: inline;" class="btn btn-primary btn-md center-block">Add More Rows <span class="glyphicon glyphicon-plus"></span></button>
<button type="button" id="remove_row" style="display: inline;" class="btn btn-danger btn-md center-block">Delete Last Row <span class="glyphicon glyphicon-remove"></span></button>
Please add some logic to your function
Disable your lot_price on initial
Missing logic to enable/disable lot_price when checkbox was check/uncheck
function disable(){
...
...
// Enable/disable lot_price
}
Missing logic to enable/disable amount textbox when add new row to list
$('#addr' + rowCount).html(
...
+ '<td><input type="text" id="amount' + rowCount + '" name="amount[' + rowCount + ']" placeholder="Amount" class="form-control amount" required '
+ ( document.getElementById("state").checked?"disabled":"")
+'></td>');
Please run below snippet for test
function disable() {
var elements = document.getElementsByClassName("amount");
document.getElementById("state").checked ? doIt(elements, true) : doIt(elements, false);
// Enable/disable lot_price
document.getElementById("lot_price").disabled = !document.getElementById("state").checked;
}
function doIt(elements, status) {
for (var i = 0; i < elements.length; i++) {
elements[i].disabled = status;
}
}
var rowCount = $('#table_body tr').length;
var m;
var month_label;
var check = document.getElementById("state");
if(check.checked){
}else{
}
$(document).ready(function() {
$("#add_row").click(function(e) {
$('tr').find('input').prop('enabled',true)
$('#addr' + rowCount).html('<td><input type="text" id="item_no" name="item_no[' + rowCount + ']" placeholder="" class="form-control" autocomplete="off"></td>'
+ '<td>...</td>'
+ '<td><input type="text" id="amount' + rowCount + '" name="amount[' + rowCount + ']" placeholder="Amount" class="form-control amount" required '+( document.getElementById("state").checked?"disabled":"")+'></td>'
);
$('#tab_logic').append('<tr id="addr' + (rowCount + 1) + '"></tr>');
rowCount++;
});
});
//This will Remove the row
//before the last row then
//changes the id of the last
//row wich is hidden
$('#remove_row').click(function(){
var row_count_minus_btn = $('#table_body tr').length - 1
if($('#table_body tr').length != 2){
$("#table_body tr:nth-last-child(2)").remove();
$('#table_body tr:last-child').attr('id', 'addr' + row_count_minus_btn);
rowCount--;
}else{
console.log("Oops...", "Cannot Delete First Row!", "warning");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="state" id="state" onclick="disable()">Check
<input type="text" id="lot_price" name="lot_price" placeholder="" class="form-control" value="" disabled/>
<table id="tab_logic">
<thead>
<tr>
<th>Item No.</th>
<th>...</th>
<th>Amount</th>
</tr>
</thead>
<tbody id="table_body">
<tr id='addr1'>
<td><input type="text" id="item_no" name="item_no[1]" placeholder="" class="form-control" autocomplete="off"> </td><td>...
</td> <td><input type="text" id="amount0" name="amount[1]" placeholder="Amount" class="form-control amount" required></td>
</tr>
<tr id="addr2">
</tbody>
</table>
<button type="button" id="add_row" style="display: inline;" class="btn btn-primary btn-md center-block" >Add More Rows <span class="glyphicon glyphicon-plus"></span></button>
<button type="button" id="remove_row" style="display: inline;" class="btn btn-danger btn-md center-block" >Delete Last Row <span class="glyphicon glyphicon-remove"></span></button>
why not working this code?
Maybe someone knows?
Table:
$(document).ready(function() {
var postURL = "<?php echo url('invoices/create') ?>";
var i = 1;
// Add inputs
$('#add').click(function() {
i++;
$('#dynamic_field').append('' +
'<tr id="row' + i + '">' +
'<td><input class="form-control form-control-alternative" type="text" name="description[]" placeholder="Description"></td>' +
'<td><input class="form-control form-control-alternative" type="text" name="qty[]" placeholder="Qty"></td>' +
'<td><input class="form-control form-control-alternative" type="text" name="price[]" placeholder="Price"></td>' +
'<td><button type="button" name="remove" id="' + i + '" class="btn btn-sm btn-danger btn-remove">X</button></td></tr>');
});
// Remove inputs
$(document).on('click', '.btn-remove', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
});
$.ajaxSetup({
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" id="dynamic_field">
<thead>
<tr>
<th scope="col">Description</th>
<th scope="col">Qty</th>
<th scope="col">Price</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="form-control form-control-alternative" type="text" name="description[]" placeholder="Description"></td>
<td><input class="form-control form-control-alternative" type="text" name="qty[]" placeholder="Qty"></td>
<td><input class="form-control form-control-alternative" type="text" name="price[]" placeholder="Price"></td>
<td><button type="button" name="add" id="add" class="btn btn-sm btn-success">+</button></td>
</tr>
</tbody>
</table>
I want to get the sum of the values of sub_total textfield in total textfield The rows can be added according to the user requirement... but .. I tried most of things.. but not getting right how to get the sum of all sub_total textbox values in the total text field without any user input could somebody help me with this code.....
thanks in advance..
i = 1;
$('.newRow').on('click', '.addRow', function(e) {
$('.nR').append('<tr>' +
'<td class="custom-td">' +
'<select id="sp_' + i + '" class="s_p select_product form-control input-sm" name="product[]" style="width:25em;" onchange="get_Result(' + i + ')">' +
'<option></option>' +
'#foreach ($products as $key=>$product_name)' +
'<option value="{{$key}}">{{$product_name}}</option>' +
'#endforeach' +
'</select>' +
'</td>' +
'<td class="custom-td">' +
'<input type="text" min="0" id="qty_' + i + '" class="qty form-control input-sm" name="quantity[]" autocomplete="off" value="1" onKeyUp="get_Result(' + i + ')">' +
'</td>' +
'<td class="custom-td">' +
'<input type="text" id="up_' + i + '" class="up unit-price form-control input-sm" name="unit_price[]" readonly>' +
'</td>' +
'<td class="custom-td">' +
'<input type="text" min="0" id="dis_' + i + '" class="form-control input-sm" name="discount[]" autocomplete="off" value="0" onKeyUp="get_Result(' + i + ')">' +
'</td>' +
'<td class="custom-td">' +
'<input type="text" id="sub-total_' + i + '" class="s-t st form-control input-sm" name="sub_total[]" readonly>' +
'</td>' +
'<td style="text-align:center;">' +
'<i data-toggle="tooltip" data-placement="top" title="delete" style="cursor:pointer;" class="tt red far fa-times-octagon remove"></i>' +
'</td>' +
'</tr>');
i++;
var total = 0
$('.s-t').each(function() {
var $this = $(this);
total += $this.val();
});
$("#total").val(total);
<table class="item_table newRow table table-bordered table-sm mt-3" style="width:100%;">
<tr style="font-size:12px;">
<th>Product</th>
<th>Quantity</th>
<th>Unit Price (PKR)</th>
<th>Discount</th>
<th>Sub-Total</th>
<th>Option</th>
</tr>
<tbody class="nR">
<tr>
<td class="custom-td">
<select class="select_product s_p form-control input-sm" name="product[]" style="width:25em;">
<option></option>
#foreach ($products as $key=>$product_name)
<option value="{{$key}}">{{$product_name}}</option>
#endforeach
</select>
</td>
<td class="custom-td">
<input type="text" min="0" id="qty_0" class="qty form-control input-sm" name="quantity[]" autocomplete="off" value="1" onKeyUp="get_Result(0)">
</td>
<td class="custom-td">
<input type="text" id="up_0" class="up unit-price form-control input-sm" name="unit_price[]" readonly>
</td>
<td class="custom-td">
<input type="text" min="0" id="dis_0" class="form-control input-sm" name="discount[]" autocomplete="off" value="0" onkeyUp="get_Result(0)">
</td>
<td class="custom-td">
<input type="text" id="sub-total_0" class="s-t st form-control input-sm" name="sub_total[]" readonly>
</td>
<td style="text-align:center;">
<i data-toggle="tooltip" data-placement="top" title="delete" style="cursor:pointer;" class="red far fa-times-octagon remove"></i>
</td>
</tr>
</tbody>
<tr>
<td colspan="6" style="padding-left:5px;">
<button type="button" class="btn btn-default btn-sm addRow"><i class="fal fa-plus"></i> Add</button>
</td>
</tr>
</table>
<input type="text" id="total" style="border:none;background:#f7f7f7;text-align:right;font-weight:500;" class="form-control input-sm" name="total" readonly>
I'm trying to add a bootstrap-select dynamically in a table defined as follow:
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Select</td>
<td>Name</td>
<td>Gmail</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4">
<select class="selectpicker" data-style="select-with-transition" id="select0">
<option>opt1</option>
<option>opt2</option>
</select>
</td>
<td class="col-sm-4">
<input type="text" name="name" class="form-control" />
</td>
<td class="col-sm-4">
<input type="mail" name="mail" class="form-control" />
</td>
<td class="col-sm-3">
<input type="text" name="phone" class="form-control" />
</td>
<td class="col-sm-2"><a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
</td>
</tr>
<tr>
</tr>
</tfoot>
</table>
Essentially my script create new row to that table when the user press a button.
The problem is that the new bootstrap-select which you can download here, is not added correctly, infact is invisible. I don't know how to fix that, some one could help me?
This is the js code:
$(document).ready(function() {
var counter = 0;
$("#addrow").on("click", function() {
var newRow = $("<tr>");
var cols = "";
cols += '<td><select class="selectpicker" id="select' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="name' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="mail' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="phone' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function(event) {
$(this).closest("tr").remove();
counter -= 1
});
});
and this is a working fiddle.
I'm unsure what you meant by $(...).selectpicker() didn't work, because I tested it in your fiddle and it worked just fine. I forked it here https://jsfiddle.net/hpysz5xr/
The code is included below.
$(document).ready(function() {
var counter = 0;
$("#addrow").on("click", function() {
var newRow = $("<tr>");
var cols = "";
cols += '<td><select class="selectpicker" id="select' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="name' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="mail' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="phone' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
$('#select'+counter).selectpicker();
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function(event) {
$(this).closest("tr").remove();
counter -= 1
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Select</td>
<td>Name</td>
<td>Gmail</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4">
<select class="selectpicker" data-style="select-with-transition" id="criteria0">
<option>opt1</option>
<option>opt2</option>
</select>
</td>
<td class="col-sm-4">
<input type="text" name="name" class="form-control" />
</td>
<td class="col-sm-4">
<input type="mail" name="mail" class="form-control" />
</td>
<td class="col-sm-3">
<input type="text" name="phone" class="form-control" />
</td>
<td class="col-sm-2">
<a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
</td>
</tr>
<tr>
</tr>
</tfoot>
</table>
I am currently using the example from http://jsfiddle.net/QAa35/.
I tried to run the code snippet in my Chrome/IE browser but I am unable to get the results as shown in the fiddle.
Here is what I have in my index.html, which is exactly the same as the fiddle:
<table class="order-list">
<thead>
<tr>
<td>Product</td>
<td>Price</td>
<td>Qty</td>
<td>Total</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="product" /></td>
<td>$<input type="text" name="price" /></td>
<td><input type="text" name="qty" /></td>
<td>$<input type="text" name="linetotal" readonly="readonly"/></td>
<td><a class="deleteRow"> x </a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: center;">
<input type="button" id="addrow" value="Add Product" />
</td>
</tr>
<tr>
<td colspan="5">
Grand Total: $<span id="grandtotal"></span>
</td>
</tr>
</tfoot>
</table>
<script>
$(document).ready(function () {
var counter = 1;
$("#addrow").on("click", function () {
counter++;
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" name="product' + counter + '"/></td>';
cols += '<td>$<input type="text" name="price' + counter + '"/></td>';
cols += '<td><input type="text" name="qty' + counter + '"/></td>';
cols += '<td>$<input type="text" name="linetotal' + counter + '" readonly="readonly"/></td>';
cols += '<td><a class="deleteRow"> x </a></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
});
$("table.order-list").on("change", 'input[name^="price"], input[name^="qty"]', function (event) {
calculateRow($(this).closest("tr"));
calculateGrandTotal();
});
$("table.order-list").on("click", "a.deleteRow", function (event) {
$(this).closest("tr").remove();
calculateGrandTotal();
});
});
function calculateRow(row) {
var price = +row.find('input[name^="price"]').val();
var qty = +row.find('input[name^="qty"]').val();
row.find('input[name^="linetotal"]').val((price * qty).toFixed(2));
}
function calculateGrandTotal() {
var grandTotal = 0;
$("table.order-list").find('input[name^="linetotal"]').each(function () {
grandTotal += +$(this).val();
});
$("#grandtotal").text(grandTotal.toFixed(2));
}
</script>
However, I am unable to get the total. I can't add/delete rows as well:
Screenshot of results
How can I make it work?
Thank you!
You code requires jQuery. So you just forgot to include it to your project or did it incorrectly. You can import jQuery from cdn just by adding this script to your HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
To prove that everything works fine with jQuery, here is your code with imported jQuery:
$(document).ready(function () {
var counter = 1;
$("#addrow").on("click", function () {
counter++;
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" name="product' + counter + '"/></td>';
cols += '<td>$<input type="text" name="price' + counter + '"/></td>';
cols += '<td><input type="text" name="qty' + counter + '"/></td>';
cols += '<td>$<input type="text" name="linetotal' + counter + '" readonly="readonly"/></td>';
cols += '<td><a class="deleteRow"> x </a></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
});
$("table.order-list").on("change", 'input[name^="price"], input[name^="qty"]', function (event) {
calculateRow($(this).closest("tr"));
calculateGrandTotal();
});
$("table.order-list").on("click", "a.deleteRow", function (event) {
$(this).closest("tr").remove();
calculateGrandTotal();
});
});
function calculateRow(row) {
var price = +row.find('input[name^="price"]').val();
var qty = +row.find('input[name^="qty"]').val();
row.find('input[name^="linetotal"]').val((price * qty).toFixed(2));
}
function calculateGrandTotal() {
var grandTotal = 0;
$("table.order-list").find('input[name^="linetotal"]').each(function () {
grandTotal += +$(this).val();
});
$("#grandtotal").text(grandTotal.toFixed(2));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="order-list">
<thead>
<tr>
<td>Product</td>
<td>Price</td>
<td>Qty</td>
<td>Total</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="product" /></td>
<td>$<input type="text" name="price" /></td>
<td><input type="text" name="qty" /></td>
<td>$<input type="text" name="linetotal" readonly="readonly"/></td>
<td><a class="deleteRow"> x </a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: center;">
<input type="button" id="addrow" value="Add Product" />
</td>
</tr>
<tr>
<td colspan="5">
Grand Total: $<span id="grandtotal"></span>
</td>
</tr>
</tfoot>
</table>