这是我的HTML输入框
<div class="box-body col-sm-12">
<input type="hidden" name="txtSlNo" id="txtSlNo" value="1">
<div class="col-sm-2">
<label for="Date" class="control-label">Date:</label>
<input type="text" class="text-right" name="date[]" id="date" value="<?
php echo date("Y/M/D")?>">
</div>
<div class="col-sm-2">
<label for="name" class="control-Service">Service:</label>
<!-- <input type="text" name="txtService" class="text-right"
id="txtService"> -->
<select id="txtService" class="txtService"
name="txtService[]">
<option value="" onmouseout="" ="">Select
Service</option>
<?php
$query="SELECT * FROM service_master";
$results=mysqli_query($con,$query);
foreach ($results as $sd_name) {
?>
<option value="<?php echo $sd_name["sd_name"];?>";?>
<?php echo $sd_name["sd_name"];?></option>
<?php
}
?>
</select>
</div>
<div class="col-sm-2">
<label for="name" class="control-Charge">Charge:</label>
<select class="txtCharge" id="txtCharge" name="txtCharge[]">
<!-- onchange="fetchDesignation(this)" -->
<option value="" onmouseout="" ="">Select
Charge</option>
<?php
$query="SELECT * FROM charge_master";
$results=mysqli_query($con,$query);
foreach ($results as $cd_name) {
?>
<option value="<?php echo $cd_name["cd_name"];?>";?>
<?php echo $cd_name["cd_name"];?></option>
<?php
}
?>
</select>
</div>
<div class="col-sm-1">
<label for="name" class="control-label">Amount:</label>
<input type="text" size="7" class="text-right"
name="txtAmount[]" id="txtAmount" oninput="calculate()" onkeypress="return
isNumber(event);">
</div>
<div class="col-sm-1">
<label for="name" class="control-label">Unit:</label>
<input type="text" size="7" name="txtUnit[]" class="text-right"
id="txtUnit" oninput="calculate()" value="1" onkeypress="return
isNumber(event);">
</div>
<div class="col-sm-1">
<label for="name" class="control-label">Total:</label>
<input type="text" size="7" name="txtTotal[]" class="text-
right" id="txtTotal" oninput="calculate();" oninput="addTotal();"
readonly>
</div>
<div class="col-sm-2">
<br>
</div>
<div class="col-sm-2">
<input type="button" value="add" name="tableAdd" id="tableAdd"
class="btn btn-primary add add1">
</div>
</div>
接下来是我的LocalStorage结构
function save(){
var date = document.getElementById("date").value;
var datehistory = JSON.parse(localStorage.getItem("date")) || [];
datehistory.push(date);
localStorage.setItem("date", JSON.stringify(datehistory));
var service = document.getElementById("txtService").value;
var servicehistory = JSON.parse(localStorage.getItem("service")) || [];
servicehistory.push(service);
localStorage.setItem("service", JSON.stringify(servicehistory));
var charge = document.getElementById("txtCharge").value;
var chargehistory = JSON.parse(localStorage.getItem("charge")) || [];
chargehistory.push(charge);
localStorage.setItem("charge", JSON.stringify(chargehistory));
var amount = document.getElementById("txtAmount").value;
var amounthistory = JSON.parse(localStorage.getItem("amount")) || [];
amounthistory.push(amount);
localStorage.setItem("amount", JSON.stringify(amounthistory));
var unit = document.getElementById("txtUnit").value;
var unithistory = JSON.parse(localStorage.getItem("unit")) || [];
unithistory.push(unit);
localStorage.setItem("unit", JSON.stringify(unithistory));
var total = document.getElementById("txtTotal").value;
var totalhistory = JSON.parse(localStorage.getItem("total")) || [];
totalhistory.push(total);
localStorage.setItem("total", JSON.stringify(totalhistory));
}
接下来是代码动态生成表行
$("#tableAdd").click(function(){
var sl_no = ($('#tabledata tr').length) - 1;
lclCount++;
sl_no++;
var date = [];
var service = [];
var charge = [];
var amount = [];
var unit = [];
var total = [];
var markup = [];
// var date = [input["name"]]
date = $("#date").val();
// var date = new Array($("#date").val());
service = $("#txtService").val();
// var service = new Array($('#txtService').val());
charge = $("#txtCharge").val();
amount = $("#txtAmount").val();
unit = $("#txtUnit").val();
total = $("#txtTotal").val();
markup = "<tr><td class='mar'><input type='checkbox' class='chk'
name='record' id='"+ lclCount +"'></td><td name='slno' class='slno' id
='slno-"+sl_no+"'>"
+ sl_no + "</td><td class='date1' name='date1'>"
+ date + "</td><td class='service' name='service'>"
+ service + "</td><td class='charge' name='charge'>"
+ charge + "</td><td name='amount'>"
+ amount + "</tserviced><td name='unit'>"
+ unit + "</td><td name='total' id='txtTot-"+lclCount+"'>"
+ parseFloat(total).toFixed(2) + "</td></tr>";
// alert(innerText);
var data = $("#tabledata").append(markup);
});
下面的代码代表删除代码
$(".delete-row").click(function(){
$("table tbody").find('input[name="record"]').each(function(){
if($(this).is(":checked")){
var ele =$(this).parent();
var lclSlNo = $(this).parent().siblings(':nth-of-type(2)').html();
var lclDate = $(this).parent().siblings(':nth-of-type(3)').html();
var lclService = $(this).parent().siblings(':nth-of-
type(4)').html();
var lclCharge = $(this).parent().siblings(':nth-of-
type(5)').html();
var lclAmount = $(this).parent().siblings(':nth-of-
type(6)').html();
var lclUnit = $(this).parent().siblings(':nth-of-type(7)').html();
var lclTotal = $(this).parent().siblings(':nth-of-type(8)').html();
var lclDateSto = JSON.parse(localStorage.getItem("date"));
var lclServiceSto = JSON.parse(localStorage.getItem("service"));
var lclChargeSto = JSON.parse(localStorage.getItem("charge"));
var lclAmountSto = JSON.parse(localStorage.getItem("amount"));
var lclUnitSto = JSON.parse(localStorage.getItem("unit"));
var lclTotalSto = JSON.parse(localStorage.getItem("total"));
if(lclDateSto == lclDate && lclServiceSto == lclService &&
lclChargeSto == lclCharge && lclAmountSto == lclAmount && lclUnitSto ==
lclUnit && lclTotalSto == lclTotal){
// alert(localStorage.getItem(lclDateSto));
var d = localStorage.removeItem("date");
// alert(d);
localStorage.removeItem("service");
localStorage.removeItem("charge");
localStorage.removeItem("amount");
localStorage.removeItem("unit");
localStorage.removeItem("total");
alert("true");
}else{
alert("false");
}
}
});
});
这是我的图像，显示了关于复选框和输入框按钮的前端结构。
enter image description here 现在我解释一下，我正在使用标记动态生成HTML表行，并且我能够成功地将数据插入localStorage，如果我使用复选框删除行数据，该行已成功删除，那么现在我的问题是如果我使用复选框删除行数据同一时间localStorage中的数据应该针对正确发生的表行进行删除如果表只有一行而If表有2行或更多行，那时候无法从localStorage中删除数据。我们将非常感谢您提出的答案。
