將數據動態添加到表格行

此問題與我在link中的上一個問題有關。現在，我想要做的是做相反的事情。我在這裏有一個動態表（您可以在其中添加和刪除行）以及用戶在最新使用表中輸入的數據（通過按鈕觸發）應該被檢索併發布到同一個表中（如果點擊相同的按鈕）。將數據動態添加到表格行

這裏就是我以前常常從我的動態表中獲取數據的代碼：

$('#tableSearchMainAccount1 tr').each(function(){ 
var td = '';     
    if ($(this).find("td:first").length > 0) { // used to skip table header (if there is)    
     $(this).find('option:selected').each(function(){ 
     td = td + $(this).text()+ ','; 
     }); 
    td = td + $(this).find('input').val(); 
    filt[ctr]=td; 
    ctr += 1;   
    } 
}); 
alert (filt); //alert output like name,equals,ann,age,equals,11

現在，我想要做的是，當我再次點擊按鈕，這以前輸入的數據將再次公佈在我的動態表格中。

我的表是一些看起來像這樣：

<table> <tr><th>field</th><th>comparison</th><th>value</th></tr> 
<tr> 
    <td> 
     <select style="width:5em;" class="field"> 
     <option>name</option> 
     <option>age</option> 
     <option>sex</option> 
     </select> 
    </td> 
    <td> 
     <select style="width:5em;" class = "comp"> 
     <option>equals</option> 
     <option>starts with</option> 
     <option>not equal to</option> 
     </select> 
    </td> 
    <td><input type="text" class = 'value'></td> 
    <td><img class="add" src="css/images/add.png" /></td> // this is used to add new row 
</tr> 
</table>

，表中的用戶輸入，應在表中顯示，當表再次顯示最近的數據。如何將數據添加到我的動態表中？

編輯： 當單擊該按鈕，打開一個對話框，包含我的動態表，每次用戶關閉對話框，從該表中的所有行將會消失一樣，用戶輸入的數據。我已經創建了一個變量來保存表中最新的輸入數據。所以當按鈕再次點擊時，我希望表格生成或顯示用戶輸入的最後數據。輸出應該與最新輸入的數據相同。

來源

2011-05-16 jayAnn

jayAnn，會不會是po可以在http://jsfiddle.net上創建一個小提琴 - 只是爲了澄清一下，HTML代碼是什麼，動態表是什麼？你想從這個表中的數據去別的地方？ – 2011-05-16 07:55:03

我覺得我的瀏覽器有問題。它不會顯示jsfiddle。來自表格的數據適用於我的過濾器。我正在創建一個程序，用於過濾來自服務器的數據，並使用該表獲取字段，比較和值。現在我的程序中發生的事情是，它可以完美過濾，但每次我再次單擊搜索按鈕時，我的老人都想顯示我之前輸入的數據，這是我在之前的過濾器中使用的。所以這是我現在的問題。我不知道如何在動態表中添加以前的數據。 – jayAnn 2011-05-16 08:16:54

如果沒有在這個系統的工作方式中看到所有相關的（前端）代碼，很難提供建議。 – 2011-05-16 08:19:39

假設你有一個按鈕的ID add，你想添加一個錶行到末尾：

$('#add').on('click', function() { 
    var $lastTr = $('table tr:last'); 
    $lastTr.clone().insertAfter($lastTr); 
    $('#add', $lastTr).remove(); 
});

使用.clone幫助我們克隆了最後一排，並在年底追加它。

小提琴：http://jsfiddle.net/garreh/w9fXJ/

而只是爲了搶先你的下一個問題，這裏的加移除一行 ;-)

$('.remove_row').on('click', function() { 
    $(this).closest('tr').remove(); 
});

小提琴：http://jsfiddle.net/garreh/w9fXJ/1/

來源

2011-05-16 07:27:25

我已經知道如何做一個動態表，謝謝。請參閱我的編輯。 – jayAnn 2011-05-16 07:48:09

JQuery。 prepend和JQuery。 append將幫助您

來源

2011-05-16 06:12:51 user748472

我知道附加。我的問題是如何動態地將數據添加到我的動態表中。我猜append只用於添加jquery元素...到匹配元素集合中每個元素的末尾。 – jayAnn 2011-05-16 06:19:14

請參閱http://api.jquery.com/prepend/和http://api.jquery.com/append/ – jayAnn 2011-05-16 06:25:40

將數據動態添加到表格行

回答

相關問題