วิธีดึง innerHTML ของเซลล์ตาราง (Table Cell) ด้วย JavaScript DOM

ใช้คุณสมบัติ innerHTML ของ Element <td> หรือ <th> เพื่อดึงเนื้อหา HTML ภายในเซลล์

โครงสร้างตารางตัวอย่าง

<table id="myTable" border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

วิธีที่ 1: เข้าถึงผ่าน rows และ cells Collection (คลาสสิก)

const table = document.getElementById('myTable');

// เซลล์แถวที่ 1 (index 0), คอลัมน์ที่ 1 (index 0) - คือ Header
const cell1 = table.rows[0].cells[0];
console.log(cell1.innerHTML); // "Header 1"

// เซลล์แถวที่ 2 (index 1), คอลัมน์ที่ 2 (index 1)
const cell2 = table.rows[1].cells[1];
console.log(cell2.innerHTML); // "Row 1, Cell 2"

// วนลูปทุกเซลล์
for (let i = 0; i < table.rows.length; i++) {
  for (let j = 0; j < table.rows[i].cells.length; j++) {
    console.log(`Row ${i}, Col ${j}:`, table.rows[i].cells[j].innerHTML);
  }
}

วิธีที่ 2: ใช้ querySelector / querySelectorAll (สมัยใหม่ ยืดหยุ่นกว่า)

// ดึงเซลล์แรกของแถวแรก (th หรือ td)
const firstCell = document.querySelector('#myTable tr:first-child td, #myTable tr:first-child th');
console.log(firstCell.innerHTML);

// ดึงทุก td ใน tbody (ข้าม header)
const bodyCells = document.querySelectorAll('#myTable tbody td');
bodyCells.forEach((cell, index) => {
  console.log(`Cell ${index}:`, cell.innerHTML);
});

// ดึงเซลล์เฉพาะด้วย nth-child
const specificCell = document.querySelector('#myTable tr:nth-child(3) td:nth-child(2)');
console.log(specificCell.innerHTML); // "Row 2, Cell 2"

วิธีที่ 3: ใช้ id/class ให้เซลล์โดยตรง (แนะนำสำหรับแอปจริง)

<td id="price-123" class="price-cell">$99.99</td>

const priceCell = document.getElementById('price-123');
console.log(priceCell.innerHTML); // "$99.99"

// หรือใช้ class
document.querySelectorAll('.price-cell').forEach(cell => {
  const price = parseFloat(cell.innerHTML.replace('$', ''));
  // ประมวลผล...
});

innerHTML vs textContent vs innerText

<td>Hello <span style="display:none">Hidden</span> <b>World</b></td>

cell.innerHTML    // "Hello <span style="display:none">Hidden</span> <b>World</b>"
cell.textContent  // "Hello Hidden World"
cell.innerText    // "Hello World" (เพราะ Hidden ถูกซ่อน)

ตัวอย่างครบ: แสดง innerHTML เมื่อคลิกเซลล์

<table id="demoTable">
  <tr><td>Apple</td><td>$1.20</td></tr>
  <tr><td>Banana</td><td>$0.50</td></tr>
</table>
<div id="output"></div>

<script>
document.getElementById('demoTable').addEventListener('click', (e) => {
  if (e.target.tagName === 'TD' || e.target.tagName === 'TH') {
    document.getElementById('output').innerHTML = `
      <strong>Tag:</strong> ${e.target.tagName}<br>
      <strong>innerHTML:</strong> ${e.target.innerHTML}<br>
      <strong>textContent:</strong> ${e.target.textContent}
    `;
  }
});
</script>