Tutorial Asas DOM: Menggunakan DOM untuk Mengawal Pengetahuan Forms_Basic

Saya tidak akan bercakap tentang kawalan css jadual buat masa ini, mari kita kongsikan DOM jadual yang biasa digunakan

Kaedah yang biasa digunakan untuk operasi penambahan jadual ialah kaedah insertRow() dan insertCell().

baris dikira daripada sifar, contohnya:

Salin kod Kod adalah seperti berikut: var oTr = document.getElementById("member"). insertRow(2 ) bermaksud menambah baris baharu pada baris kedua.

Salin kod Kod adalah seperti berikut: var aText = new Array(); 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 var oTd = oTr.insertCell(i); oTd.appendChild(aTeks[i]); }

Pembolehubah oTr ialah untuk memasukkan baris baharu ke dalam jadual, kemudian gunakan insertCell untuk memasukkan data baharu bagi baris ini, gunakan createTextNode untuk mencipta nod teks baharu dan berikannya kepada oTd dalam appendChild, oTd ialah sel baharu.

1 Sisipkan baris (tambah jadual secara dinamik)

Salin kod Kod adalah seperti berikut: window.onload=function(){ var oTr = document.getElementById("ahli").insertRow(2); //插入一行 var aText = new Array(); 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 var oTd = oTr.insertCell(i); oTd.appendChild(aTeks[i]); } } Senarai Ahli Nama Kelas Birthday Constellation Mobile isaac W13 24 Jun Kanser 1118159 girlwing W210 16 Sep Virgo 1307994 tastestory W15 29 Nov Sagittarius 1095245 2.修改表格的内容

当表格建立后，可以直接使用HtmlDom对表格进行操作，相比document.getElementById(),document.getmes作中文更更有一作中文便。 oTable.rows[i].sel[j] 以上通过rows、cells两个属性轻松访问到表格特定的内容第i行和第j列(都是从0)开家格对象后就可以使用innerHTML属性修改翔宇的内容了。 例如修改4行5列的内容为baik 则可以使用以下代码

复制代码 代码如下: var oTable = document.getElementById("table1"); oTable.rows[4].cells[5].innerHTML = "good"; 3.删除表格内容

表格既然有添加、修改、就有删除功能。 表格中删除行使用deleteRow(i)方法，其中i为行号。 表格中删除列使用tr的deleteCell(j)方法。

如下代码表示删除表格的第二行及原来表格第三行的第二列

复制代码 代码如下: var oTable = document.getElementById("table1"); oTable.deleteRow[2]; oTable.rows[2].deleteCell[3]; Kod berikut mewakili pemadaman baris kedua jadual dan lajur kedua baris ketiga jadual asal Memandangkan pemadaman dinamik tidak menjejaskan keseluruhan rangka kerja HTML, atau apabila jadual mempunyai banyak kandungan , pemadaman dan penambahan dinamik boleh digunakan

Salin kod Kod adalah seperti berikut: window.onload=function(){ var oTr = document.getElementById("ahli").insertRow(2); //Sisipkan baris var aText = new Array(); 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 var oTd = oTr.insertCell(i); oTd.appendChild(aTeks[i]); } } Senarai Ahli Class

Padam lajur

Salin kod

Kod adalah seperti berikut: fungsi deleteColumn(oTable, iNum) { // Padamkan fungsi lajur secara tersuai, iaitu, padamkan sel yang sepadan setiap baris untuk (var i = 0; i oTable.rows[i].deleteCell(iNum); } window.onload = function() { var oTable = document.getElementById("table1"); deleteColumn(oTable, 2); } Untuk memadamkan lajur jadual, tiada kaedah yang boleh dipanggil secara langsung dalam DOM Anda perlu menulis sendiri kaedah deleteColumn() Kaedah ini menerima dua parameter, satu parameter ialah objek jadual, dan parameter lain ialah lajur anda mahu padam Nombor. Kaedah penulisan adalah sangat mudah Menggunakan kaedah deleteCell(), setiap baris melaksanakan kaedah yang sepadan untuk memadam sel.