使用 jQuery 动态创建表。表格未显示答案

【问题标题】：Dynamically creating table using jQuery. Table is not getting displayed使用 jQuery 动态创建表。表格未显示
【发布时间】：2011-10-04 05:19:29
【问题描述】：

我是 jQuery 的新手。我必须查询 2 个 Web 服务，并且基于第一个 Web 服务中的属性值，我必须查询下一个并使用来自两个 Web 服务的数据将结果填充到表中。

请查看http://jsfiddle.net/ykPXZ/2/ 处的代码。我正在尝试将表数据附加到具有 id="tableData" 的 div 中。我正在从 Web 服务获取数据，并且我检查了控制台日志以查看数据是否被附加到变量 tableDataA 并且它正在被附加，但我不会在网页上显示数据。不知何故，它正在被重写或删除。

请告诉我这是否是解决此问题的最佳方法。请提出更好的方法。

谢谢。

编辑：动态生成的表显示 23 行而不是 24 行。

您好，我正在遵循第一个答案中 mu is too short 提到的方法。我现在遇到的问题是，它不是让所有 24 行都显示在表格中，而是只显示 23 行并且缺少第一行数据。当我在控制台中记录它时，它显示了所有 24 个条目，但在表中显示了 23 行。

请提出一些相同的解决方案。

谢谢。

编辑：我已经能够解决上述显示 23 行而不是 24 行的问题。它可能对其他人有用。在下面的正确答案中，应该是 i+1 而不是使用 i。

     $tr = $('#tableData table tr:eq(' + i + ')');

替换为

     $tr = $('#tableData table tr:eq(' + (i+1) + ')');

谢谢。

【问题讨论】：

标签： html jquery datatables

【解决方案1】：

来自主 $.ajax 调用的 success 回调如下所示：

success: function(data) {
    var tableDataA = '<table border="0" width="500">';
    $.each(data, function(i, detail) {
        $.getJSON("webService2", function(metaData) {
            // ...
        });
    });

    tableDataA = tableDataA + '</table>';
    $('#tableData').empty();
    $('#tableData').append(tableDataA);
}

您的每个$.getJSON 调用都是异步的，因此构建tableDataA 的回调函数要等到您的success 回调完成后的某个时间才会执行。这意味着当你到达success 回调的底部时，你只是在这样做：

    $('#tableData').empty();
    $('#tableData').append('<table border="0" width="500"></table>');

然后你得到一张空桌子。稍后，当$.getJSON 调用完成时，他们会向tableDataA 添加一些数据，但为时已晚，届时没有人会关心tableDataA 中的内容。

您可以用同步的$.ajax 调用替换您的$.getJSON 调用，但您的用户会因此而讨厌您。

您可以在您的 success 回调中构建整个空表，然后您的 $.getJSON 回调将在您的 success 回调中使用类似的内容填充空白：

var tableDataA = '<table border="0" width="500">';
for(var i = 0; i < data.length; ++i)
    tableDataA += '<tr><td></td><td></td><td></td><td></td></tr>';
tableDataA += '</table>';
$('#tableData').empty();
$('#tableData').append(tableDataA);

$.each(data, function(i, detail) {
    $.getJSON('webService2', function(metaData) {
        $tr = $('#tableData table tr:eq(' + i + ')');
        // Fill in the table cells in $tr
    });
});

如果可能，最好将这两个服务合并为一个，这样可以一次性为您提供所需的整个 JSON blob。如果您无法控制远程系统，那么上述“填空”方法可能是最简单的方法。

【讨论】：

您好，谢谢您的回复。我会尝试这种方法。我有一个关于表格形成的问题。这种方法好还是使用数组创建表更好，就像这个链接stackoverflow.com/questions/4864294/…一样，因为特定用户可能有很多数据并且需要在合理的时间内生成表。 Web 服务超出了我的控制范围，我必须使用给我的东西。
@user977815：当你想要的时候你没有数据，所以你不能做答案正在做的事情。在这里，我构建了整个空表，然后在数据可用时将其填充；您不知道getJSON 调用将按什么顺序返回，因此您希望整个表一直都在适当的位置，这样您就不必像getJSON 那样弄清楚事情应该去哪里调用返回。如果您有一张大桌子要填满，那么您可能最终会接到太多 getJSON 的电话以寻求安慰，那么您将不得不手动管理排队（这很丑陋）。
现在我正在制作一个原型，但它可能会变成一个完整的 webapp。我需要以这样的方式构建它，以便它也可以扩展到大型数据集。你是否建议使用 getJSON 以外的任何东西？此外，我将需要执行诸如按列对数据进行排序和过滤数据之类的任务，但这需要使用下拉选项而不是 ad 方法来完成，因此我不能使用 DataTables 插件（或类似插件）。如果你知道任何插件请建议完成上述排序和过滤任务，或者需要使用自定义函数来完成。
您能否举一个操作 $tr 并向其添加内容的示例，因为我是 jQuery 的新手。再次感谢。
DataTables 有一个 API，可让您从所需的任何元素中进行排序和过滤。您可能在最初的研究中没有看到它，因为 DT API 非常广泛。根据您的描述，我强烈建议您尝试使用 DataTables。

【解决方案2】：

这里是一些使用基本 jQuery 的基本表格 tr 操作。

$('.gridNoTaxes').find('tr').each(function () { var totalRowCount = $('.gridNoTaxes').find("tbody tr").length;

var currentRowIndex = $(this)[0].rowIndex;

if ((currentRowIndex != (totalRowCount - 1)) && (currentRowIndex != 0)) {

    var priorCompID = $(this).find('td:eq(0)').children().get(0);
    var date = $(this).find('td:eq(1)').children().get(0);
    var amount = $(this).find('td:eq(2)').children().get(0);

    if (priorCompID.value.toString() == "") {
        valueString = valueString + '0' + '|';
    }
    else {
        valueString = valueString + priorCompID.value.toString() + '|';
    }

    valueString = valueString + date.value.toString() + '|';
    valueString = valueString + amount.value.toString() + '|~~';

    }
});


$('.gridNoTaxes').find('tbody')
 .append($('<tr>')
 .append($('<td>')
 .append($('<input>')
 .attr('class', 'pcID')))

 .append($('<td>')
 .append($('<input>')
 .attr('class', 'date')
 .attr('onBlur', 'HandleEvent_SimpleGrid(this)')))


 .append($('<td>')
 .append($('<input>')
 .attr('class', 'amount')
 .attr('onBlur', 'HandleEvent_SimpleGrid(this)')))

 .append($('<td>')));

【讨论】：