2012-01-18 1 views
0

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

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

Итак, мой первый вопрос: безопасно ли/приемлемо/переносится практика доступа к элементам в строке с использованием известных индексов 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.

ответ

3

«Безопасная/приемлемая/переносная практика доступа к элементам в строке с использованием известных индексов 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.

+0

Также свойство 'rows' таблицы или тела, чтобы избежать такой же проблемы. Ах, ты уже упомянул об этом. –

+0

@TimDown: Да, но не явно. Я обновлю. –

+1

Да, я имел в виду только ячейки. Это отлично работает и дает гораздо более читаемый код. Благодарю. –