追加动态创建的表javascript_Javascript_Append_Row_Dynamic Tables

追加动态创建的表javascript

javascript

追加动态创建的表javascript,javascript,append,row,dynamic-tables,Javascript,Append,Row,Dynamic Tables,我发出一个xhr请求，得到响应，然后将通过追加得到的一些值追加到表中。然后我在另一个页面上发出第二个xhr请求，得到一些我想附加到前面插入的行下的其他结果。问题是，我所做的每一次附加都会在前面，而不是在前面创建的行下。。我想这是因为它们是动态创建的。但是有什么方法可以解决这个问题吗？不向表或行添加类或ID 这是我的密码。。首先是html <body> <table border="1"> <tr> <th>

我发出一个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);
 });

函数响应（url，回调{
//xhr请求
}
变量url1=”http://example1.com";
请求（url1，函数（响应）{
var temp1=document.getElementsByTagName（“表”）[0]；
var temp2create=document.createElement（“tr”）；
var temp3=（“”+someresponse+“”+someotherresponse+“”）；
temp2create.innerHTML=temp3；
temp1.appendChild（temp2create）；
});
变量url2=”http://example1.com";
请求（url2，函数（响应）{
var temp4=document.getElementsByTagName（“表”）[0]；
var temp5create=document.createElement（“tr”）；
var temp6=（“”+someresponse+“”+someotherresponse+“”）；
temp5create.innerHTML=temp6；
temp4.appendChild（temp5create）；
});

因此，不是在前一行之后添加新行，而是在..

之前。这可能是因为第一个xhr请求比第二个xhr请求需要更长的时间才能完成。因此，第二个xhr请求在第一个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>

或者，如果时间不重要，您可以将请求按顺序链接起来

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);
     });
});

请求（url1，函数（响应）{
var temp1=document.getElementsByTagName（“表”）[0]；
var temp2create=document.createElement（“tr”）；
var temp3=（“”+someresponse+“”+someotherresponse+“”）；
temp2create.innerHTML=temp3；
temp1.appendChild（temp2create）；
变量url2=”http://example1.com";
请求（url2，函数（响应）{
var temp4=document.getElementsByTagName（“表”）[0]；
var temp5create=document.createElement（“tr”）；
var temp6=（“”+someresponse+“”+someotherresponse+“”）；
temp5create.innerHTML=temp6；
temp4.appendChild（temp5create）；
});
});

nikolas，不是。调用是异步的，这意味着它们运行的顺序，并且完成的顺序是未定义的。您不能依赖于完成的顺序与启动的顺序相匹配。如果需要，那么要做的是从第一个回调调用第二个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);
}

函数appendTableRow（tableName、name、value）
{
tableName=“#”+tableName；
//名称值
var tableRow=“$name$value”；
tableRow=tableRow.replace（“$name”，name）；
tableRow=tableRow.replace（“$value”，value）；
$（tableName）.append（tableRow）；
}

请求上有一个回调，所以我不应该假设在第一个请求/响应完成后会得到第二个响应吗？否。如果进行xmlhttprequest，则在响应返回之前，回调函数不会添加到javascript事件队列中。因此，除非调用它们，否则已排队的其他请求将触发特别是在处理第一个响应之后。有关更多信息，请参阅本页：不要使用innerHTML属性修改表，它将在大多数（所有？）中失败IE的版本。您可以将其用于整个表或单元格的内容，但不能用于两者之间的任何内容。请改用。我明白了，所以我错误地认为回调将确保在第一个完成后放置下一个调用。谢谢您指出

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);
}