วิธีเพิ่มแถวในตารางด้วย JavaScript DOM

หากต้องการเพิ่มแถวในตารางด้วย JavaScript ให้ใช้เมธอด DOM insertRow()

ตัวอย่าง

ลองรันโค้ดด้านล่างเพื่อเรียนรู้วิธีเพิ่มแถวในตารางทีละแถว:

<!DOCTYPE html>
<html>
  <head>
    <script>
      function rowFunction(x) {
        var a = document.getElementById(x).insertRow(0);
        var b = a.insertCell(0);
        var c = a.insertCell(1);
        b.innerHTML = c.innerHTML = "row";
      }
    </script>
  </head>
  <body>
    <table style="border:2px solid black" id="newtable">
      <tr>
        <td>One</td>
        <td>Two</td>
      </tr>
      <tr>
        <td>Three</td>
        <td>Four</td>
      </tr>
      <tr>
        <td>Five</td>
        <td>Six</td>
      </tr>
    </table>
    <p>
      <input type="button" onclick="rowFunction('newtable')" value="Add a row">
    </p>
  </body>
</html>

คำอธิบาย: เมธอด insertRow(index) เพิ่มแถวใหม่ที่ตำแหน่ง index (0 = แถวแรก) จากนั้นใช้ insertCell() เพื่อเพิ่มเซลล์ในแถวนั้น และกำหนดเนื้อหาผ่าน innerHTML