php - 在 CRUD 应用程序中更新期间增加输入 id
问题描述
我创建了一个 CRUD 应用程序，它在行中具有动态输入。输入的第一列中的输入字段对右侧的输入进行汇总，得出总行数。当我单击附加图像所示的更新时，我将数据库中的数据返回到输入字段中。如果我更改 A 列和 B 列下输入中的数字，则 Total 列下的单元格将分别更改值。但是当我添加新行并输入新数字时，相应的总计输入字段中没有显示任何内容。我通过浏览器上的检查元素检查了问题，我发现当我从数据库中检索数据后添加新行时，新行的 id 从 1 开始计数。我怎样才能让它们开始从该数据库检索到的最后一行的 id 计数计算？
以下是不同php文件中的代码。
订单.php
<?php
//order.php
include('database_connection.php');
include('header.php');
?>
<link rel="stylesheet" href="css/datepicker.css">
<script src="js/bootstrap-datepicker1.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<script>
$(document).ready(function(){
$('#inventory_order_date').datepicker({
format: "yyyy-mm-dd",
autoclose: true
});
});
</script>
<span id="alert_action"></span>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-8 col-xs-6">
<h3 class="panel-title">Order List</h3>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6" align="right">
<button type="button" name="add" id="add_button" class="btn btn-success btn-xs">Add</button>
</div>
</div>
</div>
<div class="panel-body">
<table id="order_data" class="table table-bordered table-striped">
<thead>
<tr>
<th>Order ID</th>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<div id="orderModal" class="modal fade">
<div class="modal-dialog">
<form method="post" id="order_form">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><i class="fa fa-plus"></i>Create Order</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-4" align="center">
<div class="form-control">
<label>Total</label>
</div>
</div>
<div class="col-md-3" align="center">
<div class="form-control">
<label>A</label>
</div>
</div>
<div class="col-md-3" align="center">
<div class="form-control">
<label>B</label>
</div>
</div>
</div>
<hr>
<span id="span_product_details"></span>
<hr />
</div>
<div class="modal-footer">
<input type="hidden" name="inventory_order_id" id="inventory_order_id" />
<input type="hidden" name="btn_action" id="btn_action" />
<input type="submit" name="action" id="action" class="btn btn-info" value="Add" />
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var orderdataTable = $('#order_data').DataTable({
"processing":true,
"serverSide":true,
"order":[],
"ajax":{
url:"order_fetch.php",
type:"POST"
}
});
$('#add_button').click(function(){
$('#orderModal').modal('show');
$('#order_form')[0].reset();
$('.modal-title').html("<i class='fa fa-plus'></i> Create Order");
$('#action').val('Add');
$('#btn_action').val('Add');
$('#span_product_details').html('');
add_product_row();
});
function add_product_row(count = '')
{
var html = '';
html += '<span id="row'+count+'"><div class="row">';
html += '<div class="col-md-4">';
html += '<input type="text" name="prot_0_qty[]" class="form-control prot_0_qty" id="prot_0_qty'+count+'"/>';
html += '</div>';
html += '<div class="col-md-3">';
html += '<input type="text" name="prot_1_qty[]" class="form-control prot_1_qty" id="prot_1_qty'+count+'"/>';
html += '</div>';
html += '<div class="col-md-3">';
html += '<input type="text" name="prot_2_qty[]" class="form-control prot_2_qty" id="prot_2_qty'+count+'"/>';
html += '</div>';
html += '<div class="col-md-1">';
if(count == '')
{
html += '<button type="button" name="add_more" id="add_more" class="btn btn-success btn-xs">+</button>';
}
else
{
html += '<button type="button" name="remove" id="'+count+'" class="btn btn-danger btn-xs remove">-</button>';
}
html += '</div>';
html += '</div></div><br /></span>';
$('#span_product_details').append(html);
$('.selectpicker').selectpicker();
}
var count = 0;
$(document).on('click', '#add_more', function(){
count = count + 1;
add_product_row(count);
});
$(document).on('click', '.update', function(){
var inventory_order_id = $(this).attr("id");
var btn_action = 'fetch_single';
$.ajax({
url:"order_action.php",
method:"POST",
data:{inventory_order_id:inventory_order_id, btn_action:btn_action},
dataType:"json",
success:function(data)
{
$('#orderModal').modal('show');
$('#span_product_details').html(data.product_details);
$('.modal-title').html("<i class='fa fa-pencil-square-o'></i> Edit Order");
$('#inventory_order_id').val(inventory_order_id);
$('#action').val('Edit');
$('#btn_action').val('Edit');
}
})
});
function prot_0_qty_cal(count)
{
for(j=''; j<=count; j++)
{
var prot_0_qty_var = 0;
var prot_1_qty_var = 0;
var prot_2_qty_var = 0;
var prot_1_qty_cal = 0;
var prot_2_qty_cal = 0;
prot_1_qty_var = $('#prot_1_qty'+j).val();
if (prot_1_qty_var > 0) {
prot_1_qty_cal = parseFloat(prot_1_qty_var);
}
prot_2_qty_var = $('#prot_2_qty'+j).val();
if (prot_2_qty_var > 0) {
prot_2_qty_cal = parseFloat(prot_2_qty_var);
}
prot_0_qty_var = prot_1_qty_cal + prot_2_qty_cal;
$('#prot_0_qty'+j).val(prot_0_qty_var);
}
}
$(document).on('blur','.prot_1_qty', function(){
prot_0_qty_cal(count);
});
$(document).on('blur','.prot_2_qty', function(){
prot_0_qty_cal(count);
});
});
</script>
order_action.php
<?php
include('database_connection.php');
if(isset($_POST['btn_action']))
{
if($_POST['btn_action'] == 'fetch_single')
{
$query = "SELECT * FROM inventory_order WHERE inventory_order_id = :inventory_order_id";
$statement = $connect->prepare($query);
$statement->execute(
array
(
':inventory_order_id' => $_POST["inventory_order_id"]
));
$result = $statement->fetchAll();
$output = array();
foreach($result as $row)
{
// removed
}
$sub_query = "SELECT * FROM inventory_order_product WHERE inventory_order_id = '".$_POST["inventory_order_id"]."'";
$statement = $connect->prepare($sub_query);
$statement->execute();
$sub_result = $statement->fetchAll();
$product_details = '';
$count = '';
foreach($sub_result as $sub_row)
{
$product_details .=
"
<script>
$(document).ready(function(){
function prot_0_qty_cal(count)
{
for(j=''; j<=count; j++)
{
var prot_0_qty_var = 0;
var prot_1_qty_var = 0;
var prot_2_qty_var = 0;
var prot_1_qty_cal = 0;
var prot_2_qty_cal = 0;
prot_1_qty_var = $('#prot_1_qty'+j).val();
if (prot_1_qty_var > 0) {prot_1_qty_cal = parseFloat(prot_1_qty_var);}
prot_2_qty_var = $('#prot_2_qty'+j).val();
if (prot_2_qty_var > 0) {prot_2_qty_cal = parseFloat(prot_2_qty_var);}
prot_0_qty_var = prot_1_qty_cal + prot_2_qty_cal;
$('#prot_0_qty'+j).val(prot_0_qty_var);
}
}
$(document).on('blur','.prot_1_qty', function(){
prot_0_qty_cal(".$count.");
});
$(document).on('blur','.prot_2_qty', function(){
prot_0_qty_cal(".$count.");
});
});
</script>
"
;
$product_details .=
'
<span id="row'.$count.'">
<div class="row">
<div class="col-md-4">
<input type="text" name="prot_0_qty[]" class="form-control prot_0_qty" value="'.$sub_row["prot_0_qty"].'" id="prot_0_qty'.$count.'"/>
</div>
<div class="col-md-3">
<input type="text" name="prot_1_qty[]" class="form-control prot_1_qty" value="'.$sub_row["prot_1_qty"].'" id="prot_1_qty'.$count.'"/>
</div>
<div class="col-md-3">
<input type="text" name="prot_2_qty[]" class="form-control prot_2_qty" value="'.$sub_row["prot_2_qty"].'" id="prot_2_qty'.$count.'"/>
</div>
<div class="col-md-1">
'
;
if($count == '')
{
$product_details .= '<button type="button" name="add_more" id="add_more" class="btn btn-success btn-xs">+</button>';
}
else
{
$product_details .= '<button type="button" name="remove" id="'.$count.'" class="btn btn-danger btn-xs remove">-</button>';
}
$product_details .= '
</div>
</div>
</div><br />
</span>
';
$count++;
}
$output['product_details'] = $product_details;
echo json_encode($output);
}
}
?>
解决方案
这个问题是因为你声明var count = 0. 您应该将其声明为最后添加的行的计数值。这应该可以解决问题
推荐阅读
- php - 没有使用服务器获取内容
- google-apps-script - 将谷歌文档中的表格信息推送回链接的谷歌表格
- react-native - 指标未在 iOS 和 Android 上呈现
- python - 解析大型 M3U 文件时遇到问题
- java - csv文件的Integer.parseInt在Java中不起作用
- ipad - Xcode 11：如何启用/修复 Xcode 的实时交互预览选项（用于苹果设备上的附加实时预览）？
- swift - SwiftUI 中有没有一种模糊背景的方法？
- dynamics-crm - 如何识别实体是否通过 Javascript 启用了快速创建表单？
- python - 如何打开 .npy 文件并通过 networkx 处理它？
- java - 如何更改 setOnClickListener() 中 AutoCompleteTextView 下拉列表中显示的列表？