Rumah > Artikel > hujung hadapan web > Bagaimana untuk menambah baris ke jadual menggunakan JavaScript DOM?
Bagaimana untuk menambah baris ke jadual menggunakan JavaScript DOM?
- PHPzke hadapan
- 2023-09-16 17:57:071180semak imbas
Kami akan belajar cara menambah baris pada jadual menggunakan JavaScript dom. Untuk mencapai matlamat ini, kami mempunyai beberapa kaedah. Antaranya adalah seperti berikut:
Gunakan kaedah insertRow()
Dengan mencipta elemen baharu
Gunakan kaedah insertRow()
Gunakan kaedah insertRow() untuk memasukkan baris baharu pada permulaan jadual. Ia mencipta elemen a34de1251f0d9fe1e645927f19a896e8 baharu dan memasukkannya ke dalam jadual. Ia menerima nombor sebagai parameter, menentukan kedudukan jadual. Jika kita tidak melepasi sebarang parameter, baris akan dimasukkan pada permulaan jadual. Jika anda ingin memasukkan baris di hujung jadual, lulus -1 sebagai parameter.
Tatabahasa
table.insertRow(index)
Nilai pulangan − Elemen yang dimasukkan.
Seperti yang kita ketahui, jadual yang betul bukan sahaja mempunyai baris jadual (a34de1251f0d9fe1e645927f19a896e8), tetapi juga dokumen jadual yang dipanggil sel jadual (b6c5a531a458a2e790c1fd6421739d1c). Untuk memasukkan sel dalam satu baris, kami menggunakan kaedah insertCell(). Ia mencipta elemen b6c5a531a458a2e790c1fd6421739d1c dalam baris jadual. Ia menerima nombor sebagai hujah, menentukan indeks sel dalam baris.
Tatabahasa
Berikut ialah sintaks untuk memasukkan sel:
table.insertCell(index)
Nilai pulangan − Elemen yang dimasukkan.
Langkah untuk menambah baris pada jadual
Dapatkan elemen jadual data.
Gunakan kaedah insertRow untuk mencipta baris dan memasukkannya ke dalam jadual.
Gunakan kaedah insertCell untuk mencipta sel baharu dan masukkannya ke dalam baris yang anda buat.
Tambah data pada sel yang baru dibuat.
Contoh
diterjemahkan sebagai:Contoh
Dalam contoh ini, kami mempunyai jadual yang mengandungi nama pelajar dan umur mereka. Kami akan menambah pelajar baharu di hujung jadual.
<!DOCTYPE html>
<html>
<head>
<title> Example- add rows to a table using JavaScript DOM </title>
<style>
table,
td,
th {
border: 1px solid black;
}
</style>
</head>
<body>
<h2> Adding rows to a table using JavaScript DOM </h2>
<p> Click on the button to add the row to the table </p>
<button id="btn" onclick="addRow()"> Click me </button>
<br><br>
<table id="myTable">
<thead>
<th> Name </th>
<th> Age </th>
<th> City </th>
</thead>
<tbody>
<tr>
<td> Alex </td>
<td> 20 </td>
<td> New York </td>
</tr>
<tr>
<td> Tim </td>
<td> 18 </td>
<td> Boston </td>
</tr>
<tr>
<td> Mark </td>
<td> 23 </td>
<td> San Diego </td>
</tr>
</tbody>
</table>
</body>
<script>
function addRow() {
// Get the table element in which you want to add row
let table = document.getElementById("myTable");
// Create a row using the inserRow() method and
// specify the index where you want to add the row
let row = table.insertRow(-1); // We are adding at the end
// Create table cells
let c1 = row.insertCell(0);
let c2 = row.insertCell(1);
let c3 = row.insertCell(2);
// Add data to c1 and c2
c1.innerText = "Elon"
c2.innerText = 45
c3.innerText = "Houston"
}
</script>
</html>
Dengan mencipta elemen baharu
Dalam kaedah ini kita akan mencipta baris dan lajur baharu menggunakan kaedah document.createElement().
Kaedah
Berikut ialah langkah untuk menambah baris pada jadual dengan mencipta elemen.
Dapatkan elemen badan jadual untuk menambah baris
Buat elemen baris
Buat sel dan masukkan data ke dalam sel
Tambahkan sel pada baris
Tambahkan baris pada badan meja
Contoh
diterjemahkan sebagai:Contoh
<html>
<head>
<title> Example- add rows to a table using JavaScript DOM </title>
<style>
table,
td,
th {
border: 1px solid black;
}
</style>
</head>
<body>
<h2> Adding rows to a table using JavaScript DOM </h2>
<p>Click on the button to add the row to the table </p>
<button id="btn" onclick="addRow()"> Click me </button>
<br><br>
<table id="myTable">
<thead>
<th> Name </th>
<th> Age </th>
<th> City </th>
<th> Course </th>
</thead>
<tbody id="tableBody">
<tr>
<td> Alex </td>
<td> 20 </td>
<td> New York </td>
<td> Java </td>
</tr>
<tr>
<td> Tim </td>
<td> 18 </td>
<td> Boston </td>
<td> Python </td>
</tr>
<tr>
<td> Mark </td>
<td> 23 </td>
<td> San Diego </td>
<td> JavaScript </td>
</tr>
</tbody>
</table>
</body>
<script>
function addRow() {
// Get the table body element in which you want to add row
let table = document.getElementById("tableBody");
// Create row element
let row = document.createElement("tr")
// Create cells
let c1 = document.createElement("td")
let c2 = document.createElement("td")
let c3 = document.createElement("td")
let c4 = document.createElement("td")
// Insert data to cells
c1.innerText = "Elon"
c2.innerText = "42"
c3.innerText = "Houston"
c4.innerText = "C++"
// Append cells to row
row.appendChild(c1);
row.appendChild(c2);
row.appendChild(c3);
row.appendChild(c4);
// Append row to table body
table.appendChild(row)
}
</script>
</html>
Atas ialah kandungan terperinci Bagaimana untuk menambah baris ke jadual menggunakan JavaScript DOM?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!