javascript - 添加行无法正常工作

Question

我有一个代码，可以在用户单击“添加行”按钮时动态添加表行。这将在下面的场景中发生。我的函数将根据收到的 json 响应将流程引导到 3 种不同的方式

1. 如果响应长度大于 0 并且具有名为“实际”的 key ..那么我将以只读模式在弹出窗口中填充收到的响应。带有隐藏添加行按钮
2. 如果响应长度大于 0 并且没有名为“实际”的键..那么我将在可编辑模式下使用添加行按钮可见性模式在弹出窗口中填充收到的响应3.如果响应长度等于0并且没有名为“actual”的键..那么我将使用addrow在弹出窗口中附加一个表行。

当我在流程 2 中时，单击“添加行”按钮 --> 此时它会添加一行后来我移至流程 3，然后单击“添加行”按钮一次 --> 我添加了两行，然后我再次移至流程 2 并单击“添加行”按钮 --。那次当我点击添加行按钮时我得到了 3 行。所以每次它都会增加一。请帮忙查找错误。非常感谢快速帮助!

$(document).on("click", ".popup-trigger", function(e) {
  $("#sino").val($(this).closest('tr').children()[1].textContent);
  $("#iname").val($(this).closest('tr').children()[2].textContent);
  $("#icode").val($(this).closest('tr').children()[3].textContent);
  $("#recqty").val($(this).closest('tr').children()[4].textContent);

  var irepno = $('#irepno').val();
  var icode = $('#icode').val();
  var sino = $('#sino').val();

  var inspinp = new Object();
  inspinp.sino = sino;
  inspinp.irepno = irepno;
  inspinp.icode = icode;

  //Call PopulateTable2 servlet to get the Inspection row details
  $.ajax({
    url: 'PopulateTable2',
    type: 'POST',
    dataType: 'json',
    data: JSON.stringify({
      "inspinp": inspinp
    }),
    contentType: 'application/json',
    mimeType: 'application/json',
    success: function(responseJson) {
      if (responseJson.length != 0) {
        if (responseJson && responseJson[0] && responseJson[0].actual1) {
          // find reponseJson as actual values; if found, then made that as read only(i.e., inspection data exist)
          $("#tab_logic").find("tr:gt(0)").remove();
          var tableinsp = $("#tab_logic");
          $.each(responseJson, function(key, value) {
            var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
            rowNew.children().eq(0).text(value['parameters']);
            rowNew.children().eq(1).text(value['specifications']);
            rowNew.children().eq(2).text(value['actual1']);
            rowNew.children().eq(3).text(value['actual2']);
            rowNew.children().eq(4).text(value['actual3']);
            rowNew.children().eq(5).text(value['actual4']);
            rowNew.children().eq(6).text(value['actual5']);
            rowNew.appendTo(tableinsp);
          });
          $("#addrow").hide();
          $("#save").hide();
        } else {
          // else, received response only criteria from QC_CRITERIA table and made it as user editable form
          $("#tab_logic").find("tr:gt(0)").remove();
          var tableinsp = $("#tab_logic");
          $.each(responseJson, function(key, value) {
            var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
            rowNew.children().eq(0).text(value['parameters']);
            rowNew.children().eq(1).text(value['specifications']);
            rowNew.children().eq(2).html('<input type="text" list="combo-options" id="inpact10" class="tb3"> <datalist id="combo-options"> <option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist>');
            rowNew.children().eq(3).html('<input type="text" list="combo-options" id="inpact20" class="tb3"> <datalist id="combo-options"> <option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist>');
            rowNew.children().eq(4).html('<input type="text" list="combo-options" id="inpact30" class="tb3"> <datalist id="combo-options"> <option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist>');
            rowNew.children().eq(5).html('<input type="text" list="combo-options" id="inpact40" class="tb3"> <datalist id="combo-options"> <option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist>');
            rowNew.children().eq(6).html('<input type="text" list="combo-options" id="inpact50" class="tb3"> <datalist id="combo-options"> <option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist>');
            rowNew.children().eq(7).html('<img src="delete.gif" height="42" width="42" alt="idata" class="del">');
            rowNew.appendTo(tableinsp);
          });
          $("#addrow").show();
          $("#save").show();
        }

        //  return false;
      } else {
        $("#tab_logic").find("tr:gt(0)").remove();
        $('#tab_logic tbody').append('<tr><td><input type="text" list="inppara" id="inpparameter" ><datalist id="inppara"><option value="TypeRating">TypeRating</option><option value="Operation Check">Operation Check</option><option value="Ext.Apperance">Ext.Apperance</option><option value="Verify TC">Verify TC</option><option value="Material">Material</option><option value="Dimension Check">Dimension Check</option><option value="Threads Check">Threads Check</option><option value="Visual Check">Visual Check</option><option value="Specification">Specification</option><option value="Batch no">Batch no</option><option value="Mfg.Date">Mfg.Date</option><option value="Exp.Date">Exp.Date</option></datalist><td><input type="text" list="inpsepci" id="inpspec" ><datalist id="inpsepci"><option value="AsperPO">AsperPO</option><option value="Damage">Damage</option><option value="OK">OK</option><option value="Stainless Steel">Stainless Steel</option><option value="Gaues">Gaues</option><option value="Mild Steel">Mild Steel</option><option value="As per Drawing">As per Drawing</option><option value="Cast Iron">Cast Iron</option><option value="Copper">Copper</option><option value="Aluminium">Aluminium</option><option value="Brass">Brass</option><option value="Spring Steel">Spring Steel</option><option value="Tool Steel">Tool Steel</option><option value="Nylon">Nylon</option><option value="CRGO">CRGO</option><option value="EN1">EN1</option><option value="EN2">EN2</option></datalist></td><td><input type="text" list="act1" id="inpact10" class="tb3"><datalist id="act1"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act2" id="inpact20" class="tb3"><datalist id="act2"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act3" id="inpact30" class="tb3"><datalist id="act3"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act4" id="inpact40" class="tb3"><datalist id="act4"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act5" id="inpact50" class="tb3"><datalist id="act5"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><img src="delete.gif" height="42" width="42" alt="idata" class="del"></td></tr>');
        $("#addrow").show();
        $("#save").show();
      }
    }
  });

  // Popup Window
  var scrollTop = '';
  var newHeight = '100';

  $(window).bind('scroll', function() {
    scrollTop = $(window).scrollTop();
    newHeight = scrollTop + 100;
  });

  //        $('.popup-trigger').click(function(e) {
  e.stopPropagation();
  $('.popup').after('<div class="page-cover"></div>');
  if (jQuery(window).width() < 767) {
    $(this).after($(".popup"));
    $('.popup').show().addClass('popup-mobile').css('top', 0);
    $('html, body').animate({
      scrollTop: $('.popup').offset().top
    }, 500);
  } else {
    $('.popup').removeClass('popup-mobile').css('top', newHeight).toggle();
  };
  //        });

  //script for close button
  $('html, .popup-btn-close').click(function(e) {
    $('.popup').hide();
    $('.page-cover').detach();
    window.opener.location.reload();
  });

  //script for save button
  $('html, #save').click(function(e) {
    //  alert("i am");
    // add code here
  });

  //script for addrow button
  $('html, #addrow').click(function(e) {
    $('#tab_logic tr:last').after('<tr><td><input type="text" list="inppara" id="inpparameter" ><datalist id="inppara"><option value="TypeRating">TypeRating</option><option value="Operation Check">Operation Check</option><option value="Ext.Apperance">Ext.Apperance</option><option value="Verify TC">Verify TC</option><option value="Material">Material</option><option value="Dimension Check">Dimension Check</option><option value="Threads Check">Threads Check</option><option value="Visual Check">Visual Check</option><option value="Specification">Specification</option><option value="Batch no">Batch no</option><option value="Mfg.Date">Mfg.Date</option><option value="Exp.Date">Exp.Date</option></datalist><td><input type="text" list="inpsepci" id="inpspec" ><datalist id="inpsepci"><option value="AsperPO">AsperPO</option><option value="Damage">Damage</option><option value="OK">OK</option><option value="Stainless Steel">Stainless Steel</option><option value="Gaues">Gaues</option><option value="Mild Steel">Mild Steel</option><option value="As per Drawing">As per Drawing</option><option value="Cast Iron">Cast Iron</option><option value="Copper">Copper</option><option value="Aluminium">Aluminium</option><option value="Brass">Brass</option><option value="Spring Steel">Spring Steel</option><option value="Tool Steel">Tool Steel</option><option value="Nylon">Nylon</option><option value="CRGO">CRGO</option><option value="EN1">EN1</option><option value="EN2">EN2</option></datalist></td><td><input type="text" list="act1" id="inpact10" class="tb3"><datalist id="act1"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act2" id="inpact20" class="tb3"><datalist id="act2"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act3" id="inpact30" class="tb3"><datalist id="act3"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act4" id="inpact40" class="tb3"><datalist id="act4"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act5" id="inpact50" class="tb3"><datalist id="act5"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><img src="delete.gif" height="42" width="42" alt="idata" class="del"></td></tr>');
  });
  $('.popup').click(function(e) {
    e.stopPropagation();
  });
});[![Flow 1 - add row - gives one row[![another one flow - see by default it has one row when pop up open - when click add row ; now its adding twice][1]][1]][1]

Answer 1

您的这一行

  $('#tab_logic tr:last').after('<tr><td><input type="text" list="inppara" id="inpparameter" ><datalist id="inppara"><option value="TypeRating">TypeRating</option><option value="Operation Check">Operation Check</option><option value="Ext.Apperance">Ext.Apperance</option><option value="Verify TC">Verify TC</option><option value="Material">Material</option><option value="Dimension Check">Dimension Check</option><option value="Threads Check">Threads Check</option><option value="Visual Check">Visual Check</option><option value="Specification">Specification</option><option value="Batch no">Batch no</option><option value="Mfg.Date">Mfg.Date</option><option value="Exp.Date">Exp.Date</option></datalist><td><input type="text" list="inpsepci" id="inpspec" ><datalist id="inpsepci"><option value="AsperPO">AsperPO</option><option value="Damage">Damage</option><option value="OK">OK</option><option value="Stainless Steel">Stainless Steel</option><option value="Gaues">Gaues</option><option value="Mild Steel">Mild Steel</option><option value="As per Drawing">As per Drawing</option><option value="Cast Iron">Cast Iron</option><option value="Copper">Copper</option><option value="Aluminium">Aluminium</option><option value="Brass">Brass</option><option value="Spring Steel">Spring Steel</option><option value="Tool Steel">Tool Steel</option><option value="Nylon">Nylon</option><option value="CRGO">CRGO</option><option value="EN1">EN1</option><option value="EN2">EN2</option></datalist></td><td><input type="text" list="act1" id="inpact10" class="tb3"><datalist id="act1"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act2" id="inpact20" class="tb3"><datalist id="act2"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act3" id="inpact30" class="tb3"><datalist id="act3"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act4" id="inpact40" class="tb3"><datalist id="act4"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act5" id="inpact50" class="tb3"><datalist id="act5"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><img src="delete.gif" height="42" width="42" alt="idata" class="del"></td></tr>');
        });

尝试替换.after()与 .append()请注意，.after()将在每次出现 tr:last 后添加您的行。因此，当您追加行时，它显然会增加请参阅 jquery 文档以获取更多信息..

http://api.jquery.com/after/

--- 编辑 ---

尝试删除 html对于 #addrow点击

$('#addrow').click(function(e) {
    $('#tab_logic tr:last').after('<tr><td><input type="text" list="inppara" id="inpparameter" ><datalist id="inppara"><option value="TypeRating">TypeRating</option><option value="Operation Check">Operation Check</option><option value="Ext.Apperance">Ext.Apperance</option><option value="Verify TC">Verify TC</option><option value="Material">Material</option><option value="Dimension Check">Dimension Check</option><option value="Threads Check">Threads Check</option><option value="Visual Check">Visual Check</option><option value="Specification">Specification</option><option value="Batch no">Batch no</option><option value="Mfg.Date">Mfg.Date</option><option value="Exp.Date">Exp.Date</option></datalist><td><input type="text" list="inpsepci" id="inpspec" ><datalist id="inpsepci"><option value="AsperPO">AsperPO</option><option value="Damage">Damage</option><option value="OK">OK</option><option value="Stainless Steel">Stainless Steel</option><option value="Gaues">Gaues</option><option value="Mild Steel">Mild Steel</option><option value="As per Drawing">As per Drawing</option><option value="Cast Iron">Cast Iron</option><option value="Copper">Copper</option><option value="Aluminium">Aluminium</option><option value="Brass">Brass</option><option value="Spring Steel">Spring Steel</option><option value="Tool Steel">Tool Steel</option><option value="Nylon">Nylon</option><option value="CRGO">CRGO</option><option value="EN1">EN1</option><option value="EN2">EN2</option></datalist></td><td><input type="text" list="act1" id="inpact10" class="tb3"><datalist id="act1"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act2" id="inpact20" class="tb3"><datalist id="act2"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act3" id="inpact30" class="tb3"><datalist id="act3"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act4" id="inpact40" class="tb3"><datalist id="act4"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><input type="text" list="act5" id="inpact50" class="tb3"><datalist id="act5"><option value="YES">YES</option><option value="NO">NO</option><option value="OK">OK</option><option value="NOT OK">NOT OK</option></datalist></td><td><img src="delete.gif" height="42" width="42" alt="idata" class="del"></td></tr>');
  });