Jquery-получить значение первого td в таблице
Я пытаюсь получить значение первого td в каждом tr, когда пользователи нажимают "click".
результат ниже выведет наружу АА, ээ или ИИ. Я думал об использовании closest ('tr').. но он всегда выводит "Object object". Не знаю, что с этим делать.
мой html
<table>
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
<td>dd</td>
<td><a href="#" class="hit">click</a></td>
</tr>
<tr>
<td>ee</td>
<td>ff</td>
<td>gg</td>
<td>hh</td>
<td><a href="#" class="hit">click</a></td>
</tr>
<tr>
<td>ii</td>
<td>jj</td>
<td>kk</td>
<td>ll</td>
<td><a href="#" class="hit">click</a></td>
</tr>
</table>
в jQuery
$(".hit").click(function(){
var value=$(this).// not sure what to do here
alert(value) ;
});
6 ответов
$(this).parent().siblings(":first").text()
parent
дает <td>
по ссылке
siblings
все <td>
теги в <tr>
,
:first
дает первый сопоставленный элемент в наборе.
text()
дает содержимое тега.
это должно работать:
$(".hit").click(function(){
var value=$(this).closest('tr').children('td:first').text();
alert(value);
});
объяснение:
-
.closest('tr')
получает ближайший предок, который является<tr>
элемент (так что в этом случае строка, где<a>
элемент). -
.children('td:first')
получает все дочерние элементы этого элемента, но с:first
селектор мы сводим его к первому<td>
элемент. -
.text()
получает текст внутри элемента
как вы можете видеть из других ответов, есть более чем один способ сделать это.
в конкретном случае выше, вы можете сделать родитель/ребенок жонглирование.
$(this).parents("tr").children("td:first").text()
$(".hit").click(function(){
var values = [];
var table = $(this).closest("table");
table.find("tr").each(function() {
values.push($(this).find("td:first").html());
});
alert(values);
});
вы должны избегать $(".hit")
это действительно неэффективно. Попробуйте использовать делегирование событий.
установите firebug и используйте console.log
вместо alert
. Тогда вы увидите точный элемент вашего доступа.
Если вам нужно получить все td внутри tr без определения id для них, вы можете использовать код ниже:
var items = new Array();
$('#TABLE_ID td:nth-child(1)').each(function () {
items.push($(this).html());
});
приведенный выше код добавит все первые ячейки внутри таблицы в переменную массива.
вы можете изменить nth-child (1) что означает первую ячейку на любой номер ячейки, который вам нужен.
надеюсь этот код поможет вам.