獲取單元格位置

Question

所以我有這張表格，當我點擊td時，我想知道元素中沒有任何屬性的地方（哪一行和哪一個單元格）。

<table> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>2</td> // If I click on this I would like to know tr:1 & td:2 
      <td>3</td> 
     </tr> 

     <tr> 
      <td>4</td> 
      <td>5</td> 
      <td>6</td> 
     </tr> 

     <tr> 
      <td>7</td> 
      <td>8</td> 
      <td>9</td> 
     </tr> 
    </tbody> 
</table> 

的Javascript：

// Track onclicks on all td elements 

var table = document.getElementsByTagName("table")[0]; 
var cells = table.getElementsByTagName("td"); // 

for(var i = 1; i < cells.length; i++){ 
    // Cell Object 
    var cell = cells[i]; 
    // Track with onclick 
    cell.onclick = function(){ 
     // Track my location; 
     // example: I'm in table row 1 and I'm the 2th cell of this row 
    } 
} 

Answer 1

在處理程序，this是表格單元格，因此對於細胞指數做到這一點：

var cellIndex = this.cellIndex + 1; // the + 1 is to give a 1 based index 

和行索引，這樣做：

var rowIndex = this.parentNode.rowIndex + 1; 

例子：http://jsfiddle.net/fwZTc/1/

Answer 2

好，當你有ROWSPAN/COLSPAN你可以有更多的樂趣，但是，如果電網正常，你可以決定從索引你的位置由這樣做的：

row = Math.floor(i/rows); 
column = i % columns; 

Answer 3

這個腳本塊將爲您提供通過將信息作爲屬性的單元格您想要的信息，然後在onclick函數中訪問它們：

// Track onclicks on all td elements 
var table = document.getElementsByTagName("table")[0]; 
// Get all the rows in the table 
var rows = table.getElementsByTagName("tr"); 

for (var i = 0; i < rows.length; i++) { 
    //Get the cells in the given row 
    var cells = rows[i].getElementsByTagName("td"); 
    for (var j = 0; j < cells.length; j++) { 
     // Cell Object 
     var cell = cells[j]; 
     cell.rowIndex = i; 
     cell.positionIndex = j; 
     cell.totalCells = cells.length; 
     cell.totalRows = rows.length; 
     // Track with onclick 
     console.log(cell); 
     cell.onclick = function() { 
      alert("I am in row " + this.rowIndex + " (out of " + this.totalRows + " rows) and I am position " + this.positionIndex + " (out of " + this.totalCells + " cells)"); 
     }; 
    } 
} 

Answer 4

使用 「這種」 對細胞表

function myFunction(x) { 
 
     var tr = x.parentNode.rowIndex; 
 
     var td = x.cellIndex;   
 
     
 
     document.getElementById("tr").innerHTML = "Row index is: " + tr; 
 
     document.getElementById("td").innerHTML = "Column index is: " + td; 
 
     }

tr, th, td { 
 
    padding: 0.6rem; 
 
    border: 1px solid black 
 
} 
 

 
table:hover { 
 
    cursor: pointer; 
 
}

<table> 
 
    <tbody> 
 
     <tr> 
 
      <td onclick="myFunction(this)">1</td> 
 
      <td onclick="myFunction(this)">2</td> 
 
      <td onclick="myFunction(this)">3</td> 
 
     </tr> 
 

 
     <tr> 
 
      <td onclick="myFunction(this)">4</td> 
 
      <td onclick="myFunction(this)">5</td> 
 
      <td onclick="myFunction(this)">6</td> 
 
     </tr> 
 

 
     <tr> 
 
      <td onclick="myFunction(this)">7</td> 
 
      <td onclick="myFunction(this)">8</td> 
 
      <td onclick="myFunction(this)">9</td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 

 
<p id="tr"></p> 
 
<p id="td"></p>