DOM вопросы о манипулировании таблицами

Question

Я делаю некоторые манипуляции и поиск значений, хранящихся в таблице.

Каждая строка содержит запись, где каждый столбец представляет свойство этой записи.Очень похоже на то, как вы обычно думаете о таблице базы данных.

Итак, мой первый вопрос: это безопасная / приемлемая / переносимая практика для доступа к элементам в строке с использованием известных индексов childNodes [] строки?

Учитывая таблицу этого примера:

<table id='sometable'>
    <thead><tr><th>Name</th> <th>Age</th></tr></thead>
    <tbody>
       <tr><td>Bob</td><td>25</td></tr>
       <tr><td>Alice</td><td>31</td></tr>
    </tbody>
</table>

Можно ли делать что-то подобное?

  /* Get just the 'tbody' rows, i.e. not the header row */
  function getTableBodyRows(tblName){
    return document.getElementById(tblName).getElementsByTagName('tbody')[0].getElementsByTagName('tr');
  }

  /* Get the 'name' value for each row */
  function getNames( ){
     var rows = getTableBodyRows('sometable');
     var names = [];
     for( var i=0; i < rows.length; i++ ){
         /* This line assumes childNode[0] of the row is the 'name' cell (td) which
            contains only a single text node.  */
         names.push( rows[i].childNodes[0].childNodes[0].nodeValue);
     }
     return names;
  }

Помимо того факта, что я бы определил значение для представления номеров столбцов вместо использования литерала, есть ли что-то не так сэтот подход?

Одна альтернатива, о которой я подумал, - добавить атрибут класса к каждому <td> для идентификации содержимого ячейки, а затем использовать метод getElementsByClassName() для извлечения отдельных значений, но, похоже,Подобная производительность значительно повлияла бы на большие таблицы.И результат в написании большего количества кода для небольшой выгоды.

Существуют ли другие распространенные методы для выполнения таких задач, как "получить значение 'name' из строки таблицы 'x'"?

Я должен такжеобратите внимание, что я генерирую свои таблицы с помощью javascript, поэтому я не думаю, что мне нужно беспокоиться о том, как разные браузеры могут или не могут рассматривать пробелы как childNode.

Answer 1

"Является ли безопасным / приемлемым / переносимым способом доступа к элементам в строке с использованием известных индексов childNodes [] строки?"

Если под элементами вы подразумеваете только клетки, то нет. Вам следует использовать свойство .cells строки, чтобы избежать потенциального пробела между ячейками.

Я бы обновил ваш код так:

  function getNames( ){
     var rows = document.getElementById('sometable').tBodies[0].rows;
     var names = [];
     for( var i=0; i < rows.length; i++ ){
         names.push( rows[i].cells[0].childNodes[0].nodeValue);
     }
     return names;
  }

Обратите внимание, что я также использовал свойство .tBodies table и свойство .rows tbody.

Вы также можете использовать свойство .rows непосредственно на table, чтобы получить все строки в таблице.

---

Я пропустил ваше последнее предложение о пробелах, но я все равно использовал бы встроенные коллекции, которые предоставляют таблицы, вместо методов выбора DOM.

Нет смысла строить новые коллекции, когда они прямо там ждут вас. ;)

Хотя childNodes будет работать, когда нет пробелов, лучше использовать .cells.