Jquery 如何处理表中动态创建的tr

我正在使用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">&nbsp;</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 ) {
                 },
            });    
        });

$（'#mxf'）。关于（'submit'，函数（事件）{
event.preventDefault（）；
d=新日期（）；
$.ajax({
url:$（this.attr（'action'），
类型：$（this.attr（'method'），
数据类型：“json”，
数据：$（this）.serialize（），
beforeSend:function（）{
var行=“”；
行+=''+$（'#fileid'）.val（）+''；
行+=''+$（'#ndrive'）.val（）+''；
行+='日期'；
行+=‘时间’；
行+=''；
行+=''；
$（“#统计数据体”）。前置（行）；
$（'#fileid'）.val（''）；
$（'#ndrive'）.val（''）；
},
成功：功能（数据）{
如果（data.status=='error'）
{
var html='Error'；
$（“tr td:nth child（5）”）.find（“#进程栏”）.remove（）；
$（“trtd:nth child（5）”）.html（html）；
}
else if（data.status==“success”）
{
var html='Success'；
$（“tr td:nth child（5）”）.find（“#进程栏”）.remove（）；
$（“trtd:nth child（5）”）.html（html）；
}
},
错误：函数（xhr，err）{
},
});    
});

• 在beforeSend函数中，我为每个请求创建一个新行
• 在成功方法中，我将第五个td“处理”更新为“成功”或“错误”

现在我有一个问题，每个成功或失败的方法$（“trtd:nth child（5）”）.html（html）；此行将更新所有行的所有第5个td

那么，我怎样才能只处理当前的进程呢。因此，它将只更新单行的第5个td

---

谢谢

您需要生成一个唯一的id或标记类，并将其添加到html中。您可以将id生成一个变量，该变量将通过闭包提供给Ajax成功方法。您可以使用诸如下划线.js之类的库生成一个唯一的id，也可以滚动自己的id，如以下堆栈溢出帖子所示：。我的示例将使用下划线。请注意，如果不需要轻松访问行的其余部分，也可以在表单元格上设置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">&nbsp;</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 ) {
                 },
            });    
        });

$（'#mxf'）。关于（'submit'，函数（事件）{
var d=new Date（），//这是一个全局变量
tempId=uu.uniqueId（“行”）；
event.preventDefault（）；
$.ajax({
url:$（this.attr（'action'），
类型：$（this.attr（'method'），
数据类型：“json”，
数据：$（this）.serialize（），
beforeSend:function（）{
var行=“”；
行+=''+$（'#fileid'）.val（）+''；
行+=''+$（'#ndrive'）.val（）+''；
行+='日期'；
行+=‘时间’；
行+=''；
行+=''；
$（“#统计数据体”）。前置（行）；
$（'#fileid'）.val（''）；
$（'#ndrive'）.val（''）；
},
成功：功能（数据）{
var$cell=$（“tr#“+tempId+“td:n个孩子（5）”）；
如果（data.status=='error'）
{
var html='Error'；
$cell.find（“#进程栏”）.remove（）；
$cell.html（html）；
}
else if（data.status==“success”）
{
var html='Success'；
$cell.find（“#进程栏”）.remove（）；
$cell.html（html）；
}
},
错误：函数（xhr，err）{
},
});    
});

---

这应该可以解决问题。

您需要使选择器更加具体。您可以为每个请求的tr或td生成一个唯一的id或标记类。但是，我如何才能找到哪个请求给出响应，以便处理特定的tr@BJSafdieI在我的iPad上，编写代码非常麻烦。如果当时没有其他人插话，我会在真正的键盘前添加答案。您的帮助将非常可观@bjsafdie如果有效，请不要忘记将问题标记为已回答。感谢您的支持，但要接受答案，您需要单击计票下方的复选框。这篇文章显示了屏幕截图：