如何在表

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＆＃34;处理＆＃34;成功＆＃34;成功＆＃34;或＆＃34;错误＆＃34;。

现在我有一个问题，即每一个成功或失败方法$（＆＃34; tr td：nth-​​child（5）＆＃34;）。html（html）;这一行更新了所有行的所有第5个td。

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

感谢

Answer 1

You need to generate a unique id or marker class and add that to your html. You can generate the id into a variable that will be available to your Ajax success method via closure. You can generate a unique id using a library like underscore.js or roll your own, as shown in this Stack Overflow post: jQuery generate unique IDs. My example will use underscore. Note that you could also just set the id on the table cell, if you do not need easy access to the rest of the row. I also execute the selector once and save the result in $cell for reuse. This is a bit more efficient.

$('#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 ) {
                 },
            });    
        });

That should do the trick.