Question

请查看此代码

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

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

$(".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/

如何在div中对表进行排序

1 个答案: