Bagaimana untuk menulis jadual dalam javascript

Dalam pembangunan bahagian hadapan, jadual adalah salah satu elemen yang paling biasa. JavaScript boleh digunakan untuk menjana jadual secara dinamik, yang memudahkan kawalan dan pengendalian jadual kami. Berikut ialah beberapa kaedah dan teknik biasa untuk membantu anda menulis jadual JavaScript dengan lebih baik.

1. Penciptaan dan pengubahsuaian jadual asas

Jadual terdiri daripada tag HTML f5d188ed2c074f8b944552db028f98a1, ae20bdd317918ca68efdc799512a9b39, 92cee25da80fac49f6fb6eec5fd2c22a, 06669983c3badb677f993a8c29d18845, < ;tr>, b4d429308760b6c2d20d6300079ed38e dan b6c5a531a458a2e790c1fd6421739d1c. Jika anda ingin membuat jadual secara dinamik, anda boleh menjana jadual dengan menambahkan teg ini.

Berikut ialah contoh mudah:

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
      <td>Los Angeles</td>
    </tr>
  </tbody>
</table>

Selepas jadual dibuat, ia boleh diubah suai. Contohnya, anda boleh menambah baris dan lajur baharu:

var table = document.getElementById("myTable");
var row = table.insertRow(2);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = "Bob";
cell2.innerHTML = "40";
cell3.innerHTML = "Chicago";

Kod di atas menambah baris baharu pada jadual dan mengisi maklumat dalam setiap sel.

2. Jana jadual berdasarkan data

Dalam pembangunan sebenar, kita mungkin perlu menjana jadual secara dinamik berdasarkan beberapa data. Katakan kita mempunyai tatasusunan JSON yang mengandungi beberapa maklumat pelajar, maka kami boleh menjana jadual secara dinamik dengan merentasi tatasusunan.

Berikut ialah contoh:

var students = [
  {name: "John", age: 25, city: "New York"},
  {name: "Jane", age: 30, city: "Los Angeles"},
  {name: "Bob", age: 40, city: "Chicago"}
];
var table = document.createElement("table");
var thead = document.createElement("thead");
var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
for (var key in students[0]) {
  var th = document.createElement("th");
  th.innerHTML = key.charAt(0).toUpperCase() + key.slice(1);
  tr.appendChild(th);
}
thead.appendChild(tr);
table.appendChild(thead);
for (var i = 0; i < students.length; i++) {
  var tr = document.createElement("tr");
  for (var key in students[i]) {
    var td = document.createElement("td");
    td.innerHTML = students[i][key];
    tr.appendChild(td);
  }
  tbody.appendChild(tr);
}
table.appendChild(tbody);
document.body.appendChild(table);

Kod di atas mula-mula mencipta elemen DOM yang mengandungi jadual, dan kemudian mencipta pengepala jadual dan badan jadual masing-masing. Semasa proses merentasi tatasusunan JSON, elemen ditambah baris demi baris mengikut format pengepala jadual dan badan jadual.

Perlu diambil perhatian bahawa bahagian tebal dalam kod digunakan untuk menggunakan huruf besar bagi setiap kekunci.

3. Isih jadual

Isih jadual ialah salah satu operasi yang paling biasa. Pengisihan jadual boleh dicapai melalui JavaScript.

Berikut ialah contoh:

function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  dir = "asc";
  while (switching) {
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("td")[n];
      y = rows[i + 1].getElementsByTagName("td")[n];
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount ++;
    } else {
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

Kod di atas melaksanakan fungsi yang mengisih mengikut lajur tertentu jadual. Parameter n yang diluluskan mewakili bilangan lajur untuk diisih.

4. Penapisan jadual

Penapisan jadual juga merupakan operasi biasa. Data dalam jadual boleh ditapis melalui JavaScript.

Berikut ialah contoh:

function filterTable() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

Kod di atas melaksanakan fungsi yang menapis data jadual berdasarkan nilai dalam kotak input. Dengan mendapatkan nilai dalam kotak input pengguna, dan kemudian melintasi kandungan setiap sel dalam jadual, jika kandungan mengandungi nilai yang dimasukkan oleh pengguna, baris data dikekalkan, jika tidak, ia disembunyikan.

Ringkasnya, perkara di atas ialah beberapa kod JavaScript yang biasa digunakan untuk membantu anda mengawal dan mengendalikan jadual dengan lebih mudah. Sudah tentu, dalam pembangunan sebenar, terdapat lebih banyak teknik dan kaedah, dan saya harap anda boleh meneroka dan mencubanya lebih banyak lagi.

Atas ialah kandungan terperinci Bagaimana untuk menulis jadual dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!