Не могу выбрать элемент HTML с Javascript

     <body>
    <table id="table_x">
        <tbody>
            <tr>
                <td></td>                         
                <td>this box should be selected</td>
                <td></td>
                <td></td>
           </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
     </table>
  </body>

С помощью следующего кода javascript я хочу выбрать второй "ящик" в первой строке таблицы с идентификатором "table_x":

        var matrix = document.querySelector("#table_x");
        var row;
        var box;

        function select(x,y){
            row = matrix.childNodes[x];
            box = row.childNodes[y];
            return box;
        }

        var test = select(0,1);

Однако, когда я хочу вывести элемент в консоль (используя команду console.log(test);), я просто получаю "undefined". Что не так с моим выбором элемента HTML?

Источник

4 ответа

Решение

Я собираюсь предположить, что вы пытаетесь устроить скандал x, а затем получить клетку y от него. (Я бы использовал y для строк и x для клеток, но ваш код, кажется, делает обратное.)

Если это так, вы не хотите использовать childNodes потому что это включает в себя не только элементы, но и узлы комментариев, текстовые узлы и т. д.

Отдельно, вы хотите убедиться, что matrix относится к tbody элемент, а не table элемент..

Тогда вы можете использовать любой из них; обратите внимание, что один из них даже не нуждается в matrix переменная:

function select1(x, y) {
  return matrix.children[x].children[y];
}

function select2(x, y) {
  return matrix.rows[x].cells[y];
}

function select3(x, y) {
  var selector = "#table_x tr:nth-child(" + (x + 1) + ") > td:nth-child(" + (y + 1) + ")";
  return document.querySelector(selector);
}

Пример всех трех:

var matrix = document.querySelector("#table_x tbody");

function select1(x, y) {
  return matrix.children[x].children[y];
}

function select2(x, y) {
  return matrix.rows[x].cells[y];
}

function select3(x, y) {
  var selector = "#table_x tr:nth-child(" + (x + 1) + ") > td:nth-child(" + (y + 1) + ")";
  return document.querySelector(selector);
}

select1(0, 0).style.color = "blue";
select2(1, 1).style.color = "green";
select3(2, 2).style.color = "red";
<table id="table_x">
  <tbody>
    <tr>
      <td>x</td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
    </tr>
    <tr>
      <td>x</td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
    </tr>
    <tr>
      <td>x</td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
    </tr>
    <tr>
      <td>x</td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
    </tr>
  </tbody>
</table>

Источник

При выборе чего-то в HTML-таблице вы можете воспользоваться специальным rows свойство таблицы и тому подобное cells свойство каждого ряда,

вот обновленная версия вашей функции (добавил id параметр):

   function select(x, y, id) {
     var matrix = document.getElementById(id)
     var row = matrix.rows[x];
     var box = row.cells[y];
     return box;
   }

   var test = select(0, 1, 'table_x').style.color = 'red';
<table id="table_x">
  <tbody>
    <tr>
      <td></td>
      <td>this box should be selected</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Источник

Вместо того, чтобы использовать childNodes использование rows а также cells специфичные для таблиц. Также вы можете сделать функцию меньше / быстрее, объединяя row а также box переменные в возвращении.

var matrix = document.getElementById("table_x");

function select(x,y){
  return matrix.rows[x].cells[y];
}

var test = select(0,1);
console.log(test);
<body>
    <table id="table_x">
        <tbody>
            <tr>
                <td></td>                         
                <td>this box should be selected</td>
                <td></td>
                <td></td>
           </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
     </table>
  </body>

Источник

Элементы DOM могут содержать как узлы элементов, так и текстовые узлы.

Первый дочерний узел table_x текстовый узел, а не элемент TBODY.

Чтобы пропустить текстовые узлы и работать только с узлами элементов, используйте children вместо childNodes,

function select(x, y) {
  row = matrix.children[x];
  box = row.children[y];
  return box;
}
Источник
Другие вопросы по тегам