hujung hadapan web
html tutorial
Bagaimana untuk menambah baris ke jadual menggunakan JavaScript DOM?
Bagaimana untuk menambah baris ke jadual menggunakan JavaScript DOM?
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 Nilai pulangan − Elemen yang dimasukkan. Seperti yang kita ketahui, jadual yang betul bukan sahaja mempunyai baris jadual ( Berikut ialah sintaks untuk memasukkan sel: Nilai pulangan − Elemen yang dimasukkan. 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. Dalam contoh ini, kami mempunyai jadual yang mengandungi nama pelajar dan umur mereka. Kami akan menambah pelajar baharu di hujung jadual. Dalam kaedah ini kita akan mencipta baris dan lajur baharu menggunakan kaedah document.createElement(). 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 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! Apl berkuasa AI untuk mencipta foto bogel yang realistik Alat AI dalam talian untuk mengeluarkan pakaian daripada foto. Gambar buka pakaian secara percuma Penyingkiran pakaian AI Menjana ai hentai secara percuma. Editor kod yang mudah digunakan dan percuma Versi Cina, sangat mudah digunakan Persekitaran pembangunan bersepadu PHP yang berkuasa Alat pembangunan web visual Perisian penyuntingan kod peringkat Tuhan (SublimeText3) Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159 Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex Artikel ini membincangkan tag Meta Viewport, penting untuk reka bentuk web responsif pada peranti mudah alih. Ia menerangkan bagaimana penggunaan yang betul memastikan skala kandungan yang optimum dan interaksi pengguna, sementara penyalahgunaan boleh membawa kepada isu reka bentuk dan kebolehaksesan. Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API. HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran. HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni. Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom. 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)
), tetapi juga dokumen jadual yang dipanggil sel jadual ( ). Untuk memasukkan sel dalam satu baris, kami menggunakan kaedah insertCell(). Ia mencipta elemen dalam baris jadual. Ia menerima nombor sebagai hujah, menentukan indeks sel dalam baris. Tatabahasa
table.insertCell(index)
Langkah untuk menambah baris pada jadual
Contoh
diterjemahkan sebagai: Contoh
<!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
Kaedah
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>
Alat AI Hot
Undresser.AI Undress
AI Clothes Remover
Undress AI Tool
Clothoff.io
AI Hentai Generator
Artikel Panas
Alat panas
Notepad++7.3.1
SublimeText3 versi Cina
Hantar Studio 13.0.1
Dreamweaver CS6
SublimeText3 versi Mac
Topik panas
1382
52
Apakah tujuan & lt; kemajuan & gt; unsur?
Mar 21, 2025 pm 12:34 PM
Apakah tujuan & lt; DATALIST & GT; unsur?
Mar 21, 2025 pm 12:33 PM
Apakah tujuan & lt; meter & gt; unsur?
Mar 21, 2025 pm 12:35 PM
Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif?
Mar 20, 2025 pm 05:56 PM
Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?
Mar 20, 2025 pm 06:05 PM
Adakah HTML mudah belajar untuk pemula?
Apr 07, 2025 am 12:11 AM
Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras
Apr 08, 2025 pm 07:05 PM
Apakah contoh tag permulaan dalam html?
Apr 06, 2025 am 12:04 AM
