如何刪除HTML表格的最後td並添加新行？

下面的代碼不能正常工作... 它只能工作一次我如何執行相同的輸出，因爲我想... 有些人可以告訴什麼是問題，爲什麼？如何刪除HTML表格的最後td並添加新行？

<!DOCTYPE html> 
<html> 
<head> 
<title>Create New Table Row</title> 
<script src="jquery-2.1.1.js" type="text/javascript"></script> 

<script> 
    jQuery(function(){ 
     var counter = 1; 
     jQuery('a.newRec').click(function(event){ 
      event.preventDefault(); 
      counter++; 
      var newRow = jQuery('<tr><td><input type="text" name="textbox[]' + 
       counter + '"/></td><td><input type="text" name="textbox[]' + 
       counter + '"/></td><td ><a href="#" class="newRec">A New Row</a></td></tr>'); 
      jQuery('table.rec').append(newRow); 
      var par = $(this).parent(); //tr par.remove(); }; 
      par.remove(); 

     }); 
    }); 
</script> 
</head> 
<body> 
<table border="1px" class="rec"> 
<tr> 
    <th>Name</th><th>Email</th></tr> 
<tr > 
    <td><input type="text" name="textbox[]"/></td> 
    <td><input type="text" name="textbox[]"/></td> 
    <td ><a href="#" class="newRec">A New Row</a></td> 
</tr> 
</table> 
</body> 
</html>

來源

2014-11-24 Ali Raza Mughal

剛一說明：我不是100％確定的每行*和命名格式*兩個輸入你的名稱重複的有效期爲後背部。你使用什麼服務器技術？ – 2014-11-24 16:44:22

點擊事件在加載時間處僅被綁定一次以僅存在於此時存在的匹配元素。

相反，您需要使用委託的事件處理程序附加到一個不變的祖先元素。

jQuery(function($){ var counter = 1; $('table.rec').on('click', 'a.newRec', function(event){ event.preventDefault(); counter++; var newRow = $('<tr><td><input type="text" name="textbox[]' + counter + '"/></td><td><input type="text" name="textbox[]' + counter + '"/></td><td ><a href="#" class="newRec">A New Row</a></td></tr>'); $('table.rec').append(newRow); var par = $(this).parent(); //tr par.remove(); }; par.remove(); }); });

注：

爲您提供了一個局部範圍的jQuery的DOM準備好處理，所以只需添加$作爲參數。然後，您可以在您的功能中使用$，而不會發生衝突。

委派的事件處理程序附加到您的表，並偵聽從其後代冒泡的點擊事件。它然後應用jQuery選擇器。它然後適用於導致事件的任何匹配元素。這意味着它將適用於事件時存在的元素（不僅僅是事件註冊時間）

通常的做法是針對不斷變化的元素，因此我選擇了table和class=rec。如果沒有別的方便，默認使用是document。請勿將'body'用於委託事件，因爲樣式可能會使其無法響應鼠標單擊。

建議：

我總是建議避免HTML從字符串串在一起，因爲這是難以維護，而且容易出錯。

另一種方法是將模板放置在一個不可見的元素中（一個不明的type的虛擬腳本塊是一個不錯的選擇），然後使用該模板構造任何新的元素。

例如的jsfiddle：http://jsfiddle.net/TrueBlueAussie/nvL9bvk5/1/

<script id="newrow" type="text/template"> <tr> <td><input type="text" name="textbox[]{i}"/></td><td><input type="text" name="textbox[]{i}"/> </td><td><a href="#" class="newRec">A New Row</a></td> </tr> </script>

，您可以使用像這樣（用正則表達式替換的任何「佔位符」所有發生）：

var newRow = $('#newrow').html().replace(/{i}/g, counter++);

例如

jQuery(function($){ var counter = 1; $('table.rec').on('click', 'a.newRec', function(event){ event.preventDefault(); var newRow = $('#newrow').html().replace(/{i}/g, counter++); $('table.rec').append(newRow); $(this).parent().remove(); }); });

這使得模板非常容易讀取維護並避免大量常見錯誤（未能關閉元素等）。

來源

2014-11-24 16:19:17

我喜歡建議部分 - 使用HTML字符串模板。 – 2014-11-24 16:39:36

@anjibman：我在大多數項目中使用它，以便HTML保持在它所屬的頁面中，並且可維護（不在JS字符串中）。 :) – 2014-11-24 16:40:25

謝謝它正常工作.. – 2014-11-25 16:56:10

試試這個：

jQuery(function(){ 
    var counter = 1; 
    jQuery(document).on('click', 'a.newRec', function(event){ 
     event.preventDefault(); 
     counter++; 
     var newRow = jQuery('<tr><td><input type="text" name="textbox[]' + 
      counter + '"/></td><td><input type="text" name="textbox[]' + 
      counter + '"/></td><td ><a href="#" class="newRec">A New Row</a></td></tr>'); 
     jQuery('table.rec').append(newRow); 
     var par = $(this).parent(); //tr par.remove(); }; 
     par.remove(); 

    }); 
});

您的代碼沒有工作，因爲你您的DOM被加載後重視動態的元素。因此，您必須將您的事件偵聽器綁定到現有元素（例如文檔），該元素是添加元素的父級。

因此，您的事件必須通過delegated元素傳播到動態添加的元素。在我的示例中，選擇器作爲.on()-函數的第二個參數傳遞。

來源

2014-11-24 16:12:41 empiric

對委託事件處理程序的解釋是適當的。 – 2014-11-24 16:14:44

@TrueBlueAussie我希望它變得足夠清晰 – empiric 2014-11-24 16:22:29

從技術上講，事件處理程序是*委託給祖先的。不是添加的元素。它的字面意思是將責任傳遞給祖先來處理。我也加了我自己的回答和解釋。 – 2014-11-24 16:24:06

很容易...

我會先更新HTML，使第一行的名稱是「文本框[] 1」的一致性。

您必須在父元素上創建點擊偵聽器來偵聽錨點標記上的點擊，以便在添加錨點標記時不必爲它們單獨綁定新的點擊處理程序。

這裏是工作示例的鏈接：http://jsfiddle.net/4pkxx34p/1/

$(document).ready(function() { 
    // Bind a click listener for the a.newRec to the containing table 
    $('table.rec').on('click', 'a.newRec', function (e) { 
     // Avoid any unwanted navigation 
     e.preventDefault(); 
     // Clone your existing row 
     var newRow = $(this).closest('tr').clone(); 
     // Update names of text inputs 
     $(newRow).find('input').each(function() { 
      $(this).attr({'name': 'textbox[]' + String($('table.rec').find('tr').length)}); 
     }); 
     // Remove the last row's last td 
     $('table.rec').find('tr:last').find('td:last').remove(); 
     // Append the cloned row to your table 
     $('table.rec').append(newRow); 
    }); 
});

來源

2014-11-24 16:20:44 Ryan

如何刪除HTML表格的最後td並添加新行？

回答

相關問題