如何找出用户执行的操作

时间:2018-06-25 16:53:08

标签: jquery

我有一个表,用户可以在其中添加或删除行

单击“保存”按钮时,是否可以知道已执行了什么操作(如果是“添加行”或“删除行”?)

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/

能否请您告诉我知道如何解决此问题?

1 个答案:

答案 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">