Question

我发出xhr请求，我得到了响应，并附加了一些我通过追加到表中的值。然后我在另一个页面上发出第二个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);
 });

所以，它不是在前一行之后添加新行，而是在...之前得到。

Answer 1

可能是第一个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);
     });
});

Answer 2

nikolas，没有。调用是异步的，意味着它们运行的顺序，并且完成是未定义的。您不能依赖与启动顺序匹配的完成顺序。如果你需要那个，那么要做的就是从第一个回调中调用第二个xhr（链接）。

Answer 3

这是我在最近的项目中使用的必须将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);
}

附加动态创建的表javascript

3 个答案: