Javascript 获取单元格位置

所以我有这个表，当我点击一个

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>

1.
2//如果我点击这个，我想知道tr:1和td:2
3.
4.
5.
6.
7.
8.
9

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
    }
}

//在所有td元素上单击Track onclick
var table=document.getElementsByTagName（“表”）[0]；
var cells=table.getElementsByTagName（“td”）；//
对于（变量i=1；i

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

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

---

在处理程序中，

this

是表单元格，因此对于单元格索引，请执行以下操作：

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

对于行索引，请执行以下操作：

var rowIndex = this.parentNode.rowIndex + 1;

---

示例：

此脚本块将向您提供所需的信息，方法是将信息作为属性添加到单元格中，然后在

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)");
        };
    }
}

//在所有td元素上单击Track onclick
var table=document.getElementsByTagName（“表”）[0]；
//获取表中的所有行
var rows=table.getElementsByTagName（“tr”）；
对于（变量i=0；i

在单元格表上使用“this”

函数myFunction（x）{
var tr=x.parentNode.rowIndex；
var td=x.cellIndex；
document.getElementById（“tr”）.innerHTML=“行索引为：”+tr；
document.getElementById（“td”）.innerHTML=“列索引为：”+td；
}

tr，th，td{
填充：0.6rem；
边框：1px纯黑
}
表：悬停{
光标：指针；
}

1.
2.
3.
4.
5.
6.
7.
8.
9

如果你对框架开放，jQuery有一个有用的方法可以帮你做到这一点。我不想使用任何框架，但我会尝试看看这个函数在jQuery中做了什么。你可以看到一个使用

$.index（）的示例

在线，但下面的答案似乎更适合您。这可能会有帮助：它不是常规的：）我也想使用rowspan和colspan，但谢谢您的提示：）