Как получить содержимое ячейки в таблице с помощью jQuery?

Question

У меня есть таблица Bootstrap, как это,

<table class="table table-striped table-bordered"> 
    <tr><th>First Name</th><th>Last Name</th><th>Age</th><th>Delete</th></tr> 
    <tr><td>Mickey</td><td>Mouse</td><td>5</td><td><button type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-search"></span></button></td> 
    <tr><td>Tom</td><td>Cat</td><td>6</td><td><button type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-search"></span></button></td> 
    <tr><td>Pooh</td><td>Bear</td><td>4</td><td><button type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-search"></span></button></td> 
    <tr><td>Donaled</td><td>Duck</td><td>7</td><td><button type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-search"></span></button></td> 
    <tr><td>Jerry</td><td>Mouse</td><td>8</td><td><button type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-search"></span></button></td> 
</table 

Когда пользователь нажимает на кнопку поиска, я хочу, чтобы вывести ПгвЬЫате, который является первой ячейки этой строки в другую <div>. Как мы можем добиться этого с помощью jQuery?

Вот ссылка на то, что я сделал до сих пор - http://jsbin.com/xenapucisi/edit?html,output

Answer 1

Это должно сделать трюк.

$('button').click(function() { 
    var tr = $(this).parents('tr'); 
    var name = $('td:first', tr).text(); 
    $('#output').html(name); 
}); 

http://jsbin.com/gutivujewu/1/edit?html,js,output