การสอน DOM พื้นฐาน: การใช้ตารางควบคุม DOM

ฉันจะไม่พูดถึงการควบคุม CSS ของตารางในตอนนี้ ก่อนอื่นฉันจะแบ่งปัน DOM ที่ใช้กันทั่วไปในตารางด้านล่าง

วิธีการที่ใช้กันทั่วไปสำหรับการเพิ่มการทำงานของตารางคือวิธีการแทรก () และ insertcell ()

แถวคำนวณจากศูนย์ตัวอย่างเช่น:

คัดลอกรหัสดังนี้: var otr = document.getElementById ("สมาชิก"). inserTrow (2)

มันหมายถึงการเพิ่มบรรทัดใหม่ไปยังบรรทัดที่สอง

การคัดลอกรหัสมีดังนี้:

var atext = new Array ();

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

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

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

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

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

สำหรับ (var i = 0; i <atext.length; i ++) {

var otd = otr.insertcell (i);

OTD.AppendChild (atext [i]);

-

ตัวแปร OTR แทรกแถวใหม่สำหรับตารางจากนั้นใช้ InsertCell เพื่อแทรกข้อมูลใหม่สำหรับแถวนี้ใช้ CreateTextNode เพื่อสร้างโหนดข้อความใหม่และให้ OTD ในภาคผนวกและ OTD เป็นเซลล์ใหม่

1. แทรกแถว (ตารางเพิ่มแบบไดนามิก)

การคัดลอกรหัสมีดังนี้:

<script type = "text/javascript">

window.onload = function () {

var otr = document.getElementById ("member"). inserTrow (2); // แทรกสาย

var atext = new Array ();

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

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

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

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

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

สำหรับ (var i = 0; i <atext.length; i ++) {

var otd = otr.insertcell (i);

OTD.AppendChild (atext [i]);

-

-

</script>

<ตารางสรุป = "รายชื่อสมาชิกใน EE Sunday" id = "member">

<Caption> รายชื่อสมาชิก </section>

<tr>

<th scope = "col"> ชื่อ </th>

<th scope = "col"> คลาส </th>

<th scope = "col"> วันเกิด </th>

<th scope = "col"> Constellation </th>

<th scope = "col"> มือถือ </th>

</tr>

<tr>

<td> Isaac </td>

<td> W13 </td>

<td> 24 มิ.ย. </td>

<td> มะเร็ง </td>

<TD> 1118159 </td>

</tr>

<tr>

<td> girlwing </td>

<td> W210 </td>

<td> 16 ก.ย. </td>

<td> Virgo </td>

<TD> 1307994 </td>

</tr>

<tr>

<td> TasteStory </td>

<td> W15 </td>

<td> 29 พ.ย. </td>

<Td> Sagittarius </td>

<TD> 1095245 </td>

</tr>

</table>

2. แก้ไขเนื้อหาของตาราง

หลังจากสร้างตารางแล้วคุณสามารถใช้ htmldom โดยตรงเพื่อใช้งานตารางซึ่งสะดวกกว่า document.getElementById () และ document.getElementSbyTagname ()

otable.rows [i] .cell [j]

ด้านบนสามารถเข้าถึงคอลัมน์ I-TH และคอลัมน์ J-th ของตารางผ่านแถวแอตทริบิวต์และเซลล์ทั้งสองได้อย่างง่ายดาย (ทั้งสองนับตั้งแต่ 0) หลังจากได้รับวัตถุเซลล์คุณสามารถใช้แอตทริบิวต์ InnerHTML เพื่อแก้ไขเนื้อหาของ Xiangyu

ตัวอย่างเช่นแก้ไขเนื้อหาของ 4 แถวและ 5 คอลัมน์ให้ดี

จากนั้นคุณสามารถใช้รหัสต่อไปนี้

การคัดลอกรหัสมีดังนี้:

var otable = document.getElementById ("ตารางที่ 1");

otable.rows [4] .cells [5] .innerhtml = "ดี";

3. ลบเนื้อหาของตาราง

เนื่องจากตารางมีฟังก์ชั่นของการเพิ่มการแก้ไขและการลบ

การลบแถวในตารางใช้วิธี deleterow (i) ซึ่งฉันคือหมายเลขแถว

การลบคอลัมน์ในตารางใช้วิธี DELETECELL (J) ของ TR

รหัสต่อไปนี้ระบุแถวที่สองของตารางที่ถูกลบและคอลัมน์ที่สองของแถวที่สามของตารางต้นฉบับ

การคัดลอกรหัสมีดังนี้: var otable = document.getElementById ("ตารางที่ 1"); otable.deleterow [2]; otable.rows [2] .deletecell [3];

รหัสต่อไปนี้บ่งชี้ว่าหากแถวที่สองของตารางถูกลบและคอลัมน์ที่สองของแถวที่สามของตารางต้นฉบับถือว่ามีการลบแบบไดนามิกและไม่ส่งผลกระทบต่อกรอบ HTML โดยรวมหรือหากเนื้อหาของตารางเป็นจำนวนมากการลบแบบไดนามิกและการเพิ่ม

การคัดลอกรหัสมีดังนี้:

<script type = "text/javascript">

window.onload = function () {

var otr = document.getElementById ("member"). inserTrow (2); // แทรกสาย

var atext = new Array ();

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

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

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

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

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

สำหรับ (var i = 0; i <atext.length; i ++) {

var otd = otr.insertcell (i);

OTD.AppendChild (atext [i]);

-

-

</script>

<ตารางสรุป = "รายชื่อสมาชิกใน EE Sunday" id = "member">

<Caption> รายชื่อสมาชิก </section>

<tr>

<th scope = "col"> ชื่อ </th>

<th scope = "col"> คลาส </th>

<th scope = "col"> วันเกิด </th>

<th scope = "col"> Constellation </th>

<th scope = "col"> มือถือ </th>

</tr>

<tr>

<td> Isaac </td>

<td> W13 </td>

<td> 24 มิ.ย. </td>

<td> มะเร็ง </td>

<TD> 1118159 </td>

</tr>

<tr>

<td> girlwing </td>

<td> W210 </td>

<td> 16 ก.ย. </td>

<td> Virgo </td>

<TD> 1307994 </td>

</tr>

<tr>

<td> TasteStory </td>

<td> W15 </td>

<td> 29 พ.ย. </td>

<Td> Sagittarius </td>

<TD> 1095245 </td>

</tr>

</table>

ลบคอลัมน์

การคัดลอกรหัสมีดังนี้:

ฟังก์ชั่น deletecolumn (otable, inum) {

// ปรับแต่งฟังก์ชันการลบคอลัมน์นั่นคือลบเซลล์ที่เกี่ยวข้องสำหรับแต่ละแถว

สำหรับ (var i = 0; i <otable.rows.length; i ++)

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

-

window.onload = function () {

var otable = document.getElementById ("ตารางที่ 1");

deleteColumn (otable, 2);

-

สำหรับการลบคอลัมน์ตารางไม่มีวิธีการเรียกได้โดยตรงใน DOM คุณต้องเขียนวิธีการ deleteColumn () ด้วยตัวคุณเอง วิธีนี้ยอมรับพารามิเตอร์สองพารามิเตอร์หนึ่งพารามิเตอร์คือวัตถุตารางและพารามิเตอร์อื่นคือหมายเลขคอลัมน์ที่คุณต้องการลบ วิธีการเขียนนั้นง่ายมาก การใช้เมธอด deleteCell () แต่ละแถวจะดำเนินการวิธีการที่สอดคล้องกันของการลบเซลล์