Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi pengisihan jadual?

Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi pengisihan jadual?

Dalam pembangunan web moden, jadual adalah salah satu cara biasa untuk memaparkan data. Isih jadual ialah fungsi penting yang boleh membantu pengguna mencari data yang berkaitan dengan cepat. Dalam artikel ini, kita akan belajar cara melaksanakan fungsi pengisihan jadual menggunakan JavaScript dan memberikan contoh kod khusus.

1. Persediaan

Pertama, kita perlukan jadual yang mengandungi data. Katakan jadual kita mempunyai tiga lajur, iaitu "Nama", "Umur" dan "Bandar". Kod untuk mencipta jadual dalam HTML adalah seperti berikut:

<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>

2 Laksanakan pengisihan jadual

Seterusnya, kami akan menggunakan JavaScript untuk melaksanakan fungsi pengisihan jadual.

Pertama, kita perlu mendapatkan rujukan kepada jadual. Kita boleh menggunakan kaedah getElementById untuk mendapatkan elemen jadual. getElementById 方法来获得表格元素。

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

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

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

接下来，让我们实现排序函数 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]);
  }
}

在这个排序函数中，我们首先使用了 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
        
广州
      
      
    
  

Kemudian, kita perlu menambah acara klik pada setiap lajur jadual Apabila pengguna mengklik pada pengepala lajur, fungsi pengisihan akan dicetuskan.

rrreee

Seterusnya, mari laksanakan fungsi pengisihan Jadual Isih. Fungsi ini akan menerima dua parameter, satu ialah elemen jadual dan satu lagi ialah indeks lajur yang hendak diisih.

rrreee

Dalam fungsi pengisihan ini, kami mula-mula menggunakan kaedah Array.from untuk menukar baris jadual jenis HTMLCollection kepada tatasusunan. Kemudian, kami menggunakan kaedah isih untuk mengisih tatasusunan. Operasi pengisihan menggunakan atribut innerText atau textContent untuk mendapatkan kandungan teks sel jadual dan membandingkannya. Akhir sekali, kami menambah baris yang diisih kembali ke dalam jadual untuk melengkapkan pengisihan.

3. Lengkapkan kod contoh

Berikut ialah kod contoh lengkap:🎜rrreee🎜4 Kesimpulan🎜🎜Melalui contoh kod di atas, kami mempelajari cara menggunakan JavaScript untuk melaksanakan fungsi pengisihan jadual. Dengan menambahkan acara klik pada pengepala jadual dan memanggil fungsi pengisihan dalam pengendali acara, kami boleh melaksanakan fungsi pengisihan mengikut lajur yang berbeza. Dengan cara ini, pengguna boleh mengisih jadual dengan mudah untuk mencari data sasaran dengan lebih cepat. Saya harap artikel ini berguna kepada anda, terima kasih kerana membaca! 🎜

Atas ialah kandungan terperinci Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi pengisihan jadual?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!