我发出一个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);
});
因此,与其在前一行之后添加新行,不如在。
最佳答案
第一个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);
});
});