Промежуточный итог jquery и общий итог с использованием определенного идентификатора и ключа td
Я пытался понять это, и я новичок, поэтому я ценю любое направление. У меня есть скрипт, который выполняет редактирование встроенных таблиц, и он работает хорошо. Мне нужно изменить его, чтобы он суммировал строки, используя только столбец COST, умноженный на столбец ORDER QTY, с промежуточным итогом в конце строки и общим итогом внизу. Проблема состоит в том, что каждая ячейка TD не имеет поля ввода, если вы не нажмете на нее и не включите встроенную функцию редактирования, а затем сохраните ее. Так что мне нужен какой-то внутренний вызов jHery внутри HTML, чтобы сделать математику (я думаю), используя доступные атрибуты TD, а именно ID и KEY.
Поэтому для первой строки мне понадобится TD с id="1" key="part_cost", умноженным на TD с id="1" key="order_qty" и отображенным как промежуточный итог в ячейке TD с id="subotal", то общий итог в нижней части таблицы.
Вот код, который у меня есть:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta charset="utf-8">
<title>Website</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/custom.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="row">
<table class= "table table-striped table-bordered table-hover" id="myTable" cellpadding="3" cellspacing="3">
<thead>
<tr>
<th colspan="1" rowspan="1" tabindex="0">MODEL</th>
<th colspan="1" rowspan="1" tabindex="0">PART #</th>
<th colspan="1" rowspan="1" tabindex="0">SERIAL</th>
<th colspan="1" rowspan="1" tabindex="0">KIND</th>
<th colspan="1" rowspan="1" tabindex="0">NAME</th>
<th colspan="1" rowspan="1" tabindex="0">SIZE</th>
<th colspan="1" rowspan="1" tabindex="0">SET</th>
<th colspan="1" rowspan="1" tabindex="0">COST</th>
<th colspan="1" rowspan="1" tabindex="0">MSRP</th>
<th colspan="1" rowspan="1" tabindex="0">MIN QTY</th>
<th colspan="1" rowspan="1" tabindex="0">ACTUAL</th>
<th colspan="1" rowspan="1" tabindex="0">ORDER QTY</th>
<th colspan="1" rowspan="1" tabindex="0">SUBTOTAL</th>
</tr>
</thead>
<tbody>
<tr class="even">
<td class="xedit" id="1" key="model_id">3</td>
<td class="xedit" id="1" key="part_num">1</td>
<td class="xedit" id="1" key="part_serial_num">123123123</td>
<td class="xedit" id="1" key="part_kind"></td>
<td class="xedit" id="1" key="part_name">item1</td>
<td class="xedit" id="1" key="part_size">size1</td>
<td class="xedit" id="1" key="part_set">2</td>
<td class="xedit" id="1" key="part_cost">120</td>
<td class="xedit" id="1" key="part_msrp">0.00</td>
<td class="xedit" id="1" key="min_qty">20</td>
<td class="xedit" id="1" key="actual_qty">0</td>
<td class="xedit" id="1" key="order_qty">4</td>
<td id="subtotal"></td>
</tr>
<tr class="even">
<td class="xedit" id="2" key="model_id">3</td>
<td class="xedit" id="2" key="part_num">2</td>
<td class="xedit" id="2" key="part_serial_num">123123321</td>
<td class="xedit" id="2" key="part_kind">set</td>
<td class="xedit" id="2" key="part_name">item2</td>
<td class="xedit" id="2" key="part_size">size2</td>
<td class="xedit" id="2" key="part_set">1</td>
<td class="xedit" id="2" key="part_cost">50.00</td>
<td class="xedit" id="2" key="part_msrp">125.00</td>
<td class="xedit" id="2" key="min_qty">15</td>
<td class="xedit" id="2" key="actual_qty">4</td>
<td class="xedit" id="2" key="order_qty">24</td>
<td id="subtotal"></td>
</tr>
<tr class="even">
<td class="xedit" id="3" key="model_id">3</td>
<td class="xedit" id="3" key="part_num">7</td>
<td class="xedit" id="3" key="part_serial_num">345123456</td>
<td class="xedit" id="3" key="part_kind">set</td>
<td class="xedit" id="3" key="part_name">item3</td>
<td class="xedit" id="3" key="part_size">size3</td>
<td class="xedit" id="3" key="part_set">1</td>
<td class="xedit" id="3" key="part_cost">120.00</td>
<td class="xedit" id="3" key="part_msrp">0.00</td>
<td class="xedit" id="3" key="min_qty">15</td>
<td class="xedit" id="3" key="actual_qty">5</td>
<td class="xedit" id="3" key="order_qty">7</td>
<td id="subtotal"></td>
</tr>
<tr>
<td colspan="10"></td>
<td colspan="2">Grand Total:</td>
<td><div id="grandTotal"></div></td>
</tr>
</tbody>
</table>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-editable.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$.fn.editable.defaults.mode = 'popup';
$('.xedit').editable();
$(document).on('click','.editable-submit',function(){
var key = $(this).closest('.editable-container').prev().attr('key');
var x = $(this).closest('.editable-container').prev().attr('id');
var y = $('.input-sm').val();
var z = $(this).closest('.editable-container').prev().text(y);
$.ajax({
url: "process.php?id="+x+"&data="+y+'&key='+key,
type: 'GET',
success: function(s){
if(s == 'status'){
$(z).html(y);}
if(s == 'error') {
alert('Error Processing your Request!');}
},
error: function(e){
alert('Error Processing your Request!!');
}
});
});
});
</script>
</div>
</body>
</html>