获取单元格位置答案

【问题标题】：Get Cell Location获取单元格位置
【发布时间】：2011-06-27 07:17:48
【问题描述】：

所以我有这张表，当我点击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
    }
}

【问题讨论】：

jQuery 有一个有用的 $.index() 方法，如果你对框架开放，它可以为你做这件事。
我不想使用任何框架，但我会尝试看看该函数在 jQuery 中的作用。
您可以在http://jsbin.com/okuri4 在线查看使用$.index() 的示例，但@patrickdw 下面的答案似乎更适合您。
这可能会有所帮助：stackoverflow.com/questions/661726/how-to-get-a-cells-location

标签： javascript dom html-table

【解决方案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/

【讨论】：

【解决方案2】：

此脚本块将为您提供所需的信息，方法是将信息作为属性添加到单元格中，然后在 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)");
        };
    }
}

【讨论】：

【解决方案3】：

好吧，当您拥有 rowspan/colspan 时，您可以享受更多乐趣，但是，如果网格是规则的，您可以通过执行以下操作从索引中确定您的位置：

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

【讨论】：

它不规则 :) 我也想使用 rowspan 和 colspan 但感谢您的提示 :))

【解决方案4】：

在单元格表中使用“this”

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>

【讨论】：