Question

我创建了一个表，并在该表内添加了onclick函数到特定的单元格，并且可以正常工作。但是，当我想在单击的单元格中获取特定单元格的值时，它就不起作用了。它给了我以下错误：

未捕获的TypeError：无法读取未定义的属性'0'

这是我的代码：

    var rIndex=document.getElementById("tablewithdrawal");
    //select the row
    function selectedRowToInput()
    {

    for(var i = 0; i < tablewithdrawal.rows.length; i++)
    {
        tablewithdrawal.rows[i].cells[13].onclick = function()
        {
        // get the seected row index




        // get the seected row index

          accountnumercell=this.cells[0].innerHTML;
        alert(accountnumercell);



        };

Answer 1

您遇到的错误是因为事件处理程序中的this引用了tablewithdrawal.rows[i].cells[13]。因此，this.cells[0]没有意义，因为这意味着您正在尝试获取不存在的tablewithdrawal.rows[i].cells[13].cells[0]。

现在，根据您在问题中提供的内容，在我看来，您正在尝试显示该行的第一个单元格（您单击的第14个单元格）的内容。如果我错了请纠正我。

解决方案1：

您需要使用而不是this的行，即tablewithdrawal.rows[i]，因此请尝试将其缓存在循环中，并在事件处理程序中使用它来访问该行的第一个单元格。 / p>

/* Iterate over every row of the table. */
for (let i = 0; i < tablewithdrawal.rows.length; i++) {
  /* Cache the current row. */
  let row = tablewithdrawal.rows[i];

  /* Set the 'click' event of the 14th cell. */
  row.cells[13].onclick = function() {
    /* Alert the content of the row's 1st cell. */
    alert(row.cells[0].innerHTML);
  };
}

解决方案2：

或者，正如另一个答案提到的那样，您可以使用bind将自定义上下文传递给事件处理程序，从而使您的代码保持完整。

/* Iterate over every row of the table. */
for (let i = 0; i < tablewithdrawal.rows.length; i++) {
  /* Cache the current row. */
  let row = tablewithdrawal.rows[i];

  /* Set the 'click' event of the 14th cell. */
  row.cells[13].onclick = function() {
    /* Alert the content of the row's 1st cell. */
    alert(this.cells[0].innerHTML);
  }.bind(row);
}

代码段：

/* Find the table. */
var tablewithdrawal = document.querySelector("table");

/* Iterate over every row of the table. */
for (let i = 0; i < tablewithdrawal.rows.length; i++) {
  /* Cache the current row. */
  let row = tablewithdrawal.rows[i];

  /* Set the 'click' event of the 14th cell. */
  row.cells[13].onclick = function() {
    /* Alert the content of the row's 1st cell. */
    alert(row.cells[0].innerHTML);
  };
}

table td {
  font-size: .8125em;
  padding: .5em;
  border: 1px solid #000;
}

<!-- Sample table -->
<table>
  <tr>
    <td>R0 C0</td>
    <td>R0 C1</td>
    <td>R0 C2</td>
    <td>R0 C3</td>
    <td>R0 C4</td>
    <td>R0 C5</td>
    <td>R0 C6</td>
    <td>R0 C7</td>
    <td>R0 C8</td>
    <td>R0 C9</td>
    <td>R0 C10</td>
    <td>R0 C11</td>
    <td>R0 C12</td>
    <td>R0 C13</td>
  </tr>
  <tr>
    <td>R1 C0</td>
    <td>R1 C1</td>
    <td>R1 C2</td>
    <td>R1 C3</td>
    <td>R1 C4</td>
    <td>R1 C5</td>
    <td>R1 C6</td>
    <td>R1 C7</td>
    <td>R1 C8</td>
    <td>R1 C9</td>
    <td>R1 C10</td>
    <td>R1 C11</td>
    <td>R1 C12</td>
    <td>R1 C13</td>
  </tr>
</table>

Answer 2

在这一行

accountnumercell=this.cells[0].innerHTML;

“此”绑定到您要将侦听器附加到的单元格。

如果您希望它引用单元格的行，则应执行

tablewithdrawal.rows[i].cells[13].onclick = (function()
    accountnumercell=this.cells[0].innerHTML;
    alert(accountnumercell);
).bind(tablewithdrawal.rows[i]);

顺便说一句，onclick方法已被弃用，并且不应在JavaScript的当前版本中再使用。反过来，您可以像这样写它

function selectedRowToInput() {
  for (let i = 0; i < tablewithdrawal.rows.length; i++) {
    let row = tablewithdrawal.rows[i];

    row.cells[13].addEventListener('click', () => {
        accountnumercell = row.cells[0].innerHTML;
        alert(accountnumercell);
    });
  }
}

Javascript表单元格值位于单击的表单元格值内

2 个答案: