将数据动态添加到表格行

此问题与我在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

将数据动态添加到表格行

回答

相关问题