hujung hadapan webhtml tutorialBagaimana untuk mendapatkan innerHTML sel menggunakan JavaScript DOM?
Dalam tutorial ini, kita akan belajar cara mendapatkan innerHTML sel menggunakan JavaScript DOM. Gunakan sifat innerHTML dalam JavaScript untuk mendapatkan innerHTML sel.
Kami boleh memanipulasi DOM (Model Objek Dokumen) dengan mudah menggunakan document.getElementById(). Ia adalah kaedah yang mengembalikan objek elemen yang mewakili id elemen yang disebut dalam parameter kaedah. Memandangkan setiap id teg adalah unik, kami boleh mengakses elemen dengan mudah melalui id. Kemudian atribut innerHTML akan membantu untuk mengakses teks atau kandungan tag itu
Gunakan koleksi sel meja
Untuk mengakses kandungan mana-mana sel dalam mana-mana jadual, kita perlu mengakses teg jadual menggunakan document.getElementById(). Kemudian berdasarkan nombor baris dan nombor lajur, kami akan mengakses sel khusus itu dan boleh mengakses kandungan menggunakan sifat innerHTML.
Kedua-dua nombor baris dan nombor lajur bermula dari 0, jadi jika kita ingin mengakses baris pertama, kita mesti menulis baris[0].
Pengguna boleh mendapatkan nilai atribut jenis pautan mengikut sintaks berikut.
Tatabahasa
let Cell= document.getElementById("id").rows[rowNumber].cells;
document.getElementById("result").innerHTML = Cell[colNumber].innerHTML
Dalam sintaks di atas, pengguna dapat melihat bahawa kami menggunakan document.getElementById().rows[] untuk mendapatkan akses kepada baris. Kemudian untuk mengakses sel, kami menulis sifat .cells. Kami mengakses kandungan sel menggunakan sifat innerHTML dalam baris seterusnya.
Contoh
Dalam contoh di bawah, kami telah mencipta jadual menggunakan teg jadual, tr dan td. Kemudian untuk mengakses jadual, kami menulis kaedah document.getElementById(). Untuk mengakses sel pertama (iaitu baris 1, lajur 1) kita mendapatkan baris[0] dan menyimpannya dalam pembolehubah "Sel". Kemudian, untuk mengakses kandungan, kami menggunakan Cell[0].innerHTML.
<html>
<head>
<style>
table,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<h3> Get the innerHTML of a cell <i> Using
document.getElementById()</i> </h3>
<p> Click the button to get the innerHTML of first cell </p>
<table id = "myTable">
<tr>
<td> Row1 Col1 Cell 1 </td>
<td> Row1 Col2 Cell 2 </td>
</tr>
<tr>
<td> Row2 Col1 Cell 3 </td>
<td> Row2 Col2 Cell 4 </td>
</tr>
<tr>
<td> Row3 Col1 Cell 5 </td>
<td> Row3 Col2 Cell 6 </td>
</tr>
</table>
<br>
<button onclick = " getCell()"> Click Here! </button>
<p id = "result"> Result Here </p>
<script>
function getCell() {
//Getting access to cell 1
let Cell = document.getElementById("myTable").rows[0].cells;
document.getElementById("result").innerHTML =
Cell[0].innerHTML
}
</script>
</body>
</html>
Seperti yang pengguna boleh lihat, selepas mengklik butang "Klik Di Sini", fungsi "getCell" dipanggil, yang mengakses kandungan sel pertama.
Gunakan atribut sel melalui input pengguna
Untuk mengakses kandungan mana-mana sel dalam mana-mana jadual, kita perlu mengakses teg jadual menggunakan document.getElementById(). Kemudian berdasarkan nombor baris dan nombor lajur, kami akan mempunyai akses kepada sel tertentu dan kami boleh mengakses kandungan menggunakan atribut innerHTML. Di sini kami menggunakan kaedah segera objek tetingkap untuk mendapatkan input pengguna. Bergantung pada pilihan pengguna, kami boleh mengakses sel.
Kedua-dua nombor baris dan nombor lajur bermula dari 0, jadi jika kita ingin mengakses baris pertama, kita mesti menulis baris[0].
Pengguna boleh mendapatkan nilai atribut jenis pautan mengikut sintaks berikut.
Tatabahasa
let row = window.prompt("Enter row number");
let column = window.prompt("Enter column number");
let Cell = document.getElementById('id').rows[row].cells;
document.getElementById("result").innerHTML = Cell[col].innerHTML
Dalam sintaks di atas, kami mendapat baris, lajur dan kandungan sel daripada pengguna dan mengakses kandungan tersebut dengan sewajarnya.
Contoh
Dalam contoh di bawah, kami telah mencipta jadual menggunakan teg jadual, tr dan td. Kemudian untuk mengakses jadual, kami menulis kaedah document.getElementById(). Seperti yang dinyatakan sebelum ini dalam sintaks, kami mendapat baris, lajur dan kandungan sel daripada pengguna dan menyimpannya dalam pembolehubah "baris", "col" dan "kandungan".
<html>
<head>
<style>
table,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<h3> Get the innerHTML of a cell using<i> document.getElementById()
</i>with user input </h3>
<p> Click the button to get innerHTML of a cell </p>
<table id = "myTable">
<tr>
<td> Row1 Col1 Cell 1 </td>
<td> Row1 Col2 Cell 2 </td>
</tr>
<tr>
<td> Row2 Col1 Cell 3 </td>
<td> Row2 Col2 Cell 4 </td>
</tr>
<tr>
<td> Row3 Col1 Cell 5 </td>
<td> Row3 Col2 Cell 6 </td>
</tr>
</table>
<br>
<button onclick="getCell()">Click Here!</button>
<p id ="result"> Result Here</p>
<script>
function getCell() {
let row = window.prompt("Enter row number: ", "0");
let col = window.prompt("Enter column number", "0")
let Cell =
document.getElementById('myTable').rows[row].cells;
document.getElementById("result").innerHTML =
Cell[col].innerHTML
}
</script>
</body>
</html>
Dalam tutorial ini, kami membincangkan cara untuk mendapatkan innerHTML sel menggunakan JavaScript DOM. Kami mula-mula mengakses jadual menggunakan kaedah document.getElementByID(). Kemudian kami menggunakan sifat baris untuk mendapatkan koleksi semua baris. Dalam koleksi baris, kami menggunakan sifat sel untuk mendapatkan koleksi sel. Pada koleksi sel kita boleh menggunakan indeks untuk mendapatkan sel tertentu.
Atas ialah kandungan terperinci Bagaimana untuk mendapatkan innerHTML sel menggunakan JavaScript DOM?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
HTML: Membina struktur laman webApr 14, 2025 am 12:14 AMHTML adalah asas struktur laman web bangunan. 1. HTML mentakrifkan struktur kandungan dan semantik, dan penggunaan, dan sebagainya. 2. Menyediakan penanda semantik, seperti, dan sebagainya, untuk meningkatkan kesan SEO. 3. Untuk merealisasikan interaksi pengguna melalui tag, perhatikan pengesahan bentuk. 4. Gunakan elemen lanjutan seperti, digabungkan dengan JavaScript untuk mencapai kesan dinamik. 5. Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan, dan alat pengesahan diperlukan. 6. Strategi pengoptimuman termasuk mengurangkan permintaan HTTP, memampatkan HTML, menggunakan tag semantik, dll.
Dari teks ke laman web: Kekuatan HTMLApr 13, 2025 am 12:07 AMHTML adalah bahasa yang digunakan untuk membina laman web, menentukan struktur laman web dan kandungan melalui tag dan atribut. 1) HTML menganjurkan struktur dokumen melalui tag, seperti,. 2) Penyemak imbas menghancurkan HTML untuk membina DOM dan menjadikan laman web. 3) Ciri -ciri baru HTML5, seperti, meningkatkan fungsi multimedia. 4) Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan. 5) Cadangan pengoptimuman termasuk menggunakan tag semantik dan mengurangkan saiz fail.
Memahami HTML, CSS, dan JavaScript: Panduan PemulaApr 12, 2025 am 12:02 AMWebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.
Peranan HTML: Penstrukturan Kandungan WebApr 11, 2025 am 12:12 AMPeranan HTML adalah untuk menentukan struktur dan kandungan laman web melalui tag dan atribut. 1. HTML menganjurkan kandungan melalui tag seperti, menjadikannya mudah dibaca dan difahami. 2. Gunakan tag semantik seperti, dan lain -lain untuk meningkatkan kebolehcapaian dan SEO. 3. Mengoptimumkan kod HTML boleh meningkatkan kelajuan pemuatan laman web dan pengalaman pengguna.
HTML dan Kod: Melihat lebih dekat pada istilahApr 10, 2025 am 09:28 AMHtmlisaspecifictypeofcodefocusedonstructuringwebcontent, manakala "kod" secara meluas ini
HTML, CSS, dan JavaScript: Alat penting untuk pemaju webApr 09, 2025 am 12:12 AMHTML, CSS dan JavaScript adalah tiga tiang pembangunan web. 1. HTML mentakrifkan struktur laman web dan menggunakan tag seperti, dan sebagainya. 2. CSS mengawal gaya laman web, menggunakan pemilih dan atribut seperti warna, saiz font, dan lain-lain.
Peranan HTML, CSS, dan JavaScript: Tanggungjawab TerasApr 08, 2025 pm 07:05 PMHTML 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.
Adakah HTML mudah belajar untuk pemula?Apr 07, 2025 am 12:11 AMHTML 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.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
SublimeText3 Linux versi baharu
SublimeText3 Linux versi terkini
Penyesuai Pelayan SAP NetWeaver untuk Eclipse
Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Dreamweaver Mac版
Alat pembangunan web visual
DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini
