Как отсортировать по умолчанию TD внутри таблицы в алфавитном порядке с помощью JQasery JavaScript

Question

Я использую эту таблицу и скрипт для сортировки в алфавитном порядке данных внутри 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>

И 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);
  });
});

Теперь сортировка происходит при нажатии на кнопку. Как сделать сортировку по умолчанию при загрузке страницы? (без нажатия кнопки)

Answer 1

Тот же код, что и у вас в качестве обработчика событий, может использоваться как именованная функция. Тогда, если вы хотите, чтобы он запускался при загрузке страницы, просто вызовите его при загрузке страницы!

// 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>