Contoh borang pengendalian dom (borang penciptaan dom)_HTML/Xhtml_Pengeluaran halaman web

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:

<script><br>window.onload=function(){<br>//Gunakan HTMLDOM untuk mendapatkan elemen jadual<br>vartable =document.getElementsByTagName ('jadual')[0];//Dapatkan rujukan jadual</p> <p>//Tekan HTMLDOM untuk memadamkan tajuk, pengepala jadual, pengaki jadual, baris dan sel<br>//table.deleteCaption();//Padam tajuk<br>//table.deleteTHead(); // Padam<thead><br>//table.tBodies[0].deleteRow(0);//Delete<tr>satu baris<br>//table.tBodies[0].rows[0].deleteCell( 0 );//Padam<td>a sel<br>//table.tBodies[0].rows[0].deleteCell(1);//Memadam kandungan sel adalah sama dengan memadamkan grid sel, I harap perkara berikut akan ditambah <br>};<br></script>

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.

Kenyataan：

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 sebelumnya：Panggil fungsi js atau pembolehubah js dalam img src="" html untuk menentukan secara dinamik laluan imej_HTML/Xhtml_penghasilan halaman webArtikel seterusnya：Panggil fungsi js atau pembolehubah js dalam img src="" html untuk menentukan secara dinamik laluan imej_HTML/Xhtml_penghasilan halaman web

Artikel berkaitan

Lihat lagi

• Html小知识总结
• 如何快速学习HTML
• html xhtml xml的区别
• src与href属性的区别
• 关于HTML5和CSS替换使用

Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

Tentang kitaPenafianSitemap

© php.cn All rights reserved