Как проверить индекс ячейки таблицы в JavaScript - PullRequest
Новая
       1

Как проверить индекс ячейки таблицы в JavaScript

0 голосов
/ 10 февраля 2019

У меня есть 3 строки с 4 столбцами в JavaScript и я пытаюсь понять, как работают 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>

Ответы [ 2 ]

0 голосов
/ 10 февраля 2019

У вас есть пара проблем с вашим кодом.Во-первых, ваше объявление параметра 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>
0 голосов
/ 10 февраля 2019

Вы не должны передавать 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>
...