Menambah row dan column dalam table menggunakan javascript

Menambah row dan column dalam table menggunakan javascript

Oleh sufian_yusuff Dikirim pada Wednesday 21 March 2007 Tweet
Javascript ini boleh menambah row dan column ke dalam table sedia ada. Masukkan Javascript ini dibahagian HEAD KOD <script type="text/javascript"> // Skrip untuk tambah column dalam table sedia ada function simpanData(namaTable) { var A = document.getElementById("nama").value var B = document.getElementById("tel").value var C = document.getElementById("tel2").value var D = document.getElementById("hp").value var E = document.getElementById("alamat").value var tbl = document.getElementById('namaTable'); var newRow = document.getElementById('namaTable').insertRow(tbl.rows.length); var V = newRow.insertCell(0) var W = newRow.insertCell(1) var X = newRow.insertCell(2) var Y = newRow.insertCell(3) var Z = newRow.insertCell(4) //display html V.innerHTML= A V.align="center" W.innerHTML= B W.align="center" X.innerHTML= C X.align="center" Y.innerHTML= D Y.align="center" Z.innerHTML= E Z.align="center" } </script> Berikut contoh kod HTML. Masukkan ke bahagian BODY KOD <h1>Contoh Skrip untuk menambah row dan column dengan menggunakan javascript</h1> <table id="namaTable" cellspacing='0' width='100%' style='border: 1px solid grey;border-collapse:collapse;' border='1'> <tr> <th>Nama</td> <th>No. Telefon Rumah</th> <th>No. Telefon Pejabat</th> <th>No. Telefon Bimbit</th> <th>Alamat Pejabat</th> </tr> </table> <br><br> <table cellspacing='0'> <tr><td>Nama</td><td>:</td><td><input type="text" size="15" id="nama" value="Mohd Safuan"></td></tr> <tr><td>No. Telefon Rumah</td><td>:</td><td><input type="text" size="15" id="tel" value="03-3456789"></td></tr> <tr><td>No. Telefon Pejabat</td><td>:</td><td><input type="text" size="15" id="tel2" value="03-12222221"></td></tr> <tr><td>No. Telefon Bimbit</td><td>:</td><td><input type="text" size="15" id="hp" value="013-34444443"></td></tr> <tr><td>Alamat Pejabat</td><td>:</td><td><textarea cols="15" rows="5" id="alamat">C12-9, Jalan Rahmat, Taman Besraya, 12300 Shah Alam Selangor. </textarea></td></tr> <tr><td colspan="3" align="center"> <input type="button" value="simpan" onClick="simpanData('namaTable')" size="20"></td></tr> </table> selamat mencuba!! Kongis ke Facebook Tweet! Tambah ke dalam Google Bookmarks Kongsi ke Reddit Kongsi ke del.icio.us Kongsi ke StumbleUpon Kongsi ke Blinklist Digg!

Senarai tutorial dalam kategori ini Kembali ke laman utama tutorial

Penilaian

Belum ada penilaian dibuat setakat ini

Sila Log-in untuk menghantar komen. Daftar jika belum menjadi ahli.

Artikel Terbaru

Tips Melindungi Komputer Dari Ancaman Virus
5 tips untuk anda melindungi komputer anda dari ancaman virus dan malware.

Mencipta Laman Kelab Peminat di Facebook
Langkah-langkah dan cara membuat laman peminat Facebook atau Fanpage. Facebook merupakan salah satu alat pemasaran dan penjenamaan yang paling efektif sekiranya anda gunakannya dengan bijak. Gunakan halaman Facebook untuk mempromosikan laman web atau blog anda.

Periksa Pautan Rosak dalam Wordpress
Dengan plugin Broken Link Checker, ia mampu untuk mengesan semua pautan-pautan rosak yang terdapat di dalam blog anda.

Lebih Dari Satu Homepage di Firefox
Menetapkan lebih dari satu halaman rumah (Homepage) di Mozilla Firefox untuk membuka lebih dari satu laman web sekaligus.

Memasang Rangkaian Wayarles (Wireless)
Panduan ini akan menunjukkan kepada anda langkah-langkah bagaimana untuk memasang rangkaian wayarles (wireless) yang selamat, mudah, cepat dan murah di rumah, makmal sekolah atau di pejabat.

Cara Pasang Plugin di Wordpress
Cara-cara memasang plugin di blog Wordpress menggunakan kaedah papan pemuka (Dashboard) dan kaedah FTP (File Transfer Protocol)

Ubah Wajah dengan Perfect365
Berikan imej baru ke atas wajah anda dengan perisian Makeover Perfect365.

Mengatasi Masalah Perkakasan dengan Troubleshooter
Sekiranya anda mendapati Windows 7 atau Windows Vista menghadapi isu perkakasan atau peranti, anda boleh menjalankan utiliti Troubleshooter. Troubleshooter akan secara automatik mencuba untuk mengenal pasti dan menyelesaikan masalah yang ada.

Kemaskini PC berasaskan Intel
Menggunakan utiliti Intel Driver Update untuk mengemaskini sistem anda secara automatik.

Mengaktif File History dalam Windows 8
Sebelum melakukan pendua (backup) ke atas data-data persendirian, anda perlu mengaktif terlebih dahulu opsyen File History. Tutorial ini akan menunjukkan cara-cara mengaktif File History dalam Windows 8.

Disiarkan di KOSMO!