单击的表单元格值中的Javascript表单元格值
单击的表单元格值中的Javascript表单元格值
提问于 2018-10-22 03:55:04
我创建了一个表，在这个表中，我向特定的单元格添加了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);
};回答 2
Stack Overflow用户
回答已采纳
发布于 2018-10-22 04:05:22
在这条线上
accountnumercell=this.cells[0].innerHTML;"this“绑定到您要将侦听器附加到的单元格。
如果您想让它引用单元格所在的行，应该这样做
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);
});
}
}Stack Overflow用户
发布于 2018-10-22 04:02:28
您遇到的错误是因为this引用了事件处理程序中的tablewithdrawal.rows[i].cells[13]。因此，this.cells[0]没有意义，因为它意味着您正在尝试获取并不存在的tablewithdrawal.rows[i].cells[13].cells[0]。
现在，根据您在问题中提供的内容，在我看来，您正在尝试显示行中第一个单元格的内容，您单击了第14个单元格。如果我错了，请纠正我。
解决方案1:
您需要使用的不是this，而是行，即tablewithdrawal.rows[i]，因此请尝试将其缓存在循环中，并在事件处理程序中使用它来访问行的第一个单元格。
/* 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52919281
复制相关文章
相似问题