我已经实现了MVC应用程序。代码如下
<table class="table table-striped table-hover" id="mytable">
<thead>
<tr > <th> Section Name </th>
<th>Section Code </th>
<th> Size</th>
<th> Avg. Length </th>
<th style="border-right:solid #e8eef4 thick;">Thinkness</th>
<th> Order Quantity</th>
<th>Balance Quantity </th>
<th style="border-right:solid #e8eef4 thick;border-left:solid #e8eef4 thick;"> Available Quantity </th>
<th> Supply Quantity</th>
<th> </th>
</tr>
</thead>
<tbody id="tbody">
@foreach (var item in ViewBag.ProductList)
{
<tr id="tableRow" >
<td > @item.SectionName</td>
<td > @item.SectionCode </td>
<td > @item.Size </td>
<td > @item.Length </td>
<td style="border-right:solid #e8eef4 thick;"> @item.Thickness </td>
<td > @item.OrderQuantity </td>
<td > @item.BalanceQuantity </td>
<td style="border-right:solid #e8eef4 thick ;border-left:solid #e8eef4 thick;" > @item.AvailableQuantity </td>
<td ><input id="supplyQuantity" class="supply" type="text" style="width:100px ;height:15px ;margin:1px " /></td>
<td id="editRow" > <a href="#" class="editClass" style="font-size: 12px; text-decoration: none; margin-right: 10px;">Edit </a> </td>
</tr>
}
</tbody>
</table>
当我单击编辑链接时，应打开弹出窗口。在该弹出窗口中，应该有文本框值的总和。当我单击OK按钮时，我想将此总和发送到supply quantity，该总和放置在具有id="supplyQuantity"的表中。
我使用了jQuery，代码是
<script type="text/javascript">
$(document).ready(function () {
$('.editClass').click(function () {
$('body').append('<div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="btnClose1"> × </button><h5 id="dataConfirmLabel">Edit </h5> </div><div class="modal-body" ><html><table style="width:530px"><tr> <th style="width:120px">Bundle Size</th><th>Count</th><th>Dispatch</th> <th> Pieces</th> </tr><tr> <td><div id="bundleSize1" >60 </div></td> <td><div id="count1">3</div></td> <td><input id="dispatchValue1" type="text" style="width:100px ;height:15px ;margin:1px" /></td> <td> <input id="pieces1" type="text" style="width:100px ;height:15px ;margin:1px" disabled/></td> </tr> <tr> <td><div id="bundleSize2" >10</div></td> <td><div id="count2">8</div></td><td><input id="dispatchValue2" type="text" style="width:100px ;height:15px ;margin:1px" /></td><td> <input id="pieces2" type="text" style="width:100px ;height:15px ;margin:1px" disabled/></td> </tr> <tr style="border-bottom:solid #e8eef4 thick;"> <td><div id="bundleSize3" >1</div></td><td><div id="count3">20</div></td><td><input id="dispatchValue3" type="text" style="width:100px ;height:15px ;margin:1px" /></td><td> <input id="pieces3" class="txt" type="text" style="width:100px ;height:15px ;margin:1px" disabled/></td> </tr> <tr> <td colspan="3" style ="text-align: right; border-right:solid white;"> Total</td> <td> <input id="total" type="text" value="0" style="width:100px ;height:15px ;margin:1px" disabled /></td></tr></table> </html></div> <div class="modal-footer"><button type="button" id="btnOk1" class="btn btn-primary" data-dismiss="modal" aria-hidden="true" >OK</button> <button type="button" id="btnCancel1" class="btn btn-default" data-dismiss="modal" aria-hidden="true" >Cancel</button> </div></div> ');
$('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
$('#dataConfirmModal').modal({ show: true });
});
$('body').on('blur', '#dispatchValue1', function() {
var dispatchValue = $('#dispatchValue1').val();
var bundleSize = $('#bundleSize1').text();
var nPieces1 = dispatchValue*bundleSize;
$('#pieces1').val(nPieces1);
var ntotal= $('#total').text();
if($('#total').val() > 0)
{
var ntotal = $('#total').val();
var sum=parseFloat(ntotal) +parseFloat(nPieces1);
$('#total').val(sum);
$('#supplyQuantity').val(sum);
}
else
{
var sum=parseFloat(nPieces1);
$('#total').val(sum);
$('#supplyQuantity').val(sum);
}
});
$('body').on('blur', '#dispatchValue2', function() {
var dispatchValue = $('#dispatchValue2').val();
var bundleSize = $('#bundleSize2').text();
var nPieces2 = dispatchValue*bundleSize
$('#pieces2').val(nPieces2);
if($('#total').val() > 0)
{
var ntotal = $('#total').val();
var sum = parseFloat(ntotal) + parseFloat(nPieces2);
$('#total').val(sum);
$('#supplyQuantity').val(sum);
}
else
{
var sum = parseFloat(nPieces2);
$('#total').val(sum);
$('#supplyQuantity').val(sum);
}
});
$('body').on('blur', '#dispatchValue3', function() {
var dispatchValue = $('#dispatchValue3').val();
var bundleSize = $('#bundleSize3').text();
var nPieces3 = dispatchValue*bundleSize
$('#pieces3').val(nPieces3);
if($('#total').val() > 0)
{
var ntotal = $('#total').val();
var sum=parseFloat(ntotal) +parseFloat(nPieces3);
$('#total').val(sum);
$('#supplyQuantity').val(sum);
}
else
{
var sum=parseFloat(nPieces3);
$('#total').val(sum);
$('#supplyQuantity').val(sum);
}
});
$('body').on('click', '#btnOk1', function() {
var url="@Url.Action("DispatchNow")";
$(location).attr('href', url);
});
$('body').on('click', '#btnCancel1', function() {
var url="@Url.Action("DispatchNow")";
$(location).attr('href', url);
});
$('body').on('click', '#btnClose1', function() {
var url="@Url.Action("DispatchNow")";
$(location).attr('href', url);
});
});
现在，我的问题是，当我从Supply Quantity列中单击OK按钮值时，随着页面恢复刷新，我也想在剩余记录中工作。是否有任何解决方案？
您可以在点击功能中使用以下代码
$('body').on('click', '#btnOk1', function(e) {
e.preventDefault();
var url="@Url.Action("DispatchNow")";
$(location).attr('href', url);
});
$('body').on('click', '#btnCancel1', function(e) {
e.preventDefault();
var url="@Url.Action("DispatchNow")";
$(location).attr('href', url);
});
$('body').on('click', '#btnClose1', function(e) {
e.preventDefault();
var url="@Url.Action("DispatchNow")";
$(location).attr('href', url);
});