Question

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

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

请告诉我这是否是解决此问题的最佳方法。请建议一个更好的方法。

感谢。

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

嗨，我正在按照第一个答案中 mu太短所提到的方法。我现在遇到的问题是，它不是显示表中显示的所有24行，而是仅显示23行并缺少第1行数据。当我在控制台中记录它时，它显示所有24个条目，但在表中显示23行。

请为此建议一些解决方案。

感谢。

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

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

将其替换为

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

感谢。

Answer 1

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

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当时的内容。

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

你可以在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的服务。如果您无法控制远程系统，则上述“填空”方法可能是最简单的方法。

Answer 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>')));

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

2 个答案: