Получить таблицу из данных ячейки

Question

Так что это должно быть довольно просто, но, похоже, это заставляет меня споткнуться. У меня есть капля в ячейке в таблице. Когда это значение изменяется, я вызываю функцию javascript и передаю ее в функцию. Как мне получить таблицу? Пример кода:

<table><tr> 
<td>DATA</td> 
<td><select id='leadState' onChange='updateData(this)'><option selected='selected' value='new'>New</option><option value='old'>Contacted</option></select></td> 
</tr> 
</table> 

JavaScript:

function updateData(select) { 
    var table = select.parentNode.parentNode.parentNode; 
    var row = select.parentNode.parentNode; 
    var cell = select.parentNode; 
} 

Почему это не возвращает таблицу правильно?

Answer 1

Потому что вы забыли о tbody элемента (который не является обязательным, но большинство, если не все браузеры добавить к table обернуть tr элементов Попробуйте другой parentNode:.

function updateData(select) { 
       // select -> td -> tr  -> tbody -> table 
    var table = select.parentNode.parentNode.parentNode.parentNode; 
    var row = select.parentNode.parentNode; 
    var cell = select.parentNode; 
} 

JS Fiddle demo .

И вы действительно не должны пересекать table для каждого переменных:

function updateData(select) { 
    var td = select.parentNode, 
     tr = td.parentNode, 
     tbody = tr.parentNode, 
     table = tbody.parentNode; 
} 

JS Fiddle demo.

Предполагая, что вы хотели бы придерживаться простой JavaScript, и не хотелось бы, чтобы вручную перебирать DOM при извлечении элементов, здесь простая реализация равнинно-JavaScript в closest():

HTMLElement.prototype.closest = function (selector) { 
    var self = this.length ? this[0] : this; 
    while (self.tagName.toLowerCase() !== selector.toLowerCase() && self.tagName.toLowerCase() !== 'body') { 
     self = self.parentNode; 
    } 
    return self.tagName.toLowerCase() == 'body' ? this : self; 
} 

function updateData(select) { 
    var td = select.closest('td'), 
     tr = select.closest('tr'), 
     table = select.closest('table'); 
    console.log(td, tr, table); 
} 

JS Fiddle demo.

Answer 2

Ответ Дэвида Томаса, вероятно, лучший ответ. Хотя, если у вас есть jQuery на вашей странице, вы также можете использовать функцию «ближайший()».

$(select).closest('table') 

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