Wie verwende ich JavaScript, um die Tabellensortierfunktion zu implementieren?-js-Tutorial-php.cn

Wie verwende ich JavaScript, um die Tabellensortierfunktion zu implementieren?

PHPz

Freigeben： 2023-10-19 08:24:35

Original

963 Leute haben es durchsucht

如何使用 JavaScript 实现表格排序功能？

Wie verwende ich JavaScript, um die Tabellensortierfunktion zu implementieren?

In der modernen Webentwicklung sind Tabellen eine der gebräuchlichsten Möglichkeiten, Daten anzuzeigen. Das Sortieren von Tabellen ist eine wichtige Funktion, die Benutzern helfen kann, relevante Daten schnell zu finden. In diesem Artikel erfahren Sie, wie Sie die Tabellensortierungsfunktion mithilfe von JavaScript implementieren und stellen spezifische Codebeispiele bereit.

1. Vorbereitung

Zunächst benötigen wir eine Tabelle mit Daten. Angenommen, unsere Tabelle hat drei Spalten, nämlich „Name“, „Alter“ und „Stadt“. Der Code zum Erstellen einer Tabelle in HTML lautet wie folgt:

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>上海</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>22</td>
      <td>广州</td>
    </tr>
    <!-- 更多的数据行... -->
  </tbody>
</table>

Nach dem Login kopieren

2 Tabellensortierung implementieren

Als nächstes werden wir JavaScript verwenden, um die Tabellensortierungsfunktion zu implementieren.

Zuerst müssen wir den Verweis auf die Tabelle erhalten. Wir können die Methode getElementById verwenden, um das Tabellenelement abzurufen. getElementById 方法来获得表格元素。

var table = document.getElementById("myTable");

Nach dem Login kopieren

然后，我们需要为表格的每一列添加点击事件，当用户点击某一列的表头时，将触发排序函数。

var th = table.getElementsByTagName("th");
for (var i = 0; i < th.length; i++) {
  th[i].addEventListener("click", function() {
    sortTable(table, i);
  });
}

Nach dem Login kopieren

接下来，让我们实现排序函数 sortTable。该函数将接收两个参数，一个是表格元素，另一个是要排序的列的索引。

function sortTable(table, column) {
  var rows = Array.from(table.getElementsByTagName("tr"));

  rows.sort(function(a, b) {
    var cellA = a.getElementsByTagName("td")[column];
    var cellB = b.getElementsByTagName("td")[column];

    var valueA = cellA.innerText || cellA.textContent;
    var valueB = cellB.innerText || cellB.textContent;

    if (valueA < valueB) {
      return -1;
    } else if (valueA > valueB) {
      return 1;
    } else {
      return 0;
    }
  });

  for (var i = 0; i < rows.length; i++) {
    table.appendChild(rows[i]);
  }
}

Nach dem Login kopieren

在这个排序函数中，我们首先使用了 Array.from 方法将 HTMLCollection 类型的表格行转换为数组。然后，我们使用 sort 方法来对数组进行排序。排序操作使用了 innerText 或 textContent




  表格排序示例
  <script>
    function sortTable(table, column) {
      var rows = Array.from(table.getElementsByTagName("tr"));

      rows.sort(function(a, b) {
        var cellA = a.getElementsByTagName("td")[column];
        var cellB = b.getElementsByTagName("td")[column];

        var valueA = cellA.innerText || cellA.textContent;
        var valueB = cellB.innerText || cellB.textContent;

        if (valueA < valueB) {
          return -1;
        } else if (valueA > valueB) {
          return 1;
        } else {
          return 0;
        }
      });

      for (var i = 0; i < rows.length; i++) {
        table.appendChild(rows[i]);
      }
    }

    window.onload = function() {
      var table = document.getElementById(&quot;myTable&quot;);
      var th = table.getElementsByTagName("th");
      for (var i = 0; i < th.length; i++) {
        th[i].addEventListener("click", function() {
          sortTable(table, i);
        });
      }
    };
  </script>



  
    
      
        姓名
        年龄
        城市
      
    
    
      
        张三
        25
        北京
      
      
        李四
        30
        上海
      
      
        王五
        22
        广州

姓名	年龄	城市
张三	25	北京
李四	30	上海
王五	22	广州

Nach dem Login kopieren

Dann müssen wir jeder Spalte der Tabelle ein Klickereignis hinzufügen. Wenn der Benutzer auf die Kopfzeile einer Spalte klickt, wird die Sortierfunktion ausgelöst.

rrreee

Als nächstes implementieren wir die Sortierfunktion sortTable. Diese Funktion empfängt zwei Parameter, einer ist das Tabellenelement und der andere ist der Index der zu sortierenden Spalte.

rrreee

In dieser Sortierfunktion verwenden wir zunächst die Methode Array.from, um Tabellenzeilen vom Typ HTMLCollection in ein Array zu konvertieren. Anschließend verwenden wir die Methode sort, um das Array zu sortieren. Der Sortiervorgang verwendet das Attribut innerText oder textContent, um den Textinhalt der Tabellenzelle abzurufen und zu vergleichen. Abschließend fügen wir die sortierten Zeilen wieder in die Tabelle ein, um die Sortierung abzuschließen.

3. Vollständiger Beispielcode

Das Folgende ist der vollständige Beispielcode:🎜rrreee🎜4. Durch das obige Codebeispiel haben wir gelernt, wie man JavaScript verwendet, um die Tabellensortierfunktion zu implementieren. Durch das Hinzufügen eines Click-Events zum Header der Tabelle und den Aufruf der Sortierfunktion im Event-Handler können wir die Sortierfunktion nach verschiedenen Spalten implementieren. Auf diese Weise können Benutzer die Tabelle einfach sortieren, um Zieldaten schneller zu finden. Ich hoffe, dieser Artikel ist hilfreich für Sie, vielen Dank fürs Lesen! 🎜

Das obige ist der detaillierte Inhalt vonWie verwende ich JavaScript, um die Tabellensortierfunktion zu implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!