Dalam pengembangan aplikasi, beberapa informasi input adalah dinamis, seperti pengalaman kerja yang ingin kami mendaftarkan karyawan, seperti angka berikut ini
Jika dibuat menjadi jalan buntu, Anda hanya bisa mengisi tiga, bagaimana jika itu empat? Atau lebih, bukankah tidak mungkin menambahkannya? Jadi ini tidak baik, kita dapat secara dinamis menambahkan baris tabel, seperti yang ditunjukkan pada gambar di bawah ini, menambahkan baris dan memasukkan deretan informasi, yang lebih fleksibel
Mari kita lihat cara menggabungkan JavaScript di ASP dan ASP.NET untuk mencapai efek ini:
Pertama -tama, penambahan tabel secara dinamis diimplementasikan di latar depan. Ketika stasiun berikutnya tersedia, itu mungkin terjadi, tetapi Ajax dapat digunakan, yang sangat merepotkan, jadi yang terbaik adalah menggunakan JavaScript untuk mengimplementasikannya. Berikut ini adalah dua cara untuk secara dinamis menambahkan baris tabel:
Tipe Pertama: Kode Sumber
Javascript:
<type script = "Text/JavaScript">/** // * Fungsi ini digunakan untuk menambahkan satu baris secara dinamis * Tabobj: Tabel target * colnum: Jumlah kolom yang dari baris pada tabel * sorpos: sumber baris baru. * Targpos: Posisi di mana baris baru akan ditambahkan. * */ function addRow (tabobj, colnum, sorpos, targpos) {var ntr = tabobj.inserTrow (tabobj.rows.length-targpos); // Masukkan baris baru ke tabel yang ditunjuk pada posisi // yang ditunjuk. var trs = tabobj.geteLementsByTagname ('tr'); // Dapatkan Koleksi TRS dari Tabel yang Ditunjuk Var STORTR = TRS [Sorpos]; // diposisikan sortr var tds = sortr.geteLementsbyTagname ('td'); // Dapatkan koleksi TDS dari baris yang ditunjuk jika (colnum == 0 || colnum == tidak terdefinisi || colnum == isnan) {colnum = tabobj.rows [0] .cells.length; } var ntd = array baru (); // Buat array TDS baru untuk (var i = 0; i <colnum; i ++) {// traverl tds di baris ntd [i] = ntr.insertcell (); // Buat sel baru NTD [i] .id = tds [0] .id; // Salin ID TD ke sel baru. | Perhatian! TDS // akhiran harus ditunjuk ntd [i] .innerhtml = tds [i] .innerHtml; // Salin ID TD ke sel baru. | Perhatian! TDS // akhiran harus ditunjuk ntd [i] .innerhtml = tds [i] .innerHtml; // copy the value in ntd[i]'s innerHTML from corresponding TDs } } /**//* This function is used to remove appointed row in appointed table * tabObj: the appointed table * targPos: target row position * btnObj: currently clicked delete image button * */ function deleteRow(tabObj,targPos,btnObj){ //Remove table row for(var i =0; i <tabobj.rows.length; i ++) {if (tabobj.geteLementsbyTagname ('img') [i] == btnobj) {tabobj.deleterow (i+targpos); }}}} </script>Html
<Table ID = TabuserInfo Border = 1> <tr> <td> Nama </td> <td> gender </td> <td> Usia </td> <td> host </td> <td> hapus </tr> </tr> <tryton = "Tampilan: Tidak Ada" id = truserinfo> </td = TR = TR/TRAYPUS: Tidak ada "ID = TRUSERINFO> </TD = TR = TR = TREN = TRENFO = TD = TD = TD = TD = TD = TD = TD = TD = TD = TD = TD = TD = TD = TD = TRUNFO> > </td> <td id = tduserInfo> <input id = userex name = Usersex> </td> <td id = tduserInfo> <input id = userage name = userage> </td id = tduserinfo> <input id id = userlove name = UserLove> </tdo = tduserinfo> <input id iD = userlove name = UserLove> </tdo = TDUSERINFO> <input ID = userlove name = UserLove> </tdo- tdUserInfo> <input ID = userlove name = USERLOVE> OnClick = "deleterow (document.all.tabuserInfo, 1, this)"> </td> </tr> <tr> <td> <input type = tombol value = "tambahkan" ontClick = "addRow (document.all.tabuserInfo, null, 1,1)"> </tdR> </tr> </tabel>