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.
Penciptaan dan pengubahsuaian jadual asas
Jadual terdiri daripada tag HTML
, , , , < ;tr>,
dan
. Jika anda ingin membuat jadual secara dinamik, anda boleh menjana jadual dengan menambahkan teg ini.
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";
Salin selepas log masuk
Kod di atas menambah baris baharu pada jadual dan mengisi maklumat dalam setiap sel.
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);
Salin selepas log masuk
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.
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;
}
}
}
}
Salin selepas log masuk
Kod di atas melaksanakan fungsi yang mengisih mengikut lajur tertentu jadual. Parameter n yang diluluskan mewakili bilangan lajur untuk diisih.
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";
}
}
}
}
Salin selepas log masuk
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!
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
