Javascript: Перейти к следующей ячейке в таблице

Question

У меня есть таблица, в которой первый столбец является флажком, а второй имеет текст. Когда флажок установлен, я хочу знать соответствующее значение, которое находится в следующей ячейке. Скажите, пожалуйста, как это сделать. Если я использую функцию getelementsbytagname, она возвращается с начала документа.

Answer 1

Предполагая, что вы используете JQuery (или какой-либо другой цивилизованной рамки), это довольно легко:

$('table#yourTableId input:checkbox').click(function(ev) { 
    if (this.checked) { 
    // not sure what you mean by "want to know" ... 
    console.log($(this).closest('tr').find('td:nth-child(2)').html()); 
    } 
}); 

Вы могли бы это сделать с объектом «вживую» события JQuery так же, which'd быть дешевле, если есть есть много флажков.

Answer 2

Самый простой способ - использовать jQuery или аналогичную библиотеку, которая реализует селектора CSS3.

$('table input:checked').parent().parent().find('td.nth-child(2)').text(): 

Вы также можете связать на события изменения флажков

$('input:checkbox').change = function(){ 
    val = $(this).parent().parent().find('td.nth-child(2)').text(): 
} 

Answer 3

Это довольно просто сделать без JQuery. У нас есть вход внутри td поэтому мы можем перейти на следующий уровень и получить следующий родственный:

var nextTd = myInput.parentNode.nextSibling; 

Поскольку некоторые браузер вставлять пустые текстовые узлы между td с мы можем сделать следующее, чтобы убедиться, что мы на правый узел:

if (nextTd.tagName != "TD") 
    nextTd = nextTd.nextSibling; 

---

Кроме того, FWIW, getElementsByTagName может быть вызвана из любого узла. Таким образом, если у меня есть таблица, я могу назвать

myTable.getElementsByTagName("tr"); 

Чтобы вернуть все строки внутри myTable.