0

我想使用 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 );
  }
}
4

2 回答 2

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>

于 2019-12-23T22:33:33.417 回答
0

有不同的方法可以实现我认为你想要的。随时更新您的问题以反映您的意愿。按照评论中的要求添加您的 HTML 会很有用。

让我们假设您的表不使用 rowspan 或 colspan。像这样的东西：

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

有两个循环的基本方式：

// Lets get all your rows
var rows = document.querySelectorAll("table tr");
   
   // for each row...
for (var j = 0; j < rows.length; j++) {
  var row = rows[j];

  // ... we will find all this rows' cells.
  var cells = row.querySelectorAll("td");

  // for each cell...
  for (var i = 0; i < cells.length; i++) {
    var cell = cells[i];

    // ... we will set its textContent to its coordinate in the table
    cell.textContent = "X: " + (i + 1) + " / Y: " + (j + 1);
  }
}
<table border="1">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

如果您事先知道列数，则另一种解决方案：

var colsCount = document.querySelectorAll("table tr:nth-child(1) td").length;

var cells = document.querySelectorAll("table td");
for (var i = 0; i < cells.length; i++) {
  const y = i / colsCount | 0;
  const x = i % colsCount;
  cells[i].textContent = `X: ${x + 1} / Y: ${y + 1}`;
}
<table border="1">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

于 2019-12-23T22:09:12.233 回答