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

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>