วิธี insertCell() ของ TableRow

HTML DOM TableRow วัตถุ

การเฉพาะและวิธีใช้

insertCell() วิธีนี้จะใส่หน่วยเรียงเข้าไปในแถวปัจจุบัน

คำเตือน:ใช้ วิธี deleteCell() ลบหน่วยเรียงในแถวตารางปัจจุบัน

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

คู่มืออ้างอิง HTML:HTML <tr> แทร็ก

ตัวอย่าง

ตัวอย่าง 1

ใส่หน่วยเรียงใหม่ที่มีเนื้อหาเข้าไปในต้นของแถวตารางที่ id="myRow":

var row = document.getElementById("myRow");
var x = row.insertCell(0);
x.innerHTML = "New cell";

ลองเดาะด้วยตัวเอง

มีตัวอย่างเพิ่มเติมในด้านล่างของหน้า

การ์ทูน

tablerowObject.insertCell(index)
ตัวแปร คำอธิบาย
index

จำเป็นใน Firefox และ Opera แต่เป็นตัวเลือกใน IE, Chrome และ Safari

ตัวเลข (เริ่มต้นที่ 0) กำหนดตำแหน่งของหน่วยข้อมูลใหม่ในบรรทัดปัจจุบัน

ค่า 0 จะทำให้ตัวแทนใส่ในตำแหน่งที่แรก ยังสามารถใช้ค่า -1 ซึ่งจะทำให้ตัวแทนใส่ในตำแหน่งที่สุดท้าย

ถ้าไม่กำหนดตัวแปรนี้ ใน IE insertCell() จะใส่ตัวแทนในตำแหน่งที่สุดท้าย ใน Chrome และ Safari จะใส่ตัวแทนในตำแหน่งที่แรก

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

ค่าที่ส่งกลับ:

องค์ประกอบหน่วยข้อมูลที่ใส่เข้ามา

การสนับสนุนโปรแกรมบราวเซอร์

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

รายละเอียดเพิ่มเติม

ตัวอย่าง 2

ใส่หน่วยข้อมูลใหม่ที่สุดท้ายของบรรทัดตาราง id="myRow" ซึ่งมีเนื้อหาในตัวแทน:

var row = document.getElementById("myRow");
var x = row.insertCell(-1);
x.innerHTML = "New cell";

ลองเดาะด้วยตัวเอง

ตัวอย่าง 3

ใส่หน่วยข้อมูลใหม่ที่ตำแหน่งที่ 2 ของบรรทัดตาราง id="myRow" ซึ่งมีเนื้อหาในตัวแทน:

var row = document.getElementById("myRow");
var x = row.insertCell(2);
x.innerHTML = "New cell";

ลองเดาะด้วยตัวเอง

ตัวอย่าง 4

ใส่หน่วยข้อมูลใหม่ที่ต้นของบรรทัดแรกของตาราง ตาราง rows (.rows[0]) คือการส่งกลับค่าของความรวมทั้งหมดของตัวแทน <tr> ของตาราง id="myTable"。

เลข [0] กำหนดตัวแทนที่ต้องการค้นหา ในตัวอย่างนี้ คือบรรทัดแรกของตาราง หลังจากนั้นเราใช้ insertcell() ในตำแหน่งที่ -1 ในสตริงตำแหน่งตัวแทน:

var firstRow = document.getElementById("myTable").rows[0];
var x = firstRow.insertCell(-1);
x.innerHTML = "New cell";

ลองเดาะด้วยตัวเอง

ตัวอย่าง 5

ลบหน่วยข้อมูลแรกจากบรรทัดตาราง id="myRow":

var row = document.getElementById("myRow");
row.deleteCell(0);

ลองเดาะด้วยตัวเอง

ตัวอย่าง 6

ใส่บรรทัดใหม่ที่ต้นของตาราง。

วิธี insertRow() ใส่บรรทัดใหม่ในตำแหน่งที่กำหนดของตาราง ในตัวอย่างนี้ คือตำแหน่งแรกของตาราง id="myTable" (ตัวที่แรก)。

แล้วเราใช้วิธี insertCell() ในการเพิ่มหน่วยข้อมูลในบรรทัดใหม่。

var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";

ลองเดาะด้วยตัวเอง

HTML DOM TableRow วัตถุ