添加或HTML表格後點擊

動態刪除行我有下面的代碼在點擊動態添加行：添加或HTML表格後點擊

<script language="javascript"> 
jQuery(function(){ 
    var counter = 1; 
    jQuery('a.add-author').click(function(event){ 
     event.preventDefault(); 
     counter++; 
     var newRow = jQuery('<tr><td><input type="text" name="first_name' + 
      counter + '"/></td><td><input type="text" name="last_name' + 
      counter + '"/></td></tr>'); 
     jQuery('table.authors-list').append(newRow); 
    }); 
}); 
</script> 
<table class="authors-list"> 
<tr> 
    <td>author's first name</td><td>author's last name</td> 
</tr> 
<tr> 
    <td> 
     <input type="text" name="first_name" /> 
    </td> 
    <td> 
     <input type="text" name="last_name" /> 
    </td> 
</tr> 
</table> 
<a href="#" title="" class="add-author">Add Author</a>

的代碼工作正常jsFiddle，但是當我將它複製到我的記事本，並嘗試從WAMP服務器運行它，它不起作用。

另一個問題：如何在每行旁邊添加一個刪除行按鈕以便在點擊時刪除該行？

來源

2013-06-26 maggie

哪個錯誤返回？ –

你正在收到什麼錯誤？ –

您是否包含對jQuery的腳本引用？ –

回答你的第二個問題（有輕微改變的代碼）：

$(function() { 

    var $table = $('table.authors-list'), 
     counter = 1; 

    $('a.add-author').click(function(event){ 
     event.preventDefault(); 
     counter++; 
     var newRow = 
      '<tr>' + 
       '<td><input type="text" name="first_name' + counter + '"/></td>' + 
       '<td><input type="text" name="last_name' + counter + '"/></td>' + 
       '<td><a class="remove">remove</a></td>' 
      '</tr>'; 
     $table.append(newRow); 
    }); 

    // Remove rows on click 
    $table.on('click', '.remove', function() { 
     $(this).closest('tr').remove(); 
    }); 
});

http://jsfiddle.net/YsgEL/

所以要刪除行最好的辦法就是多聽點擊一些remove -links事件，並刪除相應的父行。

來源

2013-06-26 14:25:05 dfsq

這正是我想要的。謝謝 – maggie

您確定您已將JQuery正確加載到您的HTML文件中嗎？ JQuery可以在JSFilde中加載，但可能在您的項目中缺失。

來源

2013-06-26 14:12:49 Kimmax

不，我不知道，我怎麼能加載它？ – maggie

將下列內容放入您的HTML標題（位於''和''之間）並檢查它是否正常工作。 '' '' – Kimmax

是的，它的工作現在。THX :) – maggie

回答第一個問題： 請向我們提供更多信息......這個問題可能是由幾個原因造成的。

回答你的第二個問題： 您可以附加一個刪除按鈕帶班「remove_button」你的變量，名爲「NEWROW」，並添加一個ID給它（即id="remove_button_" + counter）。

當刪除按鈕點擊呼叫時，提取該按鈕的ID數的函數，並使用remove()功能

來源

2013-06-26 14:15:49 Atrox111

刪除與相同數量的其他元素的<script>標記之前添加以下代碼行：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

這將jQuery庫加載到你的網頁，讓您使用所有的功能和jQuery或$對象的屬性。

來源

2013-06-26 14:17:44

添加或HTML表格後點擊

回答

相關問題