javascript - 在 HTML 表格中排序、更新和呈现异步响应数据

Question

我有一个应用程序可以向后端发出多个异步调用；每个异步响应都是一个 {date, string} 的数组值(value)观。

我想在我的网络浏览器中的一个排序表中显示这些异步调用中的每一个的响应(按日期排序)。随着对其他​​异步调用的后续响应到达，我希望实时更新排序表。

例如，第一个异步响应可能是 [{'2012-02-10', 'ABC'}, {'2012-01-19', 'DEF'}, {'2012-03-01', 'GHI'}] ，我想看到类似 <table><tr><td>2012-01-19</td><td>DEF</td></tr><tr><td>2012-02-10</td><td>ABC</td></tr><tr><td>2012-03-01</td><td>GHI</td></tr></table> 的内容立即呈现在我的浏览器中。

如果 [{'2011-12-09', 'JKL'}] 的第二个异步响应一段时间后出现，我希望将 HTML 更改为 <table><tr><td>2011-12-09</td><td>JKL</td></tr><tr><td>2012-01-19</td><td>DEF</td></tr><tr><td>2012-02-10</td><td>ABC</td></tr><tr><td>2012-03-01</td><td>GHI</td></tr></table>

我想要的效果是在我的浏览器中有一个结果表，随着各种异步响应的出现，它会逐渐更新为排序数据。随着收到每个新的异步响应，该表的大小会增加，因为新的 {date, string}元素以正确的日期顺序出现，数据已经显示。

这可能不是一个独特的场景，所以我猜测有一种被认为是“最佳实践”的方法 - 可能使用 jQuery UI。如果是这样，有人可以指出我的“方法”或示例吗？ - 我无法使用 Google 找到任何合适的内容。

提前致谢

Answer 1

你可以从这里开始

<script>
function my_func()
{
var myarray = ["2012-02-10, ABC", "2012-01-19, DEF", "2012-03-01, GHI"];
var table_content = '';
var temp_arr = '';
for(var i in myarray)
{
    myarray.sort();
    temp_arr = myarray[i].split(',');
    table_content = table_content + '<tr><td>'+temp_arr[1]+'</td><td>'+temp_arr[0]+'</td></tr>'
}
table_content = '<table>'+table_content+'</table>'
document.getElementById('mytable').innerHTML = table_content;
}
</script>

<input type="button" value="clickme" onclick="my_func();"/>
<div id="mytable"></div>

代替在单击按钮时调用该函数，您可以在成功调用您的函数时运行该函数，然后填写 html。

希望对你有帮助