Tutorial Dom Dasar: Menggunakan Tabel Kontrol DOM

Saya tidak akan berbicara tentang kontrol CSS meja untuk saat ini. Pertama, saya akan membagikan DOM yang umum digunakan dalam tabel di bawah ini.

Metode yang umum digunakan untuk menambahkan operasi tabel adalah metode insertrow () dan insertCell ().

Baris dihitung dari nol, misalnya:

Salin kode sebagai berikut: var otr = document.geteLementById ("anggota"). InserTrow (2)

Itu berarti menambahkan baris baru ke baris kedua.

Salinan kode adalah sebagai berikut:

var atext = array baru ();

atext [0] = document.createTextNode ("fresheggs");

atext [1] = document.createTextNode ("w610");

atext [2] = document.createTextNode ("5 Nov");

atext [3] = document.createTextNode ("scorpio");

atext [4] = document.createTextNode ("1038818");

untuk (var i = 0; i <attext.length; i ++) {

var otd = otr.insertcell (i);

OTD.AppendChild (ATEXT [i]);

}

Variabel OTR menyisipkan baris baru untuk tabel, kemudian menggunakan InsertCell untuk memasukkan data baru untuk baris ini, menggunakan CreateTextNode untuk membuat node teks baru, dan memberikannya ke OTD di AppendChild, dan OTD adalah sel baru.

1. Masukkan baris (Tabel Tambah Dinamis)

Salinan kode adalah sebagai berikut:

<type skrip = "Teks/JavaScript">

window.onload = function () {

var otr = document.getElementById ("anggota"). InserTrow (2); // Masukkan baris

var atext = array baru ();

atext [0] = document.createTextNode ("fresheggs");

atext [1] = document.createTextNode ("w610");

atext [2] = document.createTextNode ("5 Nov");

atext [3] = document.createTextNode ("scorpio");

atext [4] = document.createTextNode ("1038818");

untuk (var i = 0; i <attext.length; i ++) {

var otd = otr.insertcell (i);

OTD.AppendChild (ATEXT [i]);

}

}

</script>

<Table Ringkasan = "Daftar Anggota di EE Sunday" ID = "Anggota">

<Caption> Daftar Anggota </comption>

<tr>

<tH scope = "col"> name </th>

<tH scope = "col"> class </t>

<tH scope = "col"> ulang tahun </t>

<TH scope = "col"> Constellation </t>

<tH scope = "col"> mobile </t>

</tr>

<tr>

<td> Isaac </td>

<td> W13 </td>

<td> 24 Jun </td>

<td> kanker </td>

<td> 1118159 </td>

</tr>

<tr>

<td> girlwing </td>

<td> W210 </td>

<td> 16 Sep </td>

<td> virgo </td>

<td> 1307994 </td>

</tr>

<tr>

<td> Tasestory </td>

<td> W15 </td>

<td> 29 Nov </td>

<td> sagitarius </td>

<td> 1095245 </td>

</tr>

</boable>

2. Ubah konten tabel

Setelah tabel dibuat, Anda dapat secara langsung menggunakan htmldom untuk mengoperasikan tabel, yang lebih nyaman daripada document.getElementById () dan document.geteLementsbyTagname ().

otable.rows [i] .cell [j]

Di atas dapat dengan mudah mengakses kolom I-TH dan kolom ke-tH dari tabel melalui dua baris atribut dan sel (keduanya dihitung dari 0). Setelah mendapatkan objek sel, Anda dapat menggunakan atribut InnerHTML untuk memodifikasi konten Xiangyu.

Misalnya, ubah konten 4 baris dan 5 kolom menjadi bagus

Maka Anda dapat menggunakan kode berikut

Salinan kode adalah sebagai berikut:

var otable = document.getElementById ("table1");

otable.rows [4] .cells [5] .innerHtml = "Good";

3. Hapus Isi Tabel

Karena tabel memiliki fungsi menambahkan, memodifikasi, dan menghapusnya.

Menghapus baris dalam tabel menggunakan metode deleterow (i), di mana saya adalah nomor baris.

Menghapus kolom dalam tabel menggunakan metode TR DELETECELL (J).

Kode berikut menunjukkan baris kedua dari tabel yang dihapus dan kolom kedua dari baris ketiga dari tabel asli

Salinan kode adalah sebagai berikut: var otable = document.geteLementById ("table1"); otable.deleterow [2]; otable.rows [2] .deleteCell [3];

Kode berikut menunjukkan bahwa jika baris kedua tabel dihapus dan kolom kedua dari baris ketiga tabel asli dianggap memiliki penghapusan dinamis dan tidak mempengaruhi keseluruhan kerangka kerja HTML, atau jika konten tabel banyak, penghapusan dinamis dan penambahan dapat diadopsi.

Salinan kode adalah sebagai berikut:

<type skrip = "Teks/JavaScript">

window.onload = function () {

var otr = document.getElementById ("anggota"). InserTrow (2); // Masukkan baris

var atext = array baru ();

atext [0] = document.createTextNode ("fresheggs");

atext [1] = document.createTextNode ("w610");

atext [2] = document.createTextNode ("5 Nov");

atext [3] = document.createTextNode ("scorpio");

atext [4] = document.createTextNode ("1038818");

untuk (var i = 0; i <attext.length; i ++) {

var otd = otr.insertcell (i);

OTD.AppendChild (ATEXT [i]);

}

}

</script>

<Table Ringkasan = "Daftar Anggota di EE Sunday" ID = "Anggota">

<Caption> Daftar Anggota </comption>

<tr>

<tH scope = "col"> name </th>

<tH scope = "col"> class </t>

<tH scope = "col"> ulang tahun </t>

<TH scope = "col"> Constellation </t>

<tH scope = "col"> mobile </t>

</tr>

<tr>

<td> Isaac </td>

<td> W13 </td>

<td> 24 Jun </td>

<td> kanker </td>

<td> 1118159 </td>

</tr>

<tr>

<td> girlwing </td>

<td> W210 </td>

<td> 16 Sep </td>

<td> virgo </td>

<td> 1307994 </td>

</tr>

<tr>

<td> Tasestory </td>

<td> W15 </td>

<td> 29 Nov </td>

<td> sagitarius </td>

<td> 1095245 </td>

</tr>

</boable>

Hapus kolom

Salinan kode adalah sebagai berikut:

function deletecolumn (oTable, inum) {

// Kustomisasi fungsi penghapusan kolom, yaitu, hapus sel yang sesuai untuk setiap baris

untuk (var i = 0; i <otable.rows.length; i ++)

otable.rows [i] .deleteCell (inum);

}

window.onload = function () {

var otable = document.getElementById ("table1");

Deletecolumn (Otable, 2);

}

Untuk menghapus kolom tabel, tidak ada metode yang dapat dipanggil secara langsung di DOM. Anda perlu menulis metode deletecolumn () sendiri. Metode ini menerima dua parameter, satu parameter adalah objek tabel, dan parameter lainnya adalah nomor kolom yang ingin Anda hapus. Metode penulisan sangat sederhana. Menggunakan metode DELETECELL (), setiap baris mengeksekusi metode penghapusan sel yang sesuai.