วิธี Table insertRow()

HTML DOM Table วัตถุ

คำนิยามและการใช้งาน

insertRow() วิธีนี้สร้าง ตัวอิเล็ม <tr> และเพิ่มมันเข้าไปในตาราง

insertRow() วิธีนี้จะใส่บรรทัดใหม่ที่ตำแหน่งที่กำหนดในตาราง

สัญญาณเตือน:ตัวอิเล็ม <tr> จะต้องมี <th> หรือ <td> อยู่

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

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

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

ตัวอย่าง

ตัวอย่าง 1

ใส่บรรทัดใหม่ที่ตำแหน่งแรกของตาราง (และใส่ td ที่มีข้อความ):

// หา <table> ที่มี id="myTable":
var table = document.getElementById("myTable");
// สร้าง <tr> ว่างและเพิ่มมันเข้าไปในตำแหน่งแรกของตาราง:
var row = table.insertRow(0);
// ใส่เซลล์ใหม่ (td อิเล็ม) ที่ตำแหน่งแรกและที่สองของ <tr> ใหม่ (ตัวอย่าง):
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
// เพิ่มข้อความในเซลล์ใหม่:
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";

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

ตัวอย่าง 2

สร้างและลบบรรทัด:

function myCreateFunction() {
  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";
}
function myDeleteFunction() {
  document.getElementById("myTable").deleteRow(0);
}

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

เขียนโค้ด

tableObject.insertRow(index)
ประกาศ รายละเอียด
index

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

ตัวเลข กำหนดตำแหน่งที่จะเพิ่มบรรทัด (เริ่มต้นจาก 0) ตัวเลข 0 จะทำให้บรรทัดใหม่ถูกเพิ่มที่ตำแหน่งแรก

เพียงแค่ใช้ค่า -1 ก็ได้ ซึ่งจะทำให้เพิ่มบรรทัดใหม่ที่ตำแหน่งสุดท้าย

ถ้าละเลยค่านี้ ใน Chrome, IE, Firefox และ Opera จะใส่บรรทัดใหม่ที่ตำแหน่งสุดท้าย และใน Safari จะใส่บรรทัดใหม่ที่ตำแหน่งแรก

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

ค่าที่คืนค่า: ตัวอย่าง <tr> ที่ถูกใส่

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน

HTML DOM Table วัตถุ