我有一个表,用户可以在其中添加或删除行
单击“保存”按钮时,是否可以知道已执行了什么操作(如果是“添加行”或“删除行”?)
var isnewrowadded ;
var isrowdeleted ;
jQuery(document).ready(function() {
var id = 0;
jQuery("#addrow").click(function() {
id++;
var row = jQuery('.samplerow tr').clone(true);
row.find("input:text").val("");
row.attr('id',id);
row.appendTo('#dynamicTable1');
isnewrowadded = true;
return false;
});
$('.remove').on("click", function() {
$(this).parents("tr").remove();
isrowdeleted = true;
});
$(document).on("click","#btnSave",function() {
if(isnewrowadded)
{
alert('new row added');
}
else if(isrowdeleted)
{
alert(' row deleted');
}
});
});
https://jsfiddle.net/qvtL6qf2/398/
能否请您告诉我知道如何解决此问题?
答案 0 :(得分:1)
我对以前的答案进行了更改。现在,我添加了一个隐藏的输入,并在单击添加行并删除时更改了它的值。然后,当您单击“保存”按钮时,将提示上一个操作消息。 检查以下代码。
var isnewrowadded;
var isrowdeleted;
jQuery(document).ready(function() {
var id = 0;
jQuery("#addrow").click(function() {
id++;
var row = jQuery('.samplerow tr').clone(true);
row.find("input:text").val("");
row.attr('id', id);
row.appendTo('#dynamicTable1');
$('#change-status').val('New Row Added'); //assign new row message to status
return false;
});
$('.remove').on("click", function() {
$(this).parents("tr").remove();
$('#change-status').val('Row Deleted'); //assign delete row message to status
});
$(document).on("click", "#btnSave", function() {
alert($('#change-status').val()); //just alert hidden input value
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnSave">Save</button>
<table id="dynamicTable1">
<thead>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th>Place</th>
<th>Skill</th>
</thead>
<tbody class="row-cont">
<tr id="0">
<td><input type="text" id="fld1" /></td>
<td><input type="text" id="fld2" /></td>
<td><input type="text" id="fld3" /></td>
<td><input type="text" id="fld4" /></td>
<td><input type="text" id="fld5" /></td>
<td><button class="remove">Remove</button></td>
</tr>
</tbody>
</table>
<input type="button" id="addrow" value="Add New Row" />
<table class="samplerow" style="display:none">
<tr>
<td><input type="text" id="fld1" /></td>
<td><input type="text" id="fld2" /></td>
<td><input type="text" id="fld3" /></td>
<td><input type="text" id="fld4" /></td>
<td><input type="text" id="fld5" /></td>
<td><button class="remove">Remove</button></td>
</tr>
</table>
<!-- NEW HIDDEN INPUT -->
<input type="hidden" id="change-status" value="No Change">