Issue
I have created 11 tables with a table name using a div. I am sorting the number rows of all tables.
It works but I also want that the table name should be sorted according to the number sorting. If anyone knows how to do this please help. I have given the HTML and jQuery code here. Thanks in advance.
$('#alphBnt').on('click', function() {
var sorting = $(".box").sort((a, b) => $(a).find(".number").text() - $(b).find(".number").text()).appendTo("#container")
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><button id="alphBnt">Sort</button></p>
<div id="container">
<div class="head">Table 1</div>
<table border=2px class="box">
<tr>
<td class="name">mui</td>
<td class="number">4512</h2>
</td>
</tr>
</table>
<div class="head">Table 2</div>
<table border=2px class="box">
<tr>
<td class="name">oinecellars</td>
<td class="number">566</td>
</tr>
</table>
<div class="head">Table 3</div>
<table border=2px class="box">
<tr>
<td class="name">zacchus </td>
<td class="number">34566</td>
</tr>
</table>
<div class="head">Table 4</div>
<table border=2px class="box">
<tr>
<td class="name">zacchus </td>
<td class="number">1</td>
</tr>
</table>
<div class="head">Table 5</div>
<table border=2px class="box">
<tr>
<td class="name">zacchus </td>
<td class="number">1666</td>
</tr>
</table>
<div class="head">Table 6</div>
<table border=2px class="box">
<tr>
<td class="name">zacchus </td>
<td class="number">143</td>
</tr>
</table>
<div class="head">Table 7</div>
<table border=2px class="box">
<tr>
<td class="name">zacchus </td>
<td class="number">90</td>
</tr>
</table>
<div class="head">Table 8</div>
<table border=2px class="box">
<tr>
<td class="name">zacchus </td>
<td class="number">21</td>
</tr>
</table>
<div class="head">Table 9</div>
<table border=2px class="box">
<tr>
<td class="name">zacchus </td>
<td class="number">34</td>
</tr>
</table>
<div class="head">Table 10</div>
<table border=2px class="box">
<tr>
<td class="name">zacchus </td>
<td class="number">16</td>
</tr>
</table>
<div class="head">Table 11</div>
<table border=2px class="box">
<tr>
<td class="name">zacchus </td>
<td class="number">9000</td>
</tr>
</table>
</div>
Solution
Try wrapping the table and heading inside a div
$('#alphBnt').on('click', function() {
var sorting = $(".box-panel").sort((a, b) => $(a).find(".number").text() - $(b).find(".number").text()).appendTo("#container")
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><button id="alphBnt">Sort</button></p>
<div id="container">
<div class="box-panel">
<div class="head">Table 1</div>
<table border=2px class="box">
<tr>
<td class="name">mui</td>
<td class="number">4512</td>
</tr>
</table>
</div>
<div class="box-panel">
<div class="head">Table 2</div>
<table border=2px class="box">
<tr>
<td class="name">oinecellars</td>
<td class="number">566</td>
</tr>
</table>
</div>
<div class="box-panel">
<div class="head">Table 3</div>
<table border=2px class="box">
<tr>
<td class="name">zacchus </td>
<td class="number">34566</td>
</tr>
</table>
</div>
<div class="box-panel">
<div class="head">Table 4</div>
<table border=2px class="box">
<tr>
<td class="name">zacchus </td>
<td class="number">1</td>
</tr>
</table>
</div>
<div class="box-panel">
<div class="head">Table 5</div>
<table border=2px class="box">
<tr>
<td class="name">zacchus </td>
<td class="number">1666</td>
</tr>
</table>
</div>
<div class="box-panel">
<div class="head">Table 6</div>
<table border=2px class="box">
<tr>
<td class="name">zacchus </td>
<td class="number">143</td>
</tr>
</table>
</div>
<div class="box-panel">
<div class="head">Table 7</div>
<table border=2px class="box">
<tr>
<td class="name">zacchus </td>
<td class="number">90</td>
</tr>
</table>
</div>
<div class="box-panel">
<div class="head">Table 8</div>
<table border=2px class="box">
<tr>
<td class="name">zacchus </td>
<td class="number">21</td>
</tr>
</table>
</div>
<div class="box-panel">
<div class="head">Table 9</div>
<table border=2px class="box">
<tr>
<td class="name">zacchus </td>
<td class="number">34</td>
</tr>
</table>
</div>
<div class="box-panel">
<div class="head">Table 10</div>
<table border=2px class="box">
<tr>
<td class="name">zacchus </td>
<td class="number">16</td>
</tr>
</table>
</div>
<div class="box-panel">
<div class="head">Table 11</div>
<table border=2px class="box">
<tr>
<td class="name">zacchus </td>
<td class="number">9000</td>
</tr>
</table>
</div>
</div>
Answered By - User863
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.