Baru-baru ini saya membaca tiga buku O'Reilly, yang biasa kita sebut beast books (nama salah satu teman sekelas saya mirip sekali dengan nama saya, haha), dan saya selalu ingin membuat sampel untuk melatih keterampilan saya, karena banyak perusahaan menggunakan formulir dinamis, jadi, saya mencoba menggunakan js untuk membuat formulir dinamis, dan menggunakan browser firfox untuk men-debugnya, karena plugin firbug lebih baik digunakan. Awalnya, saya ingin mengimplementasikan fungsi kecil, tetapi saya tidak melakukannya ingin melakukan begitu banyak, cukup klik tombol untuk menambahkan baris, dan kemudian semakin banyak yang ditambahkan, dan menjadi semakin indah. Posting kode sumbernya agar semua orang bisa belajar bersama. Jika Anda memiliki pertanyaan, Anda bisa memperbaikinya.
ps: Entah kenapa nomor baris di atas tidak ditampilkan. Catatannya ditulis dengan jelas dan semua orang dapat belajar bersama.
Copy kode kodenya sebagai berikut:
<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transisi.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8" />
<title>Tabel Dinamis</title>
<gaya tipe="teks/css">
isi{ warna-latar belakang:#9CC; perataan teks:tengah}
tabel{ margin:10px otomatis;}
tr th { batas: 1px padat #096;}
td{batas: 1px padat #096;}
</gaya>
<skrip tipe="teks/javascript">
/*Hanya beberapa variabel yang dapat dideklarasikan di luar fungsi, dan metode operasi tidak dapat digunakan karena tidak ada fungsi untuk memanggil dan menjalankannya. */
//Saat memuat halaman, letakkan kotak pilihan di header tabel, karena hanya sekali pakai
jendela.onload = fungsi(){
var tab = dokumen.getElementById('tab');
var firsttr = dokumen.getElementsByTagName('tr')[0];
var childtd = firsttr.childNodes;
//Tambahkan kotak pilihan ke baris dan kolom pertama
var inp = dokumen.createElement('input');
inp.type = 'kotak centang';
//Pendaftaran acara DOM Level 2
catchEvent(inp,'click',function(){ //Daftarkan fungsi untuk menilai status yang berbeda
if(inp.diperiksa ==benar){
semuaPilih();
}kalau tidak{
batalPilih();
}
});
//catchEvent(inp,'klik',semuaPilih);
//catchEvent(inp,'perubahan',cancelSelect);
anaktd[0].appendChild(inp);
}
//Tambahkan satu baris
//var count =0;//Tambahkan kolom untuk penghitungan
fungsi addRow(){
//hitung++;
var tab = dokumen.getElementById('tab');
var firsttr = dokumen.getElementsByTagName('tr')[0];
var childtd = firsttr.childNodes;
var tr = dokumen.createElement('tr');
var arrtd = Array baru();
var arrinp = Array baru();
for(var i =0;i<childtd.length;i++){
arrtd[i] = dokumen.createElement('td');
arrinp[i] = dokumen.createElement('input');
jika(saya==0){
arrinp[i].type = 'kotak centang';
arrinp[i].nama = 'kotak pilih';
}lainnya jika(i==1){
//arrinp[i] = dokumen.createTextNode(hitungan);
arrinp[i] = dokumen.createTextNode('');
}
arrtd[i].appendChild(arrinp[i]);//Pikirkan mengapa input juga perlu menambahkan array.
tr.appendChild(arrtd[i]);
}
tab.appendChild(tr);
Sortir baru();
}
//operasi penghapusan
fungsi deleteRow(){
var parentTr = new Array();//Pertama masukkan baris yang dipilih ke dalam array
var box = document.getElementsByName('kotak pilih');
var tab = dokumen.getElementById('tab');
for(var i = 0;i<kotak.panjang;i++){
if(kotak[i].dicentang==benar){
var induk = kotak[i].parentNode;
parentTr[i] = parent.parentNode;//Jika ini ditempatkan langsung di dalam, mengapa tidak dapat dihapus sepenuhnya? ? Apakah karena responnya kurang?
//tab.removeChild(parentTr);
}
}
for(var i = 0;i<parentTr.length;i++){ //Ini akan menghapus semua item yang dipilih
if(parentTr[i]){ //Di sini kita harus terlebih dahulu menentukan apakah nilainya null. Jika bukan null, hapus saja. Jika tidak, kesalahan akan dilaporkan.
tab.removeChild(parentTr[i]);
}
}
Sortir baru();
}
//Jika penghapusan dilakukan, urutkan ulang
fungsi Sortir baru(){
var teks = Array baru();
var child_td = Array baru();
var arr_tr = dokumen.getElementsByTagName('tr');
for(var i = 1;i<arr_tr.panjang;i++){
child_td[i] = arr_tr[i].childNodes[1];//Dapatkan semua node di kolom kedua mulai dari baris kedua
if(child_td[i].childNodes[0]){
child_td[i].removeChild(child_td[i].childNodes[0]);
}
teks[i] = dokumen.createTextNode(i);
child_td[i].appendChild(teks[i]);
}
}
//pilih semua operasi
fungsi semuaPilih(){
var box = document.getElementsByName('kotak pilih');
for(var i= 0;i<kotak.panjang;i++){
kotak[i].dicentang = benar;
}
}
//Batalkan semua pilihan
fungsi batalPilih(){
var box = document.getElementsByName('kotak pilih');
for(var i = 0;i<kotak.panjang;i++){
if(kotak[i].dicentang == benar){
kotak[i].dicentang =salah;
}
}
}
//Fungsi registrasi acara
fungsi catchEvent(eventobj,event,eventHandler){
if(eventobj.addEventListener){
eventobj.addEventListener(acara,eventHandler,false);
}else if(eventobj.attachEvent){
acara = 'di'+acara;
eventobj.attachEvent(acara,eventHandler);
}
}
//catchEvent(tambah,'klik',tambahbaris);
</skrip>
</kepala>
<tubuh>
<h3>Tabel dinamis</h3>
<input type="button" value="Tambahkan" id="tambahkan" onclick="addRow()" />
<input type="button" value="Pilih semua" onclick="allSelect()" />
<input type="button" value="Batalkan semua" onclick="cancelSelect()" />
<input type="button" value="Hapus" id="hapus" onclick="deleteRow()"/>
<tabel id="tab" cellpadding="5px" Cellspacing="0px">
<tr><td></td><td>Nomor seri</td><td>Pertanyaan pertama</td><td>Pertanyaan kedua</td><td>Pertanyaan ketiga</td></tr>
</tabel>
</tubuh>
</html></span>