如何处理表中动态创建的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 ) {
                 },
            });    
        });
  • 在beforeSend函数中,我为每个请求创建一个新行
  • 在成功方法中,我将第5个td的“处理”更新为“成功”或“错误”。

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

因此,我如何才能仅处理当前处理的第5行td。因此它将仅更新单行的第5天

谢谢

BJ萨夫迪

您需要生成唯一的ID或标记类,然后将其添加到html中。您可以将id生成为一个变量,该变量将通过闭包对Ajax成功方法可用。您可以使用underscore.js之类的库生成唯一的ID,也可以滚动自己的库,如本Stack Overflow文章中所示:jQuery生成唯一的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 ) {
                 },
            });    
        });

这应该够了吧。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

提取数据时如何处理表名称中的百分号

如何处理表行选择更改?

django如何处理表单中的密码

如何处理表单子组件中的按钮

如何处理表单中的派生字段

如何处理动态表名

React Redux,如何处理表单项的创建和重定向?

Scrapy Xpath我应该如何处理表中标签之间的丢失数据?

如何处理表中的特定观察值,以便在使用semi_join组合表时观察值保持一致

无法将处理表中的 TR 标签与双模板标签对齐

在Team City插件开发JSP中如何处理表单提交

处理表命令中的缺失值

处理表中的更多行

preventDefault 和 type submit 如何处理表单?

我该如何处理表格绘制事件

如何处理我在代码中动态创建的UI元素?

如何处理在React Native中动态创建的多个textInput状态

如何处理QGridLayout中的表奇怪

如何配置Spring Batch使其不自动创建用于存储元数据的批处理表?

如何使用 HTML 或 PHP 或 JS 处理表单中的动态复选框输入

如何创建带有2个select标签的表单,如何将此select中的元素添加到另一个select中,以及如何处理表单提交?

Spring Batch Framework-自动创建批处理表

如何处理动态查询

在Rails中如何处理基于用户的动态颜色变化?

如何处理 Firebase 托管中的动态链接?

如何处理Selenum中的动态更改ID

如何处理应用内购买中的动态支付

如何处理Android WebView中的Firebase动态链接

如何处理 FittedBox 中的动态图像