Динамическое создание таблицы с использованием jQuery.Таблица не отображается

Question

Я новичок в jQuery.Я должен запросить 2 веб-службы и на основе значения атрибута в первом веб-сервисе, я должен запросить следующий и заполнить результат в таблице, используя данные из обоих веб-сервисов.

Пожалуйста, посмотрите на код в http://jsfiddle.net/ykPXZ/2/.Я пытаюсь добавить данные таблицы в div с id = "tableData".Я получаю данные из веб-службы и проверил журналы консоли, чтобы убедиться, что данные добавляются в переменную tableDataA и добавляются ли они, но я не должен отображать данные на веб-странице.Каким-то образом это переписывается или удаляется.

Пожалуйста, скажите мне, если это лучший подход для решения этой проблемы.Пожалуйста, предложите лучший подход к этому.

Спасибо.

РЕДАКТИРОВАТЬ: динамически сгенерированная таблица показывает 23 строки вместо 24.

Привет, я придерживаюсь подхода, как упомянуто мю слишком короткий в первом ответеПроблема, с которой я столкнулся сейчас, заключается в том, что вместо отображения всех 24 строк в таблице отображаются только 23 строки и отсутствуют данные 1-й строки.Когда я регистрирую его в консоли, он показывает все 24 записи, но в таблице отображаются 23 строки.

Пожалуйста, предложите какое-то решение для того же.

Спасибо.

РЕДАКТИРОВАТЬ: мне удалось решить вышеупомянутую проблему с отображением 23 строк вместо 24. Это может быть полезно для других. В правильном ответе ниже вместо использования i, это должен был быть i +1.

     $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
    });
});

Если возможно, было бы лучше объединить две службы в одну, что даст вамвесь BLOB-объект JSON, который вам нужен за один раз.Если у вас нет контроля над удаленными системами, то вышеуказанный подход «заполнить пробелы» может быть самым простым.

Answer 2

Вот некоторые основные операции с таблицами, использующие базовый jQuery.

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