[英]Add data dynamically to a table row
This problem is related to my previous question in this link . 这个问题与我先前在此链接中提出的问题有关。 Now, what I'm trying to do is do the opposite thing.
现在,我正在尝试做相反的事情。 I have here a dynamic table (where you can add and delete rows) and whatever is the data that the user input in the latest use of table (trigger by a button) should be retrieve and be posted in the same table (if the same button is clicked).
我在这里有一个动态表(可以在其中添加和删除行),并且应该检索用户在表的最新用法(通过按钮触发)中输入的任何数据,并将其张贴在同一表中(如果相同)按钮)。
Here's the code that I used to get the data from my dynamic table: 这是我用来从动态表中获取数据的代码:
$('#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
Now, what I want to do is that when I click the button again, this previous input data will be posted again in my dynamic table. 现在,我要做的是,当我再次单击该按钮时,以前的输入数据将再次发布到我的动态表中。
My table is something that looks like this: 我的桌子看起来像这样:
<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>
The last data that a user input in the table should be displays in the table when table shows again. 当再次显示表格时,用户在表格中输入的最后数据应显示在表格中。 How do I add the data to my dynamic table?
如何将数据添加到动态表中?
EDIT:
编辑:
When the button is clicked, a dialog opens which contains my dynamic table and every time a user close the dialog, all the row from that table will be gone same as the data the user entered. 单击该按钮后,将打开一个对话框,其中包含我的动态表,并且每当用户关闭对话框时,该表中的所有行都将与用户输入的数据相同。 I already create a variable that holds the latest inputted data in the table.
我已经创建了一个变量,用于保存表中最新输入的数据。 So when the button click again, I want the table to generate or displays the last input data by the user.
因此,当再次单击按钮时,我希望表生成或显示用户的最后输入数据。 The output should be the same as the latest input data.
输出应与最新输入数据相同。
Assuming you had a button id add
and you wanted to add a table row onto the end: 假设您有一个id为
add
的按钮,并且想在表尾添加一个表行:
$('#add').on('click', function() {
var $lastTr = $('table tr:last');
$lastTr.clone().insertAfter($lastTr);
$('#add', $lastTr).remove();
});
Using .clone
to help us clone the last row, and appending it at the end. 使用
.clone
帮助我们克隆最后一行,并将其追加到末尾。
Fiddle: http://jsfiddle.net/garreh/w9fXJ/ 小提琴: http : //jsfiddle.net/garreh/w9fXJ/
And just to pre-empt you're next question, here's the addition of removing a row ;-) 只是为了预防您的下一个问题,这是删除一行的附加内容;-)
$('.remove_row').on('click', function() {
$(this).closest('tr').remove();
});
Fiddle: http://jsfiddle.net/garreh/w9fXJ/1/ 小提琴: http : //jsfiddle.net/garreh/w9fXJ/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.