1. การโหลดตารางแบบไดนามิก
1. ขั้นแรกให้ตั้งค่า ID สำหรับตำแหน่งที่เพิ่มของตารางในรูปแบบ html
กล่าวคือ เขียนแท็ก div ภายในแท็ก body ของ html เพื่อระบุว่าจะต้องเพิ่มตารางไว้ด้านในของ div นี้ ดังต่อไปนี้
<div id="tdl"><div>
2. เขียนคำสั่งเพื่อเพิ่มตารางในจาวาสคริปต์
หากอยู่ในไฟล์ html ปัจจุบัน ไฟล์นั้นจะเขียนอยู่ภายในแท็ก <script> เช่น
คัดลอกรหัสรหัสดังต่อไปนี้:
<ประเภทสคริปต์ = "ข้อความ/จาวาสคริปต์" >
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>" // ตารางที่เพิ่มที่นี่สามารถสร้างได้ตามความต้องการของคุณเอง
</สคริปต์>
หากคุณนำเข้าไฟล์ js ให้เขียนคำสั่งต่อไปนี้ลงในไฟล์ js โดยตรง (สมมติว่าเป็น test.js)
คัดลอกรหัสรหัสดังต่อไปนี้:
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>"
จากนั้นแนะนำไฟล์ html ของคุณเอง
คัดลอกรหัสรหัสดังต่อไปนี้:
<script type="text/javascript" src="test.js"></script>
2. เพิ่มแถวของตารางแบบไดนามิก
1. ขั้นแรกให้ตั้งค่า id สำหรับตำแหน่งการเพิ่มของแถวในตารางใน HTML ตำแหน่งนี้จะต้องอยู่ภายใน <tbody> (ไม่ถูกต้องเป็นพิเศษ แต่ฉันได้ข้อสรุปนี้จากการทดสอบของฉัน หากคุณมีวิธีอื่นโปรดฝากข้อความไว้ ขอขอบคุณ) ดังนี้
คัดลอกรหัสรหัสดังต่อไปนี้:
<ตาราง>
<thead></thead>
<tfoot><tfoot> //tfoot และ thead ใช้ร่วมกับ tbody แต่เวลาเขียนก็ไม่เป็นไร
<tbody id="แถว"></tbody>
</ตาราง>
[/วินาที/ส ]*/n
2. ในเนื้อหาจาวาสคริปต์ คุณต้องสร้างแถวและเซลล์ก่อน จากนั้นจึงเพิ่มแถวใน <.tbody> ดังนี้
[รหัส]
row=document.createElement("tr"); //สร้างแถว
td1=document.createElement("tr"); //สร้างเซลล์
td1.appendChild(document.createTextNode("content")); //เพิ่มเนื้อหาลงในเซลล์
row.appendChild(td1); //เพิ่มเซลล์ลงในแถว
document.getElementById("rows").append(row); //เพิ่มแถวใน <tbody>
3. การค้นพบเล็กๆ น้อยๆ ของฉัน (อาจมีคนอื่นรู้อยู่แล้ว...)
1. ฉันทำการทดสอบด้วยตัวเอง โดยเขียน <table id="tdl'></table> ใน html และ document.getElementById("tdl").innerHTML="<tr><td></td> ใน javascript </ tr>" หลังจากเขียนสิ่งนี้แล้ว ให้ทดสอบ แถวของตารางใน html จะไม่ถูกเพิ่ม
2. หลังจากเสร็จสิ้นการทดสอบข้างต้น ฉันเปลี่ยนอีกครั้งเพื่อเขียน <table><tr><td id="t'><td><tr></table> ใน html และ document.getElementById("t in javascript " ).innerHTML="<p>content</p>" การทดสอบสามารถเพิ่มเนื้อหาได้
3. การคิด: ฉันสามารถสรุปอะไรได้บ้างจากการทดสอบทั้งสองข้างต้น ฉันยังไม่รู้ว่าจะสรุปได้อย่างไร