Contoh borang pengendalian dom (borang penciptaan dom)_HTML/Xhtml_Pengeluaran halaman web-html tutorial-php.cn

1. Cipta jadual menggunakan tag HTML:

Salin kod

Kodnya adalah seperti berikut:

Senarai Kakitangan

Nama🎜 < ;th>Jantina
Umur

;
Zhang San
Lelaki
20
<<> ;tr>
李思
Perempuan
22<./td>< 🎜>

Jumlah: N
>

teg kepala, tfoot dan kapsyen hanya boleh mempunyai satu teg tbody, tr, td dan ke dalam jadual N
dalam jadual
2. Gunakan DOM untuk mencipta jadual
Teg

ialah struktur paling kompleks dalam HTML. Kami boleh mencipta dan menjananya melalui DOM, atau mengendalikannya melalui HTMLDOM. (HTMLDOM menyediakan cara yang lebih mudah dan pantas untuk mengendalikan HTML)

Salin kod

Kod tersebut adalah seperti berikut:window. onload=function(){

vartable=document.createElement("table");

//Tambah atribut pada jadual

table.width=300;//Anda juga boleh menggunakan kaedah ini : table.setAttribute ('width',300)
table.border=1;

//Buat tajuk jadual
varcaption=document.createElement("caption");
table.appendChild(caption);

//Tambahkan kandungan pada tajuk jadual
//caption.innerHTML="Personnel Table";//Kaedah standard bukan W3c
varcaptionText=document.createTextNode("Personnel Table");
caption.appendChild(captionText);

//Barisan pertama jadual yang dibuat ialah baris tajuk
varthead=document.createElement("thead");
table.appendChild(thead);

vartr=document.createElement("tr");
thead.appendChild(tr);

//Column
varth1=document.createElement("th");
tr.appendChild(th1);
th1.innerHTML="data";
varth2=document.createElement ("th");
tr.appendChild(th2);
th2.innerHTML="data";

document.body.appendChild(table);
};

3. Gunakan DOM untuk mendapatkan data jadual (menggunakan DOM untuk mengendalikan jadual akan sangat menjengkelkan)

Salin kod

Kodnya adalah seperti berikut :window.onload=function(){vartable=document.getElementsByTagName("table")[0];

alert(table.children [0].innerHTML);

};

4. Gunakan HTMLDOM untuk mendapatkan data jadual (mudah, ringkas dan jelas).

Oleh kerana jadual adalah kompleks dan mempunyai banyak peringkat, adalah sangat tidak selesa untuk menggunakan DOM yang anda pelajari sebelum ini hanya untuk mendapatkan elemen tertentu, jadi ia akan menjadi lebih jelas menggunakan HTMLDOM.

Salin kod

Kod tersebut adalah seperti berikut:window.onload=function( ){//Gunakan HTMLDOM untuk mendapatkan elemen jadual

vartable=document.getElementsByTagName('table')[0];//Dapatkan rujukan jadual

//Tekan HTMLDOM untuk mendapatkan jadual < caption>

alert(table.caption.innerHTML);//Dapatkan kandungan kapsyen
//table.caption.innerHTML="Student table";//Anda juga boleh menetapkan nilai
} ;

Salin kod

Kod tersebut adalah seperti berikut:

window.onload=function(){
//Gunakan HTMLDOM untuk mendapatkan elemen jadual
vartable=document.getElementsByTagName('table')[0];//Dapatkan rujukan jadual
//Tekan HTMLDOM untuk mendapatkan pengepala jadual

,
alert(table.tHead);//Dapatkan pengepala jadual
alert(table.tFoot);//Dapatkan kaki meja< ; /p>

//Tekan HTMLDOM untuk mendapatkan badan jadual

alert(table.tBodies);//Dapatkan koleksi badan jadual
};

dan adalah unik dalam jadual, dan hanya boleh ada satu. Dan bukan satu-satunya tetapi boleh mempunyai berbilang, jadi akhirnya dikembalikan adalah rujukan elemen, manakala

Salin kod

Kod tersebut adalah seperti berikut:

window.onload=function( ){
//Gunakan HTMLDOM untuk mendapatkan elemen jadual
vartable=document.getElementsByTagName('table')[0];//Dapatkan rujukan jadual
//Tekan HTMLDOM untuk mendapatkan bilangan baris dalam table
alert( table.rows.length);//Dapatkan koleksi nombor baris, kuantiti

//Tekan HTMLDOM untuk mendapatkan bilangan baris dalam badan jadual
alert(table.tBodies[0].rows.length);//Dapatkan koleksi baris dalam kandungan, kuantiti
};

Salin kod

Kodnya adalah seperti berikut:

window.onload= function(){
//Gunakan HTMLDOM untuk mendapatkan elemen jadual
vartable=document.getElementsByTagName('table')[0];//Dapatkan rujukan jadual

//Tekan HTMLDOM untuk mendapatkan bilangan sel dalam baris pertama badan jadual (tr)
alert(table.tBodies[0].rows[0].cells.length);//Get yang pertama Bilangan sel baris
};

Salin kod

Kod adalah seperti berikut:

window.onload=function(){
//Gunakan HTMLDOM untuk mendapatkan elemen jadual
vartable=document.getElementsByTagName('table')[0];/ /Dapatkan rujukan jadual<

//Tekan HTMLDOM untuk mendapatkan kandungan sel pertama dalam baris pertama badan jadual (td)
alert(table.tBodies[0].rows[0].cells[0].innerHTML ) ;//Dapatkan kandungan sel pertama dalam baris pertama
};

Salin kod

Kodnya adalah seperti berikut:

5. Jadual penciptaan HTMLDOM

Salin kod

Kod tersebut adalah seperti berikut:

window.onload=function( ){
//Buat jadual mengikut HTMLDOM
vartable=document.createElement('table');
table.border=1;
table.width=300;

table.createCaption().innerHTML='Jadual kakitangan';

//table.createTHead();
//table.tHead.insertRow(0);
varthead=table.createTHead();//Kaedah ini mengembalikan rujukan
vartr=thead .insertRow(0);//Kaedah ini mengembalikan rujukan

vartd=tr.insertCell(0);
//td.appendChild(document.createTextNode('data'));//Cara untuk menambah data, anda juga boleh menggunakan kaedah berikut
td.innerHTML="data";
vartd2=tr.insertCell(1);
//td2.appendChild(document.createTextNode('data2'));
td2.innerHTML="data2 ";

document.body.appendChild(table);
};Apabila membuat jadual, tiada kaedah khusus untuk

, ,

dan anda perlu menggunakan document to menciptanya. Anda juga boleh mensimulasikan kaedah sedia ada dan menulis fungsi tertentu, seperti insertTH() dan seumpamanya.

Label berkaitan：

dom操作表格 dom创建表格

sumber：php.cn

Artikel sebelumnya：Panggil fungsi js atau pembolehubah js dalam img src="" html untuk menentukan secara dinamik laluan imej_HTML/Xhtml_penghasilan halaman web Artikel seterusnya：Tetapkan teks lalai kotak carian dan teks lalai hilang apabila tetikus diklik_HTML/Xhtml_Pengeluaran halaman web

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang