Question

我根据输入值在jQuery中开发了生成的动态表和行。当我尝试使用$.each进行内循环时，我遇到了问题。但它没有提供适当的输出。

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

                        });
                    }
                });

            });

在上面的代码getB()函数中返回一些值，将生成该值表。如果getB()返回长度2，则将生成两个表。它是成功生成的。然后每个表应根据getB()值生成行和列。这是问题，所有值都分配给每个表。例如getB()返回1010,1011。我需要在内部$.each中传递1010 ajax参数，并返回一些对应于1010的值。我需要将其指定为相同的表行。

No: 1010
-----------------------------
Rollno
-----------------------------
1234
1235


No 1011
--------------------------------
Rollno
---------------------------------
1236
1237

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

No 1010
---------------------------------
Rollno
---------------------------------
1234
1235
1236
1237

No 1011
----------------------------------
Rollno 
----------------------------------
1234
1235
1236
1237

请有人帮助我

Answer 1

您不能像字符串连接运算符一样使用.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)
                        });
                    }
                });

            });

Answer 2

试试你的success callback喜欢，

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

如何使用$ .each在jQuery中创建内部循环

2 个答案: