如何在 div 中对表格进行排序

Question

请看这段代码

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_table_desc

如果我尝试使用 jquery 将表格 html 附加到 div，则排序不起作用。 onclick 进入排序功能，但没有任何反应。

$(".betaCalc").append("<table border='1' id='myTable'>");
$(".betaCalc").append("<tr>");
$(".betaCalc").append("<th onclick='sortTable(0)'>Name</th>");
$(".betaCalc").append("<th onclick='sortTable(1)'>Country</th>");
$(".betaCalc").append("</tr>");
$(".betaCalc").append("<tr>");
$(".betaCalc").append("<td>Berglunds snabbkop</td>");
$(".betaCalc").append("<td>Sweden</td>");
$(".betaCalc").append("</tr>");
$(".betaCalc").append("<tr>");
$(".betaCalc").append(" <td>North/South</td>");
$(".betaCalc").append(" <td>UK</td>");
$(".betaCalc").append(" </tr>");
$(".betaCalc").append("  <tr>");
$(".betaCalc").append("  <td>Alfreds Futterkiste</td>");
$(".betaCalc").append("  <td>Germany</td>");
$(".betaCalc").append(" </tr>");
$(".betaCalc").append(" <tr>");
$(".betaCalc").append("   <td>Koniglich Essen</td>");
$(".betaCalc").append("   <td>Germany</td>");
$(".betaCalc").append("  </tr>");
$(".betaCalc").append(" <tr>");
$(".betaCalc").append("   <td>Magazzini Alimentari Riuniti</td>");
$(".betaCalc").append("   <td>Italy</td>");
$(".betaCalc").append(" </tr>");
$(".betaCalc").append(" <tr>");
$(".betaCalc").append("   <td>Paris specialites</td>");
$(".betaCalc").append("   <td>France</td>");
$(".betaCalc").append(" </tr>");
$(".betaCalc").append(" <tr>");
$(".betaCalc").append("   <td>Island Trading</td>");
$(".betaCalc").append("   <td>UK</td>");
$(".betaCalc").append(" </tr>");
$(".betaCalc").append("  <tr>");
$(".betaCalc").append("   <td>Laughing Bacchus Winecellars</td>");
$(".betaCalc").append("   <td>Canada</td>");
$(".betaCalc").append(" </tr>");
$(".betaCalc").append("</table>");

Answer 1

是的，我遇到了您的问题，这不起作用，因为您从 jquery 附加整个表。

要解决这个问题，首先在 HTML 页面上添加表格，然后将动态表格行附加到该表格中。

喜欢：-

$(".betaCalc").append("<tr><td>Berglunds snabbkop</td><td>Sweden</td></tr>");

然后短路将正常工作。 谢谢

在这里查看：-https://jsfiddle.net/Bibhudatta_sahoo/k7b04mjb/1/