无法访问使用addrow按钮添加的行中的图像

时间:2017-03-20 06:02:40

标签: javascript jquery

我有一个代码,只要用户点击添加行按钮,就会在最后一列中附加一个图像的表行。但我想访问图像(删除)删除该行。但是我无法做到,请帮助我。以下是我的代码



$(function() {
    $("body").on("click", "#insptable .delete", function() { 
        alert("i am"); 
        $(this).closest('tr').remove();
    });
});




添加行



$(document).on("click", "#addrow", function (e) {
	$('#insptable 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><td><img src="delete.gif" height="42" width="42" alt="idata" class="del"></td></tr>');
	
});
&#13;
&#13;
&#13;

我的桌子有以下结构。 1.如果我有数据库表中的数据,那么我将动态加载它并在最后一列附加删除图标(以便用户可以删除,如果他们不想要)。 通过这种方式,我可以访问图像并使用上面提到的$(&#34; body&#34;)。代码删除行。 2.如果我没有给定输入的任何数据数据库,那么我在表中显示默认行,最后一列显示删除图像。下面是追加代码。

&#13;
&#13;
else {
  // add default row and allow user to give input
  alert("No matched criteria for selected item! Please create new");
  var $tbl = $("#insptable");
  $tbody = $tbl.find('tbody');
  $tbl.find("tr:gt(0)").remove();
  $('#insptable 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><td><img src="delete.gif" height="42" width="42" alt="idata" class="del"></td></tr>');
  $('.rem').show();
  $("#addrow").show();
}
&#13;
&#13;
&#13;

所以在这种情况下,我无法访问上次删除图像。

如果已经使用添加行按钮添加我的行,我也无法访问相同内容。

0 个答案:

没有答案