[英]Jquery table Append
我需要幫助以了解我在做什么錯。 我在循環中有下表:
<table width="100%" class="box-table-green" align="left" id="tableAppend" >
<thead>
<tr>
<th align="left"><?php echo $table_name; ?></th>
<th align="Right"> <a href="javascript:void(0);" id="addCF" >Add Row</a> </th>
</tr>
</thead>
</table>
通過單擊“添加行”,它將在以下Javascript代碼的幫助下在相應的表中生成一行:
$('.box-table-green a').click(function (evt) {
evt.preventDefault();
var rowHtml = '<tr align="center"><td><input type="text" name="vsname[]" value="" /></td><td><input type="text" name="foreRengoring[]" id="foreRengoring" class="fieldWidthBefore80" /><img src="images/cancel_icon.png" style="float:right" width="24" height="24" class="deleteRowNew" /></td></tr>';
$(this).parents('.box-table-green').append(rowHtml);
return false;
});
如果我只留下上面的Jquery代碼,那么它將僅追加一行。 但是當我添加下面的刪除代碼時,它會追加兩行,我不知道為什么。
$("#tableAppend").on('click', ".deleteRowNew", function () {
$(this).closest('tr').remove();
});
我嘗試使用類名進行嘗試,並直接單擊圖像。 如果直接使用$("img").click
,則僅刪除預加載到該頁面中的行。 並且不適用於使用上述“附加行”代碼動態創建的行。
需要幫助,因為我花了很多時間在這件事上,而且我無法弄清楚我在做什么錯。
更新的小提琴: http : //jsfiddle.net/lotusgodkk/GCu2D/12/
您在html和js中遇到了一些問題。 在HTML中,您錯過了<tr>
標記。 在js中,您要追加具有相同ID輸入的html。 切勿在元素上使用相同的ID。 所以我從輸入中刪除了ID屬性。 並且代碼按預期工作。
$(document).ready(function () {
$('.box-table-green a').click(function (evt) {
evt.preventDefault();
var rowHtml = '<tr align="center"><td><input type="text" name="vsname[]" value="" /></td><td><input type="text" name="foreRengoring[]" class="fieldWidthBefore80" /><img src="images/cancel_icon.png" style="float:right" width="24" height="24" class="deleteRowNew" /></td></tr>';
$(this).parents('.box-table-green').append(rowHtml);
return false;
});
$("#tableAppend").on('click', ".deleteRowNew", function () {
$(this).closest('tr').remove();
});
});
我不知道為什么我的頁面無法正常工作。 但是我用另一種方法解決了執行流程。 我猜不能在此處粘貼整個頁面,並且代碼(在此處提供)可以正常工作。
我不知道如何結束這個問題,請考慮結束這個問題。 因為有人對此發表評論將毫無用處。
謝謝
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.