javascript - 转换 javascript 警报框以在 html 文本框上显示它

Question

我想使用 JavaScript 在 html td 单元格中显示我的 xy 坐标，但不是显示警报，而是希望它显示在 html 文本框中

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

for(var i = 1; i < cells.length; i++){

  var cell = cells[i];

  cell.onclick = function(){
    var cellIndex  = this.cellIndex + 1;  

    var rowIndex = this.parentNode.rowIndex + 1;

    alert("X: " + cellIndex + " / Y: " + rowIndex );
  }
}

标签： javascripthtmlhtml-tablecoordinatespure-js

Answer 1

我对td元素进行了循环并绑定了事件。因此，click每次单击时，td您都会看到 cellIndex 和 rowIndex。检查我的代码并让我知道它是否满足您的要求。

var cells = document.querySelectorAll("table td");
for(var i = 0; i < cells.length; i++){
  cells[i].addEventListener('click',showCoordinates);
}
function showCoordinates(){
  var cellIndex  = this.cellIndex + 1;  
  var rowIndex = this.parentNode.rowIndex + 1;
	this.innerHTML = "X:"+cellIndex +" Y:"+rowIndex;
}

table td{ padding:10px; }

<table border="1">
  <tr>
    <td>TD</td>
    <td>TD</td>
    <td>TD</td>
  </tr>
  <tr>
    <td>TD</td>
    <td>TD</td>
    <td>TD</td>
  </tr>
</table>