如何在表格中按顺序输入数字？

Question

There is a table that is sorted by clicking from larger to smaller values. How to make sure that the ordinal number of the value is always between 1 and 5 after sorting the table?

That is, the numerical order should always be between 1 and 5 and should not be sorted.

 $(document).ready(function() { var $table = $('#simpleTable').stupidtable(); $table.find('thead th[data-sort]').on('click', function() { $(this).eq(0).stupidsort(); }); });

 <table id="simpleTable"> <thead> <tr> <th data-sort="int">#</th> <th data-sort="int">int</th> <th data-sort="float">float</th> <th data-sort="string">string</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>15</td> <td>18</td> <td>banana</td> </tr> <tr> <td>2</td> <td>95</td> <td>36</td> <td>coke</td> </tr> <tr> <td>3</td> <td>2</td> <td>152.5</td> <td>apple</td> </tr> <tr> <td>4</td> <td>53</td> <td>88.5</td> <td>zebra</td> </tr> <tr> <td>5</td> <td>195</td> <td>858</td> <td>orange</td> </tr> </tbody> </table> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/stupidtable/1.1.3/stupidtable.min.js"></script>

Answer 1

Never heard of - and therefore never used - stupidtable but it doesn't look like there is a call-back event once the sorting has completed.

So instead, I've used a timeout as part of the click event.

The within the timeout finds all the first-child <td> elements, and uses the index of each to set the text of the element.

As the stupidsort code does the sort 10-milliseconds after the client event, I've had to make it 20 in the code for it to work...

 $(function() { var $table = $('#simpleTable').stupidtable(); $table.find('thead th[data-sort]').on('click', function() { $(this).eq(0).stupidsort(); // After a short period, set the values setTimeout(function() { $table.find("tbody tr td:first-child").each(function(i, v) { $(this).text((i + 1).toString()); }); }, 20); }); });

 <table id="simpleTable"> <thead> <tr> <th data-sort="int">#</th> <th data-sort="int">int</th> <th data-sort="float">float</th> <th data-sort="string">string</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>15</td> <td>18</td> <td>banana</td> </tr> <tr> <td>2</td> <td>95</td> <td>36</td> <td>coke</td> </tr> <tr> <td>3</td> <td>2</td> <td>152.5</td> <td>apple</td> </tr> <tr> <td>4</td> <td>53</td> <td>88.5</td> <td>zebra</td> </tr> <tr> <td>5</td> <td>195</td> <td>858</td> <td>orange</td> </tr> </tbody> </table> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/stupidtable/1.1.3/stupidtable.min.js"></script>