如何在jQuery中使用$.each生成内部循环

我已经根据输入值在jQuery中开发了生成的动态表和行。当我试图使用

$创建内部循环时，我遇到了一个问题。但它没有给出适当的输出

$('#box').click(function () {

    $.ajax({
        type: 'POST',
        url: '@routes.Application.getB()',
        data: {
            truckid: 'ean123'
        },
        beforeSend: function () {

        },
        success: function (data) {

            $("#ajaxload").hide();
            $.each(data, function (i, item) {
                $("#box_content").append('<table  class="boxtablestructure">');
                $("#box_content").append('<th >No : ' + data[i] + '</th>');
                $("#box_content").append('<tr>');
                $("#box_content").append('<th style=""> Rollno</th>');
                $("#box_content").append('<tbody>');
                $("#box_content").append('</tbody>');
                $("#box_content").append('</table></br>');

                $.ajax({
                    type: 'POST',
                    url: '@routes.Application.getU()',
                    data: {
                        docid: data[i]
                    },
                    beforeSend: function () {

                    },
                    success: function (items) {

                        $.each(items, function (j, item) {

                            $("#box_content").find("tbody").append('<tr>');
                            $("#box_content").find("tbody").append('<td>' + item + '</td>');
                            $("#box_content").find("tbody").append('</tr>');

                        });
                    }
                });

            });

以上是我的预期输出，但我得到：

请任何人帮助我
您不能像使用字符串连接运算符一样使用.append（），请尝试

$('#box').click(function () {

    $.ajax({
        type: 'POST',
        url: '@routes.Application.getB()',
        data: {
            truckid: 'ean123'
        },
        beforeSend: function () {

        },
        success: function (data) {

            $("#ajaxload").hide();
            $.each(data, function (i, item) {
                var $table = $('<table  class="boxtablestructure">' +
                    '<th >No : ' + data[i] + '</th>' +
                    '<tr>' +
                    '<th style=""> Rollno</th>' +
                    '<tbody>' +
                    '</tbody>' +
                    '</table><br />').appendTo('#box_content'),
                    $tbody = $table.find('tbody');

                $.ajax({
                    type: 'POST',
                    url: '@routes.Application.getU()',
                    data: {
                        docid: data[i]
                    },
                    beforeSend: function () {

                    },
                    success: function (items) {

                        $.each(items, function (j, item) {
                            var $tr = $('<tr />');

                            $tr.append('<td>' + item + '</td>');

                            $tr.appendTo($tbody)
                        });
                    }
                });

            });

$（'#框'）。单击（函数（）{
$.ajax({
键入：“POST”，
url:“@routes.Application.getB（）”，
数据：{
卡车司机：“ean123”
},
beforeSend:函数（）{
},
成功：功能（数据）{
$（“#ajaxload”）.hide（）；
$。每个（数据、功能（i、项）{
变量$table=$（“”+
'否：'+数据[i]+''+
'' +
“罗尔诺”+
'' +
'' +
“
”）。附录（“#框中的内容”），
$tbody=$table.find（'tbody'）；
$.ajax({
键入：“POST”，
url:“@routes.Application.getU（）”，
数据：{
docid:data[i]
},
beforeSend:函数（）{
},
成功：功能（项目）{
$。每个（项目，功能（j，项目）{
var$tr=$（''）；
$tr.append（“”+项目+“”）；
$tr.appendTo（$t正文）
});
}
});
});
尝试您的
成功回调

success: function (data) {
        $("#ajaxload").hide();
        $.each(data, function (i, item) {
            // creates table and its header
            var table='<table  class="boxtablestructure">';
            table += '<tr><th>No : '+data[i]+'</th></tr>';
            table += '<tr><th style=""> Rollno</th></tr>';
            table += '</table></br>';
            // append table in box_content
            $("#box_content").append(table);

            // creates tbody and append to last inserted table
            var $tbody = $('<tbody>').appendTo('#box_content table:last');

            $.ajax({
                type: 'POST',
                url: '@routes.Application.getU()',
                data: {
                    docid: data[i]
                },
                beforeSend: function () {
                },
                success: function (items) {
                    // append the rows in last created table body
                    $.each(items, function (j, item) {
                        $tbody.append('<tr><td>' + item + '</td></tr>');
                    });
                }
            });

        });
  } // end success callback

成功：函数（数据）{
$（“#ajaxload”）.hide（）；
$。每个（数据、功能（i、项）{
//创建表及其标题
var表=“”；
表+='否：'+数据[i]+''；
表+='Rollno'；
表+='
'；
//在框中追加表\u内容
$（“#方框内容”）。追加（表格）；
//创建tbody并附加到上次插入的表
var$tbody=$（''）.appendTo（'box#u content table:last'）；
$.ajax({
键入：“POST”，
url:“@routes.Application.getU（）”，
数据：{
docid:data[i]
},
beforeSend:函数（）{
},
成功：功能（项目）{
//追加上次创建的表体中的行
$。每个（项目，功能（j，项目）{
$t正文。附加（“”+项目+“”）；
});
}
});
});
}//结束成功回调
存在多个问题..您正在使用
.append（）
就像一个字符串连接操作符，这是错误的。我如何解决这个问题。我想要上面的输出。为此我必须做的。请帮助我第二个ajax请求是一个异步请求，然后发生了什么事情。使用上面的代码。感谢Rohan和Arun..Superv..感谢lotsuper bro。但是有一个问题。结果打印了两次。但是结果是正确的。我要限制一次。现在我得到的是编号：10101010罗尔诺12341235 123412361236@user3454863这可能是ajax响应的问题。能否检查ajax响应是否多次返回值
success: function (data) {
        $("#ajaxload").hide();
        $.each(data, function (i, item) {
            // creates table and its header
            var table='<table  class="boxtablestructure">';
            table += '<tr><th>No : '+data[i]+'</th></tr>';
            table += '<tr><th style=""> Rollno</th></tr>';
            table += '</table></br>';
            // append table in box_content
            $("#box_content").append(table);

            // creates tbody and append to last inserted table
            var $tbody = $('<tbody>').appendTo('#box_content table:last');

            $.ajax({
                type: 'POST',
                url: '@routes.Application.getU()',
                data: {
                    docid: data[i]
                },
                beforeSend: function () {
                },
                success: function (items) {
                    // append the rows in last created table body
                    $.each(items, function (j, item) {
                        $tbody.append('<tr><td>' + item + '</td></tr>');
                    });
                }
            });

        });
  } // end success callback