Cách lấy chỉ mục của ô bảng trong JavaScript

Question

Thuộc tính cellIndex trả về vị trí của một ô trong tập hợp các ô của một hàng trong bảng

Nội dung chính Show

Hỗ trợ trình duyệt
Giá trị trả về
Tìm thấy một vấn đề nội dung với trang này?
Làm cách nào để lấy chỉ mục của hàng trong bảng trong JavaScript?
Làm cách nào để lấy giá trị của ô bảng trong JavaScript?
Chỉ mục ô dữ liệu JavaScript là gì?
Làm cách nào để tìm chỉ mục cột trong JavaScript?

Hỗ trợ trình duyệt

cú pháp

Trả về thuộc tính cellIndex

var v = tabledataObject.cellIndex

Giá trị trả về

Một giá trị kiểu Số đại diện cho vị trí của ô trong tập hợp các ô của hàng trong bảng

Thí dụ

Đoạn mã sau cho biết cách lấy vị trí chỉ mục của từng ô trong một hàng của bảng










  
    Cell 1
    Cell 2
    Cell 3
    Cell 4
  

test

Đoạn mã trên được hiển thị như sau

ví dụ 2

Đoạn mã sau cho biết cách Nhấp vào các ô khác nhau để cảnh báo vị trí chỉ mục của chúng









Click on each td element to alert its position in the table row.


  
    Click to show cellIndex
    Click to show cellIndex
    Click to show cellIndex
    Click to show cellIndex

Đoạn mã trên được hiển thị như sau

Thuộc tính chỉ đọc HTMLTableRowElement.rowIndex biểu thị vị trí của một hàng liên quan đến toàn bộ <table>

Ngay cả khi các phần tử <thead>, <tbody> và <tfoot> không theo thứ tự trong HTML, các trình duyệt vẫn hiển thị bảng theo đúng thứ tự. Do đó, các hàng được tính từ <thead> đến <tbody>, từ <tbody> đến <tfoot>

Trả về chỉ mục của hàng hoặc

let rows = document.querySelectorAll('tr');

rows.forEach((row) => {
  let z = document.createElement("td");
  z.textContent = `(row #${row.rowIndex})`;
  row.appendChild(z);
});

1 nếu hàng không phải là một phần của bảng

Ví dụ này sử dụng JavaScript để gắn nhãn tất cả các số hàng trong bảng

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bananas</td>
      <td>$2</td>
    </tr>
    <tr>
      <td>Oranges</td>
      <td>$8</td>
    </tr>
    <tr>
      <td>Top Sirloin</td>
      <td>$20</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$30</td>
    </tr>
  </tfoot>
</table>

let rows = document.querySelectorAll('tr');

rows.forEach((row) => {
  let z = document.createElement("td");
  z.textContent = `(row #${row.rowIndex})`;
  row.appendChild(z);
});