Question

我需要在表格中添加按钮，按升序和降序对表格进行排序。

如果单击箭头一次，则应按升序排序。如果再次单击它，则应对Descending进行排序。

任何人都可以查看我的代码并帮助我这样做吗？我不明白，如何将降序函数添加到按钮。截至目前，它将按升序排序，但不会降序排序。它们也需要单独点击，而不是相同的点击。

$(".sort_arrow").click(function() {
  for (var i = 0; i < currentItems.length; i++) {
    sortAsc();
    document.getElementById("delete_row").deleteRow(0);
  }
  document.getElementById("delete_row").deleteRow(0);
  create();
});

function sortAsc() {
  for (var i = 0; i < currentItems.length; i++) {
    if (i == currentItems.length - 1) {
      break;
    }
    if (currentItems[i].subject.toUpperCase() > currentItems[i + 1].subject.toUpperCase()) {
      var swap = currentItems[i + 1];
      currentItems[i + 1] = currentItems[i];
      currentItems[i] = swap;
    }
  }
}

function sortDesc() {
  for (var i = currentItems.length - 1; i >= 0; i--) {
    if (i == 0) {
      break;
    }
    if (currentItems[i].subject.toUpperCase() < currentItems[i - 1].subject.toUpperCase()) {
      var swap = currentItems[i - 1];
      currentItems[i - 1] = currentItems[i];
      currentItems[i] = swap;
    }
  }

  <div id="appendTable">
        <script type="text/html" id="tableJS">
            <div class="tableDiv">
                <div class="main_head">To Dos</div>
                <br />
                <table id="myTable">
                    <thead>
                        <tr>
                            <th></th>
                            <th data-sort="asc">TO DO<div class="sort_arrow"></div>
                            </th>
                            <th>ASSIGNED RESOURCES<div class="sort_arrow">
</div>
                            </th>
                            <th data-sort="desc">DUE DATE<div 
class="sort_arrow"></div>
                            </th>
                        <th>% COMPLETE<div class="sort_arrow"></div>
                        </th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id="delete_row">
                    <tr></tr>
                </tbody>
            </table>
        </div>
    </script>
</div>

<script type="text/html" id="todo_template">
    <tr>
        <td>
            <img src="/app/images/todo/todos_incomplete_blue.svg" /></td>
        <td>%todoTitle%</td>
        <td>%resources%</td>
        <td>%duedate%</td>
        <td>%percentcomplete%</td>
        <td>
            <div class="button">
                <img src="/app/images/master/actions_btn.svg" />
            </div>
        </td>
    </tr>
</script>

Answer 1

跟踪按钮上的排序顺序，例如：

$(".sort_arrow").click(function () {
    ...
    if ($(this).hasClass("sort-asc")) {
        sortDesc();
        $(this).addClass("sort-desc").removeClass("sort-asc");
    } else {
        sortAsc();
        $(this).addClass("sort-asc").removeClass("sort-desc");
    }
    ...
});

Answer 2

为每个th添加一个属性，例如data-sort，以跟踪当前的订单。

点击按钮获取属性值并调用相关函数

＆＃13;

$(".sort_arrow").click(function() {

  var getOrder = $(this).data('order');
  console.log(getOrder);
  if (getOrder === "A") {
    // call fro ascending order func
    $(this).attr('data-order', "D")
  } else {
    // call fro descending order func
    $(this).attr('data-order', "A")

  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th></th>
      <th data-sort="asc">TO DO
        <div class="sort_arrow" data-order="A">X</div>
      </th>
      <th>ASSIGNED RESOURCES
        <div class="sort_arrow" data-order="A">X</div>
      </th>
      <th data-sort="desc">DUE DATE
        <div class="sort_arrow" data-order="A">X</div>
      </th>
      <th>% COMPLETE
        <div class="sort_arrow" data-order="A">X</div>
      </th>
      <th></th>
    </tr>
  </thead>
</table>

＆＃13;

Answer 3

让我们按照下一次点击排序的第一个升序排序。因为toggle（）已被贬低

喜欢这个

var count=0;
$(".sort_arrow").click(function() {
  count++;
  if(count%2 !=0)
     sortAsc();// add your othere operations here
  else 
    sortDesc();
});

如何在一个按钮上添加多个功能？

3 个答案: