表构建使用$.AJAX只包含和不包含td

Table build with $.each and AJAX contains only th and no td

本文关键字：包含 td AJAX 构建      更新时间：2023-09-26

在我的结果中，我只看到th，但td根本没有呈现。我的数据没有问题。我想我把桌子搭错了。

var table_html = '<table>';
table_html += '<thead>'
table_html += '<th>No</th>'
table_html += '<th>Name</th>'
table_html += '</thead>'
table_html += '<tbody>'
$.ajax({
    url:'/reports/name-report',
    type:'POST',
    data: options,
    success:function(result){
        console.log(result.details);
        $.each(result.details, function(i,obj){
            i = i + 1;
            table_html += '<tr>'
            table_html += '<td>'+i+'</td>'
            table_html += '<td>'+obj.name+'</td>'
            table_html += '</tr>'
        })
    },
    error:function(err){
    }
});
table_html += '</tbody>'
table_html += '</table>'
$("#myModal .modal-body").empty().append(table_html);

Ajax方法是异步的，所以你可以试试

var table_html = '<table>';
table_html += '<thead>'
table_html += '<th>No</th>'
table_html += '<th>Name</th>'
table_html += '</thead>'
table_html += '<tbody>'
$.ajax({
    url:'/reports/name-report',
    type:'POST',
    data: options,
    success:function(result){
        $.each(result.details, function(i,obj){
            i = i + 1;
            table_html += '<tr>'
            table_html += '<td>'+i+'</td>'
            table_html += '<td>'+obj.name+'</td>'
            table_html += '</tr>'
        })
        table_html += '</tbody></table>'
        $("#myModal .modal-body").empty().append(table_html);
    },
    error:function(err){
    }
});

这里的问题是success回调中的代码仅在收到AJAX响应后才执行。所以执行顺序是这样的:

  • 将表的前半部分(<table> ~ <tbody>)加到table_html中。
  • AJAX调用启动
  • 表的后半部分(</tbody>到</table>)被添加到table_html。
  • table_html的内容，没有中间部分，由于success回调尚未执行，因此尚未添加数据，被附加到您的模态。
    • success回调在AJAX调用获得响应后执行。它将表的中间部分(所有<tr>)添加到变量的末尾，但这没有区别，因为表已经被追加了。

这篇文章对这个问题给出了一个很好的一般性解释。

在你的情况下，你可以这样解决问题:

//Append an empty table.
var table_html = '<table id="my_table">';
table_html += '<thead>'
table_html += '<th>No</th>'
table_html += '<th>Name</th>'
table_html += '</thead>'
table_html += '<tbody>'
//This row will show a loading message.
//It will be removed once the actual content has loaded.
table_html += '<tr><td colspan=2>Loading content...</td></tr>'
table_html += '</tbody>'
table_html += '</table>'
$("#myModal .modal-body").html(table_html);
//Do the AJAX call.
$.ajax({
    url:'/reports/name-report',
    type:'POST',
    data: options,
    success:function(result){
        //This code will only run when you get the AJAX response.
        //Create the inner part of the table.
        var tr_html = "";
        $.each(result.details, function(i,obj){
            i = i + 1;
            tr_html += '<tr>'
            tr_html += '<td>'+i+'</td>'
            tr_html += '<td>'+obj.name+'</td>'
            tr_html += '</tr>'
        })
        //Append the inner part to the table.
        //This will overwrite the tr with the loading message we added earlier.
        $("#my_table tbody").html(tr_html);
    }
});

免责声明:我没有测试过这段代码

相关文章：