How can I sort a table inside a div

Question

Please look at this code

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

If I try to append the table html to a div using jquery, then the sort does not work. The onclick goes into the sort function, but then nothing happens.

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

Take a look at [Function doesn't work after appending new element](https://stackoverflow.com/a/28052575/3385827) — Mohamed-Yousef, Jun 07 '17 at 02:26

score 2 · Accepted Answer · answered Jun 07 '17 at 05:35

2

Yes i got your issue ,this is not working as you are appending the whole table from jquery.

To solve this, first of all add the table on HTML page and then append the dynamic table rows into that table.

Like:-

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

Then the shorting will work fine. Thanks

Check here:-https://jsfiddle.net/Bibhudatta_sahoo/k7b04mjb/1/

answered Jun 07 '17 at 05:35

Bibhudatta Sahoo

4,808
2
27
51

Using your solution, I was able to get it all in a div https://jsfiddle.net/k7b04mjb/7/ – user1854438 Jun 07 '17 at 15:25

How can I sort a table inside a div

1 Answers1