将数据动态添加到表行

时间:2011-05-16 05:54:53

标签: javascript jquery html-table

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

当表再次显示时,表中用户输入的最后一个数据应显示在表中。如何将数据添加到动态表中?

修改:
单击该按钮时,将打开一个包含动态表的对话框,每次用户关闭对话框时,该表中的所有行都将与用户输入的数据相同。我已经创建了一个变量,用于保存表中最新的输入数据。因此,当按钮再次单击时,我希望表格生成或显示用户的最后输入数据。输出应与最新的输入数据相同。

2 个答案:

答案 0 :(得分:3)

假设您有一个按钮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/

答案 1 :(得分:0)

JQuery。prepend和JQuery。append会帮助你