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

Question

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

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

现在我有一个问题，每次成功或失败方法 $("tr td:nth-child(5)").html(html);此行更新所有行的所有第 5 个 td。

那么我怎样才能只处理当前进程的第 5 行。所以它只会更新单行的第 5 个 td

谢谢

Answer 1

您需要生成一个唯一的 ID 或标记类并将其添加到您的 html 中。您可以将 id 生成到一个变量中，该变量将通过闭包供您的 Ajax 成功方法使用。您可以使用像 underscore.js 这样的库生成一个唯一的 ID，或者自己创建一个 ID，如 Stack Overflow 帖子中所示: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">&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 ) {
                 },
            });    
        });

这应该可以解决问题。