ชุด Table cells

HTML DOM Table วัตถุ

การใช้งานและความหมาย

cells ชุดกลุ่มคืนค่าชุดทั้งหมดของ <td> หรือ <th> ในตาราง

หมายเหตุ:องค์ประกอบในชุดจะถูกจัดลำดับตามลำดับที่มีในรหัสต้นฉบับ

คำแนะนำ:ใช้ ชุด rows คืนค่าชุดทั้งหมดของ <tr> ในตาราง

คำแนะนำ:ใช้ insertRow() วิธี สร้างบรรทัดใหม่ (<tr>)

คำแนะนำ:ใช้ deleteRow() วิธี ลบบรรทัด

คำแนะนำ:ใช้ insertCell() วิธี สร้างเซลล์ใหม่ (<td>)

คำแนะนำ:ใช้ วิธี deleteCell() ลบเซลล์

ดูเพิ่มเติม:

คู่มือ HTMLHTML <td> แท็ก

คู่มือ HTMLHTML <th> แท็ก

คู่มือ JavaScriptHTML DOM TableData วัตถุ

คู่มือ JavaScriptHTML DOM TableHeader วัตถุ

ตัวอย่าง

ตัวอย่าง 1

แสดงจำนวนเซลล์ในบรรทัดแรก:

var x = document.getElementById("myTable").rows[0].cells.length;

ทดลองด้วยตัวเอง

ผลลัพธ์ของ x จะเป็น:

2

ตัวอย่าง 2: [index]

แสดงค่า innerHTML ของเซลล์แรกในบรรทัดแรกของตาราง:

alert(document.getElementById("myTable").rows[0].cells[0].innerHTML);

ทดลองด้วยตัวเอง

ตัวอย่าง 3: item(index)

แสดงค่า innerHTML ของเซลล์แรกในบรรทัดแรกของตาราง:

alert(document.getElementById("myTable").rows[0].cells.item(0).innerHTML);

ทดลองด้วยตัวเอง

ตัวอย่าง 4: namedItem(id)

แสดงค่า innerHTML ของเซลล์ที่มี id="myTd" ในบรรทัดแรกของตาราง:

alert(document.getElementById("myTable").rows[0].cells.namedItem("myTd").innerHTML);

ทดลองด้วยตัวเอง

ตัวอย่าง 5

เปลี่ยนสิ่งที่อยู่ภายในเซลล์แรกของตาราง:

var x = document.getElementById("myTable").rows[0].cells;
x[0].innerHTML = "NEW CONTENT";

ทดลองด้วยตัวเอง

กฎระเบียบ

tableObject.cells

คุณสมบัติ

คุณสมบัติ รายละเอียด
length

กลับมาด้วยจำนวน <td> และ/หรือ <th> อิเล็มเมนต์ในชุด。

หมายเหตุ:คุณสมบัตินี้เป็นแค่ความขึ้นอยู่ตามระบบ (read-only)。

วิธีการ

วิธีการ รายละเอียด
[index]

กลับมาด้วย <td> และ/หรือ <th> อิเล็มเมนต์ที่มีดัชนีที่กำหนดในชุด (เริ่มต้นจาก 0)。

หมายเหตุ:ถ้าหมายเลขดัชนีเกินขอบเขต ก็จะกลับมาด้วย null。
item(index)

กลับมาด้วย <td> และ/หรือ <th> อิเล็มเมนต์ที่มีดัชนีที่กำหนดในชุด (เริ่มต้นจาก 0)。

หมายเหตุ:ถ้าหมายเลขดัชนีเกินขอบเขต ก็จะกลับมาด้วย null。
namedItem(id)

กลับมา <td> และ/หรือ <th> อิเล็มเมนต์จากชุดที่มี id ที่กำหนด。

หมายเหตุ:ถ้า id ไม่มีอยู่ ก็จะกลับมาด้วย null。

รายละเอียดเทคโนโลยี

DOM รุ่น: Core Level 2 Document Object
ค่าที่กลับมา:

HTMLCollection วัตถุ แสดงความหมายถึง <td> และ/หรือ <th> ทั้งหมดใน <tr> อิเล็มเมนต์。

องค์ประกอบในชุดจะถูกจัดลำดับตามลำดับที่มีในรหัสต้นฉบับ

การสนับสนุนโปรแกรมนี้

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน

HTML DOM Table วัตถุ