0

xhrリクエストを作成し、応答を取得し、追加することでテーブルに取得したいくつかの値を追加します。次に、別のページで2番目のxhrリクエストを行い、前に挿入した行の下に追加したい他の結果を取得します。問題は、前に作成した行の「下」に入る代わりに、次のすべての追加がその前に来ることです。 ..これは、これらが動的に作成されるためだと思います。しかし、これを解決する方法はありますか？テーブルまたは行にクラスまたはIDを追加せずに。

これが私のコードです..最初に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);
 });

したがって、前の行の後に新しい行を追加する代わりに、前の行を取得します。

4

3 に答える 3

1

最初のxhrリクエストの完了に2番目のリクエストよりも時間がかかっている可能性があります。したがって、2番目の応答は、最初の応答を受信して​​追加する前に応答を追加します。次のように、一定量のリクエストが返される場合は、テーブルにプレースホルダー行を作成できます。

<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);
     });
});
于 2012-11-28T00:08:15.333 に答える
1

ニコラス、いや。呼び出しは非同期であり、実行される順序を意味し、completeは未定義です。開始の順序と一致する完了の順序に依存することはできません。それが必要な場合は、最初のコールバック（チェーン）から2番目のxhrを呼び出す必要があります。

于 2012-11-28T00:16:47.050 に答える
0

これは、最近のプロジェクトで使用したもので、HTMLにJSONを追加する必要がありました。

テーブルを定義する

<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);
}
于 2016-07-08T17:13:04.647 に答える