Append dynamically created table javascript
Question
I make an xhr request, I get the response and I append some values that I get to a table by appending. then I make second xhr request on another page, get some other results that I want to append under the previously inserted row..the problem is that every next append that I make instead of getting "under" the previously created row, gets before it.. I guess this is because these are dynamically created..but is there any way to solve this? without adding classes or ids to table or rows..
here is my code.. first the html
<body>
<table border="1">
<tr>
<th>first cell</th>
<th>second cell</th>
</tr>
</table>
<div id="div1">
</body>
and my 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);
});
so, instead of having new row added after previous row, it gets before..
3 answers
solution1
1 ACCPTED 2012-11-28 00:08:15
It could be that the first xhr request is taking longer to complete than the second one. Therefore the second one appends its response before the first receives and appends its response. You could either make placeholder rows in the table if a fixed amount of requests will come back, such as:
<body>
<table border="1">
<tr>
<th>first cell</th>
<th>second cell</th>
</tr>
<tr id="tr1">
</tr>
<tr id="tr2">
</tr>
</table>
</body>
and javascript:
(url1,response())
{
document.getElementById("tr1").innerHTML("someresponse");
}
(url2,response())
{
document.getElementById("tr2").innerHTML("some other response");
}
Or you could link the requests to occur in sequence if time is not of the essence.
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);
});
});
solution2
1 2012-11-28 00:16:47
nikolas, no. The calls are asynchronous, meaning the order they run, and complete is undefined. You can not rely on the order of completion matching the order of initiation. If you need that, then the thing to do is have the second xhr be called from the first's callback (chaining).
solution3
0 2016-07-08 17:13:04
This is what I used on a recent project had to append JSON to an HTML.
Define the Table
<table id="geoTable" border="1"></table>
Populate
appendTableRow('geoTable', "MPH", 70);
appendTableRow('geoTable', "KPH ", 112.654);
Function to add rows
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);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.