ฉันจะไม่พูดถึงการควบคุม 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 () แต่ละแถวจะดำเนินการวิธีการที่สอดคล้องกันของการลบเซลล์