Я пытаюсь выбрать внутреннее значение первого родного брата - с помощью jQuery - в среде, где я не могу изменить разметку html.
У меня есть следующее:
<tr>
<td>3</td>
<td>bob</td>
<td>smith</td>
<td>[email protected]</td>
<td>
<img src="bobsmith.png" onclick="doSomething()" />
</td>
</tr>
Я пытаюсь получить значение первого <td> со следующим:
function doSomething() {
var temp = $(this).parent().parent().children().filter(':first');
alert("you clicked person #" + temp.html());
}
Все, что я получаю, это null.
Я пробовал различные комбинации с помощью функции .siblings(), но безрезультатно.
Любые идеи?
Спасибо,
Примечание.. Я забыл упомянуть, что таблица, из которой извлекается выдержка, динамически загружается и обновляется от вызова ajax. Это может быть уместным для предложений, которые включают привязки.
Решение: Я пошел со следующим решением, вдохновленным принятым ответом:
<tr>
<td>3</td>
<td>bob</td>
<td>smith</td>
<td>[email protected]</td>
<td>
<img src="bobsmith.png" onclick="doSomething(this)" />
</td>
</tr>
и для jQuery javascript:
function startStopNode(el) {
var temp = $(el).parent().siblings(':first').html();
alert("you clicked: " + temp);
}
$( 'td:first-child', $( this ).parents ( 'tr' ) ).html ();
Это выберет первый элемент TD (: фильтр первого ребенка) в родительском TR изображения. parents() возвращает всех родителей элемента, и мы фильтруем родителей, чтобы возвращались только элементы TR.
Также попробуйте написать свое изображение так:
<img src="bobsmith.png" onclick="doSomething(this)" />
и ваша функция:
function doSomething ( imgEl ) {
}
и используйте imgEl вместо this
$('tr td:last-child img').click(function(){
alert($('td:first-child',$(this).closest('tr')).text());
});
Я бы установил событие с использованием jQuery, но это полностью зависит от вас.
$("table td:last img").click(function() {
var firstTd = $(this).parents("tr").find("td:first").html();
alert("you clicked person #" + firstTd);
});
Независимо от этого, вы можете использовать этот пример со своим собственным кодом:
function doSomething()
{
var firstTd = $(this).parents("tr").find("td:first-child").html();
alert("you clicked person #" + firstTd);
}
Ты прав. 'this' не передается, вам нужно отредактировать html, чтобы выполнить эту работу. Или просто используйте jQuery вместо этого, как показано выше.
Может быть, это поможет кому-то. Это всего лишь часть всей статьи здесь.
Разница
Если вы хотите использовать это для доступа к элементу HTML, который обрабатывает событие, вы должны убедиться, что это ключевое слово фактически записано в свойство onclick. Только в этом случае он ссылается на элемент HTML, на который зарегистрирован обработчик событий. Так что если вы делаете
element.onclick = doSomething;
alert(element.onclick)
вы получаете
function doSomething()
{
this.style.color = '#cc0000';
}
Как вы можете видеть, это ключевое слово присутствует в методе onclick. Поэтому он относится к элементу HTML.
Но если вы делаете
<element onclick="doSomething()">
alert(element.onclick)
вы получаете
function onclick()
{
doSomething()
}
Это просто ссылка на функцию doSomething(). Это ключевое слово отсутствует в методе onclick, поэтому оно не относится к элементу HTML.
У нас есть строка таблицы, где один столбец является действием, другие столбцы содержат данные. Один из столбцов содержит код продукта (UPC). Поэтому мы используем это для отображения кода продукта, когда кто-то нажимает кнопку действия:
var product_code = jQuery(obj).parents('tr').children('.upc').text();
alert('product code'+product_code);
Это работает, потому что наши ячейки таблицы имеют классы, такие как 1919191911919 для каждой строки.
Однако вы можете использовать другие селектора из jQuery. Например,.children('# myid'), если у вас есть атрибуты id, установленные в ячейке 19191919199191, а также любое количество других селекторов, таких как .children(td: first), чтобы получить первую ячейку в той же строке.