如何处理表中动态创建的tr
如何处理表中动态创建的tr
提问于 2015-07-08 12:35:54
我正在使用ajax，用户可以在其中一次请求多个ajax。对于每个用户请求，我在表中创建一个tr，它显示当前的用户请求进程。
用户可以一次请求多个文件。在这个表中，有两个文件使用linux命令多次上传。
我的ajax代码是:-
$('#mxf').on('submit', function(event){
event.preventDefault();
d = new Date();
$.ajax({
url : $(this).attr('action'),
type : $(this).attr('method'),
dataType: 'json',
data : $(this).serialize(),
beforeSend: function() {
var row = '<tr>';
row += '<td>'+$('#fileid').val()+'</td>';
row += '<td>'+$('#ndrive').val()+'</td>';
row += '<td>date</td>';
row += '<td>time</td>';
row += '<td><div id="process-bar" class="process-bar"> </div></td>';
row += '</tr>';
$('#stastistics tbody').prepend(row);
$('#fileid').val('');
$('#ndrive').val('');
},
success : function(data) {
if(data.status == 'error')
{
var html = '<span class="label label-danger">Error</span>';
$("tr td:nth-child(5)").find('#process-bar').remove();
$("tr td:nth-child(5)").html(html);
}
else if(data.status == 'success')
{
var html = '<span class="label label-success">Success</span>';
$("tr td:nth-child(5)").find('#process-bar').remove();
$("tr td:nth-child(5)").html(html);
}
},
error : function( xhr, err ) {
},
});
});- 在beforeSend函数中，我为每个请求创建一个新行
- 在成功方法中，我将第五个td“处理”更新为“成功”或“错误”。
现在，我遇到了一个问题:每个成功或失败的方法$("tr :nth(5)“).html(Html)；这一行更新所有行的所有5td。
那么，如何只处理当前进程第5行td。因此，它将只更新单行的第5行td
谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-07-08 15:38:08
您需要生成一个惟一的id或标记类并将其添加到html中。您可以将id生成一个变量，通过闭包将其用于Ajax成功方法。您可以使用像underscore.js这样的库生成唯一的id，也可以滚动您自己的id，如下面的Stack溢出帖子：jQuery generate unique IDs所示。我的例子将使用下划线。注意，如果不需要方便地访问行的其余部分，也可以在表单元格上设置id。我还执行了一次选择器，并将结果保存在$cell中以供重用。这样会更有效率。
$('#mxf').on('submit', function(event){
var d = new Date(), // you had this as a global
tempId = _.uniqueId("row_");
event.preventDefault();
$.ajax({
url : $(this).attr('action'),
type : $(this).attr('method'),
dataType: 'json',
data : $(this).serialize(),
beforeSend: function() {
var row = '<tr ' + 'id="' + tempId + '">';
row += '<td>'+$('#fileid').val()+'</td>';
row += '<td>'+$('#ndrive').val()+'</td>';
row += '<td>date</td>';
row += '<td>time</td>';
row += '<td><div id="process-bar" class="process-bar"> </div></td>';
row += '</tr>';
$('#stastistics tbody').prepend(row);
$('#fileid').val('');
$('#ndrive').val('');
},
success : function(data) {
var $cell = $("tr#" + tempId + " td:nth-child(5)");
if(data.status == 'error')
{
var html = '<span class="label label-danger">Error</span>';
$cell.find('#process-bar').remove();
$cell.html(html);
}
else if(data.status == 'success')
{
var html = '<span class="label label-success">Success</span>';
$cell.find('#process-bar').remove();
$cell.html(html);
}
},
error : function( xhr, err ) {
},
});
});这应该能起作用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31292885
复制相关文章
相似问题
腾讯云开发者
