如何使用javascript jquery按字母顺序对表中的默认td进行排序

Question

I am using this table and script for sorting alphabetically the data inside the td :

<button type=button>Sort Options</button>

<table class="table-data">
  <tr>
    <td class="filename">C</td>
  </tr>
  <tr>
    <td class="filename">A</td>
  </tr>
  <tr>
    <td class="filename">D</td>
  </tr>
  <tr>
    <td class="filename">B</td>
  </tr>
</table>

And the jquery:

$('button').click(function() {
  var options = $('table.table-data td');
  var arr = options.map(function(_, o) {
    return {
        t: $(o).text(),
        v: o.value
    };
  }).get();
  arr.sort(function(o1, o2) {
    return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0;
  });
  options.each(function(i, o) {
    console.log(i);
    o.value = arr[i].v;
    $(o).text(arr[i].t);
  });
});

Now the sorting happens when clicking on the button. How can I make the sorting default when loading the page? (without clicking button)

Answer 1

The same code you have as an event handler can be used as a named function. Then if you want it to run on page load, just call it on page load!

 // Have it a named function instead of an event handler function sortTds(){ var options = $('table.table-data td'); var arr = options.map(function(_, o) { return { t: $(o).text(), v: o.value }; }).get(); arr.sort(function(o1, o2) { return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0; }); options.each(function(i, o) { console.log(i); o.value = arr[i].v; $(o).text(arr[i].t); }); } // Call the function on page load sortTds(); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table-data"> <tr> <td class="filename">C</td> </tr> <tr> <td class="filename">A</td> </tr> <tr> <td class="filename">D</td> </tr> <tr> <td class="filename">B</td> </tr> </table>