Question

我需要通过单击标题以字母顺序对列表进行排序。当您以相反的字母顺序再次单击时。我不知道该如何执行。也许我不了解sort方法是如何工作的，但是我尝试了其他选项，但没有任何效果。并没有通过重复单击标题来进行排序

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Таблица</title>  
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/reset.css">    
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/script.js"></script>
</head>
<body>
<fieldset>
    <div class="table-title">
        <h3>Участники:</h3>
    </div>
    <table id="myTable" class="table-fill">
      <tr>
        <th class="list_link number">Номер</th>
        <th class="list_link lastname">Имя</th>
        <th class="list_link name">Фамилия</th>
        <th class="list_link age">Возраст</th>
      </tr>
      <tr>
        <td>1</td>
        <td>Яванов</td>
        <td>Петр</td>
        <td>19</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Аетров</td>
        <td>Яков</td>
        <td>18</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Сидоров</td>
        <td>Евгений</td>
        <td>16</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Ушаков</td>
        <td>Кирилл</td>
        <td>17</td>
      </tr>
    </table>
</fieldset>
</body>
</html>

JS

$(document).ready(function() {
    var trArr = $('tr').not('tr:first-child')
    var tdArrNumbers = trArr.find('td:first-child')
    var tdArrLastname = trArr.find('td:nth-child(2)')  
    $('.lastname').click(function(){
        var tdArrLastnameText = []
        for (var i = 0; i < tdArrLastname.length; i++) {
            tdArrLastnameText.push(tdArrLastname[i].innerText)
        }
        var lOne = tdArrLastnameText[0].charAt(0);
        var lTwo = tdArrLastnameText[1].charAt(0);
        if (lOne > lTwo == true) {
            tdArrLastnameText.sort()
        }
        if (lOne < lTwo == true) {
            console.log('ff')
        }
    })
})
function seeResult (seeArr){
    var newTrArr = []
    for (var i = 0; i < seeArr.length; i++) {
        newTrArr.push(seeArr[i].closest('tr'))
    }
    for (var i = 0; i < newTrArr.length; i++) {
        $(myTable).append(newTrArr[i])
    }
}

Answer 1

这是一个最小的示例。正如Dhaker在他的评论中所说，我在多维数组中插入了一些条目，然后使用了排序方法。

<DOCTYPE! html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title> Type </title>  
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    </head>
    <body>
      <table id="myTable">
          <th class="list_link lastname"> LastName </th>
          <th class="list_link name"> Name </th>
      </table>


      <script>

        var tLastName = [];
        var tName = [];
        var s_ind = 0;

        tArray = [["Aaa", "A000"],
              ["Ccc", "C111"],
              ["Bbb", "B222"]]



        function print_table(){
          for(var i=0; i<tArray.length; i++){

            newTr = "<tr id='tr"+i+"'> <td> "
              + tArray[i][0]
              + "</td> <td>"
              + tArray[i][1]
              + "</td> </tr>";
            $('#myTable').append(newTr);
          }
        }

        function sort_lastname(a, b){
          if (a[0] === b[0]) {
            return 0;
          }
          else {
            return (a[0] < b[0]) ? -1 : 1;
          }

        }

        function update_table(){
          for(var i=0; i<tArray.length; i++){
            $("#tr"+i).remove();
          }
          if(s_ind == 0){
            tArray.sort(sort_lastname);
          }
          else{
            tArray.reverse();
          }
          print_table();
          s_ind = (s_ind+1)%2;
        }

        $('.lastname').attr("onclick","update_table()");
        print_table();

      </script>

    </body>
  </html>

Answer 2

我看到您已经在使用jQuery。因此，我假设您的依赖关系没有问题。

您应该看一下健壮的datatables.js，而不要重新发明轮子。其小于100kb的文件可以使用。我几乎认为它不会影响您网站的性能。稍后您可以找到更多的最小解决方案。

按字母顺序排序

2 个答案: