Question

我在JavaScript中有一个3行4列的表，试图理解DOM操作。我在表格的第一个单元格用粗边框勾勒出轮廓。我试图添加按钮以将较粗的边框移动到另一个单元格。现在，我只是专注于“向下”按钮，将边框向下移动到单个单元格中。在按钮的功能定义中，我为自己做错的事情感到困惑。

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h3></h3>

<table id="myTable">
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
    <td>cell 3</td>
    <td>cell 4</td>
  </tr>
  <tr>
    <td>cell 5</td>
    <td>cell 6</td>
    <td>cell 7</td>
    <td>cell 8</td>
  </tr>

  <tr>
    <td>cell 9</td>
    <td>cell 10</td>
    <td>cell 11</td>
    <td>cell 12</td>
  </tr>
</table>

<p></p>


<script>
//variable for the table.
var x = document.getElementById("myTable");

//index for the row number and cell number
var rowIndex= 0;
var cellIndex = 0;

//this outlines the cell's starting position.
x.rows[rowIndex].cells[cellIndex].style.border = "10px solid black";

//creation of the button
var button = document.createElement ("button");
button.innerText = "DOWN"
button.id = "d"
document.body.appendChild(button);

//I am trying to pass x to the function.  Then use the rowIndex and cellIndex to increment by 1
//depending on if the user wants to move the outline border up, down, left, or right.
//I just am trying to get the down button first.
button.addEventListener ("click", function(x){

//The purpose here is to change the outlined cell back to the default border of the table.
x.rows[rowIndex].cells[cellIndex].style.border = "1px solid black";

//The purpose here is to select the cell immediately below to outline it.
x.rows[rowIndex+1].cells[cellIndex].style.border = "thick solid black";

}
);




</script>

</body>
</html>

Answer 1

您不应将 x 传递给事件处理函数。传递 x 时，函数将创建一个具有该函数作用域名称的新变量，而不是在全局范围内定义的实际 x ，它引用了表。您可以重命名参数名称，也可以删除它，因为您没有在函数内部使用它：

//variable for the table.
var x = document.getElementById("myTable");

//index for the row number and cell number
var rowIndex= 0;
var cellIndex = 0;

//this outlines the cell's starting position.
x.rows[rowIndex].cells[cellIndex].style.border = "10px solid black";

//creation of the button
var button = document.createElement ("button");
button.innerText = "DOWN"
button.id = "d"
document.body.appendChild(button);

//I am trying to pass x to the function.  Then use the rowIndex and cellIndex to increment by 1
//depending on if the user wants to move the outline border up, down, left, or right.
//I just am trying to get the down button first.
button.addEventListener ("click", function(e){
    if(x.rows.length-1 == rowIndex) return false; // return if last row selected;
    //The purpose here is to change the outlined cell back to the default border of the table.
    x.rows[rowIndex].cells[cellIndex].style.border = "1px solid black";
    
    //The purpose here is to select the cell immediately below to outline it.
    x.rows[rowIndex+1].cells[cellIndex].style.border = "thick solid black";
    rowIndex++; // Increment the index
  }
);

table, td {
  border: 1px solid black;
}

<table id="myTable">
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
    <td>cell 3</td>
    <td>cell 4</td>
  </tr>
  <tr>
    <td>cell 5</td>
    <td>cell 6</td>
    <td>cell 7</td>
    <td>cell 8</td>
  </tr>

  <tr>
    <td>cell 9</td>
    <td>cell 10</td>
    <td>cell 11</td>
    <td>cell 12</td>
  </tr>
</table>

Answer 2

您的代码有几个问题。首先，您对按钮单击事件的参数x的声明将覆盖x事件目标的全局变量click，这是您要访问的变量。其次，您没有更新rowIndex，因此当您第二次单击按钮时，什么也没有发生。尝试以下代码段：

//variable for the table.
var x = document.getElementById("myTable");

//index for the row number and cell number
var rowIndex= 0;
var cellIndex = 0;

//this outlines the cell's starting position.
x.rows[rowIndex].cells[cellIndex].style.border = "10px solid black";

//creation of the button
var button = document.createElement ("button");
button.innerText = "DOWN"
button.id = "d"
document.body.appendChild(button);

//I am trying to pass x to the function.  Then use the rowIndex and cellIndex to increment by 1
//depending on if the user wants to move the outline border up, down, left, or right.
//I just am trying to get the down button first.
button.addEventListener ("click", function(){

//The purpose here is to change the outlined cell back to the default border of the table.
x.rows[rowIndex].cells[cellIndex].style.border = "1px solid black";

//The purpose here is to select the cell immediately below to outline it.
x.rows[++rowIndex].cells[cellIndex].style.border = "thick solid black";

}
);

<head>
<style>
table, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h3></h3>

<table id="myTable">
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
    <td>cell 3</td>
    <td>cell 4</td>
  </tr>
  <tr>
    <td>cell 5</td>
    <td>cell 6</td>
    <td>cell 7</td>
    <td>cell 8</td>
  </tr>

  <tr>
    <td>cell 9</td>
    <td>cell 10</td>
    <td>cell 11</td>
    <td>cell 12</td>
  </tr>
</table>

<p></p>



</body>

如何在JavaScript中检查表格的单元格索引

2 个答案: