Выберите первого брата - PullRequest
Новая
       25

Выберите первого брата

22 голосов
/ 27 января 2010

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

У меня есть следующее: 

<tr>
    <td>3</td>
    <td>bob</td>
    <td>smith</td>
    <td>bob@example.com</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>bob@example.com</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);
}

Ответы [ 5 ]

17 голосов
/ 27 января 2010 
$( 'td:first-child', $( this ).parents ( 'tr' ) ).html ();

Это выберет первый элемент TD (: первый-дочерний фильтр) в родительском TR изображения. parents() возвращает все родительские элементы элемента, и мы фильтруем родительские элементы, так что возвращаются только элементы TR.

Также попробуйте написать свое изображение так: 

<img src="bobsmith.png" onclick="doSomething(this)" />

и ваша функция такова: 

function doSomething ( imgEl ) {
}

и используйте imgEl вместо this

2 голосов
/ 27 января 2010

Я бы назначил событие, используя 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, как показано выше.

2 голосов
/ 27 января 2010 
$('tr td:last-child img').click(function(){

    alert($('td:first-child',$(this).closest('tr')).text());

});
0 голосов
/ 21 апреля 2012

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

var product_code = jQuery(obj).parents('tr').children('.upc').text();
alert('product code'+product_code);

Это работает, потому что в ячейках нашей таблицы есть классы, такие как 1919191911919 для каждой строки.

Однако вы можете использовать другие селекторы из jQuery. Например .children ('# myid'), если в ячейке 19191919199191 установлены атрибуты id, а также любое число других селекторов, например .children (td: first), чтобы получить первую ячейку в той же строке.

0 голосов
/ 27 января 2010

Может быть, это кому-нибудь поможет. Это всего лишь часть всей статьи здесь .

Разница

Если вы хотите использовать это для доступа к элементу HTML, который обрабатывает событие, вы должны убедиться, что ключевое слово this действительно записано в свойство onclick. Только в этом случае он ссылается на элемент HTML, для которого зарегистрирован обработчик события. Так что если вы делаете 

element.onclick = doSomething;
alert(element.onclick)

вы получите 

function doSomething()
{
    this.style.color = '#cc0000';
}

Как видите, ключевое слово this присутствует в методе onclick. Поэтому это относится к элементу HTML.

Но если вы сделаете 

<element onclick="doSomething()">
alert(element.onclick)

вы получите 

function onclick()
{
    doSomething()
}

Это просто ссылка на функцию doSomething (). Ключевое слово this отсутствует в методе onclick, поэтому оно не ссылается на элемент HTML.

...