javascript - 单击HTML表格列以在Javascript中进行排序时如何显示向上/向下箭头

Question

在我的页面中，我有一个由 ajax post 调用填充的 html 动态表。在该表上，我想按列对列标题的 on_click 值进行排序。使用下面的共享代码也可以正常工作。

现在，我想在单击时在列名旁边显示下面提到的小图标（fontawesome 图标）。如果未单击该列进行排序，则不应显示该图标。在我的 javascript 代码中，makeAllSortable() 应该在 Windows 加载时调用，第一次单击任何列将以 asc 顺序显示值，第二次单击它将按 desc 顺序显示。

图标：

<i class="fa fa-caret-up" aria-hidden="true"></i>  - for ascending order
<i class="fa fa-caret-down" aria-hidden="true"></i>  - for descending order

Javascript代码：

function sortTable(table, col, reverse) {
    var tb = table.tBodies[0], // use `<tbody>` to ignore `<thead>` and `<tfoot>` rows
        tr = Array.prototype.slice.call(tb.rows, 0), // put rows into array
        i;
    reverse = -((+reverse) || -1);
    tr = tr.sort(function (a, b) { // sort rows
        return reverse // `-1 *` if want opposite order
            * (a.cells[col].textContent.trim() // using `.textContent.trim()` for test
                .localeCompare(b.cells[col].textContent.trim())
               );
    });
    for (i = 0; i < tr.length; ++i) tb.appendChild(tr[i]); // append each row in order
}


function makeSortable(table) {
    var th = table.tHead, i;
    th && (th = th.rows[0]) && (th = th.cells);
    if (th) i = th.length;
    else return; // if no `<thead>` then do nothing
    while (--i >= 0) (function (i) {
        var dir = 1;
        th[i].addEventListener('click', function () { sortTable(table, i, (dir = 1 - dir)) });
    }(i));
}

function makeAllSortable(parent) {
    parent = parent || document.body;
    var t = parent.getElementsByTagName('table'), i = t.length;
    while (--i >= 0) makeSortable(t[i]);
}

我没有任何出路。请帮忙。

提前致谢 ！！

标签： javascriptjquery

Answer 1

示例代码...

const sortOrder = document.getElementById('sort-order')

function changeOrder(evt)
  {
  this.className = (this.className==='')? 'upOrder' : (this.className==='upOrder') ? 'downOrder' : ''
  }


sortOrder.addEventListener('click',changeOrder )

#sort-order {
  font-size: 40px;
  display: inline-block;
  width:30px;
  height:50px;
  border: 1px solid grey;
  padding: 0 7px;
}
#sort-order > i { display:none; }
#sort-order.upOrder   > i.fa-caret-up   { display:inline; }
#sort-order.downOrder > i.fa-caret-down { display:inline; }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" />

<div id="sort-order">
  <i class="fa fa-caret-up" aria-hidden="true"></i>  
  <i class="fa fa-caret-down" aria-hidden="true"></i> 
</div>

<-- click in!