Question

我有以下代码，我尝试使用DOM / Javascript将table2中第一个单元格的内容更改为table1中的文本：

我已经研究了之前关于SO的问题，包括使用this关键字传递rowIndex值，但这些不起作用。如果有人可以帮助我，我会很感激。

function getmylocation() {
  var Row = document.getElementById('table1');
  var Cells = Row.getElementsByTagName("td");
  var RowToChange = document.getElementById('table2');
  var CellsToChange = RowToChange.getElementsByTagName("tr");
  CellsToChange[0].innerText = Cells[this.rowIndex].innerText;
}

<table id='table1'>
  <tr>
    <td> row1, col1</td>
    <td> <button onclick='getmylocation();'>Click</button></td>
  </tr>

  <tr>
    <td> row2, col1</td>
    <td> <button onclick='getmylocation();'>Click</button></td>
  </tr>
</table>

<br>

<table id='table2'>
  <tr>
    <td> empty1</td>
    <td>empty2</td>
  </tr>
</table>

编辑：根据Mate的回答，有效的方法是使用getmylocation.call(this)代替。

Answer 1

getmylocation()被调用为<button>的方法。按钮没有rowIndex属性，表行也没有。这意味着，您必须找到按钮所在的<tr>。以下是一些选项：

<强> 1。快速而肮脏的方式

var MyRow = this.parentNode.parentNode;

这并不是真的值得推荐，因为这假设了祖父母＆＃34; <button>的{{1}}是<tr>。如果将<button>放在表格单元格中的任何元素（例如<span>）内，则会中断。

<强> 2。优雅的方式

var MyRow = this.closest('tr');

最近引入了closest()方法，它可用于查找与传递的CSS选择器匹配的元素的最近祖先（在本例中为'tr'）。但是，旧版浏览器不支持此方法，因此您需要了解目标受众群体（参见：https://caniuse.com/#search=closest）。

第3。中间方式

var MyRow = this;
while (MyRow.tagName !== 'TR') {
    MyRow = MyRow.parentNode;
}

这基本上是你实现closest()的限制版本：你从触发点击的<button>元素开始，循环遍历其祖先，直到找到第一个tagName的元素为止。 } property是TR。注意：JavaScript区分大小写，如您所见，即使您用小写编写HTML代码，tagName属性也始终为全部大写。

Javascript - 用于按钮的rowIndex在表中不起作用

1 个答案: