Добавить динамически созданную таблицу javascript

Я делаю запрос xhr, получаю ответ и добавляю некоторые значения, которые я получаю в таблицу, добавляя. затем я делаю второй xhr-запрос на другой странице, получаю некоторые другие результаты, которые я хочу добавить в ранее вставленную строку... проблема в том, что каждое следующее добавление, которое я делаю вместо того, чтобы попасть "под" ранее созданной строкой, получает перед ней.. Я думаю, это потому, что они создаются динамически.. но есть ли способ решить эту проблему? без добавления классов или идентификаторов в таблицу или строки..

вот мой код.. сначала HTML

<body>
    <table border="1">
        <tr>
        <th>first cell</th>
        <th>second cell</th>
        </tr>
    </table>
    <div id="div1">
</body>

и мой JavaScript

 function response(url, callback{
     //xhr request
  }

var url1 = "http://example1.com";
request(url1, function(response){
        var temp1 = document.getElementsByTagName("table")[0];
    var temp2create = document.createElement("tr");
    var temp3 = ("<td>" + someresponse + "</td><td>" + someotherresponse + "</td>");        
    temp2create.innerHTML = temp3;
    temp1.appendChild(temp2create);
 });
var url2 = "http://example1.com";
request(url2, function(response){
        var temp4 = document.getElementsByTagName("table")[0];
    var temp5create = document.createElement("tr");
    var temp6 = ("<td>" + someresponse + "</td><td>" + someotherresponse + "</td>");        
    temp5create.innerHTML = temp6;
    temp4.appendChild(temp5create);
 });

таким образом, вместо добавления новой строки после предыдущей строки, она получает до..

Источник

3 ответа

Решение

Может случиться так, что первый xhr запрос выполняется дольше, чем второй. Поэтому второй добавляет свой ответ до того, как первый получает и добавляет свой ответ. Вы можете сделать строки-заполнители в таблице, если вернется фиксированное количество запросов, например:

<body>
    <table border="1">
        <tr>
            <th>first cell</th>
            <th>second cell</th>
        </tr>
        <tr id="tr1">

        </tr>
        <tr id="tr2">

        </tr>
    </table>
</body>

и JavaScript:

(url1,response())
{
    document.getElementById("tr1").innerHTML("someresponse");
}

(url2,response())
{
    document.getElementById("tr2").innerHTML("some other response");
}

Или вы можете связать запросы, чтобы они выполнялись последовательно, если время не имеет существенного значения.

request(url1, function(response){
    var temp1 = document.getElementsByTagName("table")[0];
    var temp2create = document.createElement("tr");
    var temp3 = ("<td>" + someresponse + "</td><td>" + someotherresponse + "</td>");        
    temp2create.innerHTML = temp3;
    temp1.appendChild(temp2create);

    var url2 = "http://example1.com";
    request(url2, function(response){
        var temp4 = document.getElementsByTagName("table")[0];
        var temp5create = document.createElement("tr");
        var temp6 = ("<td>" + someresponse + "</td><td>" + someotherresponse + "</td>");        
        temp5create.innerHTML = temp6;
        temp4.appendChild(temp5create);
     });
});
Источник

Николас, нет Вызовы асинхронные, то есть порядок их выполнения и завершения не определены. Вы не можете полагаться на порядок завершения, соответствующий порядку инициации. Если вам это нужно, то нужно сделать, чтобы второй xhr вызывался из обратного вызова первого (цепочки).

Источник

Это то, что я использовал в недавнем проекте, чтобы добавить JSON в HTML.

Определить таблицу

<table id="geoTable" border="1"></table>

населять

appendTableRow('geoTable', "MPH", 70);
appendTableRow('geoTable', "KPH ", 112.654);

Функция для добавления строк

function appendTableRow(tableName,name,value)
{
    tableName = "#" + tableName;
   //<tr><td>name</td><td>value</td></tr>

   var tableRow = "<tr><td>$name</td><td>$value</td></tr>";
   tableRow = tableRow.replace("$name",name);
   tableRow = tableRow.replace("$value",value);        
   $(tableName).append(tableRow);
}
Источник
Другие вопросы по тегам