Получить внутренний текст <td>и добавить новую строку с результатами

Question

У меня есть некоторые данные, отформатированные в таблицу. Я хочу установить кнопку onclick, которая получит URL ссылки внутри одного из TD в строке, а затем загрузит результаты в строке ниже. Вот пример строки. Предположим, что в таблице нет идентификаторов.

<tr>
    <td>Title of something</td>
    <td><a href="link_to_something.html">Link</></td>
    <td><button onclick="load_file(this.??);">Show Page</button></td>
</tr>

JavaScript должен будет:

function load_file( , ) {
    //  get the url in the second <td>
    //  urlencode the url
    //  append a new <tr><td colspan="3"></td></tr> below
    //  load some_file.php and pass the variable (file_url) and value (urlencoded) using the .load method in JQuery and load the results into the newly appended <td>
    }

Я прочитал о методе .load в JQuery. Можно ли загрузить результаты, если у TD нет идентификатора?

Полагаю, я мог бы установить идентификатор для всех элементов таблицы, если это оказалось бы слишком сложно без идентификаторов, но просто пытался сделать свой php-скрипт простым и делать вещи "по мере необходимости" с JQuery.

Answer 1

Вот пример сортов, которые вы можете использовать

Ваш HTML.Обратите внимание, что я добавил к кнопке класс и тип.

<table>
<tr>
    <td>Title of something</td>
    <td><a href="link_to_something.html">Link</></td>
    <td><button class='thebutton' type='button'>Show Page</button></td>
</tr>
</table>

Ваш JS

$('.thebutton').click(function(){
    var $this = $(this);
    var $td   = $this.parent('td');
    var url = $td.prev().children('a:first').attr('href');
    var row = '<tr><td class="data" colspan="3"></td></tr>';
    $td.parent().after(row);

    //var data  = getData(); //use whatever method you want - $.post, $.get, $.load
    var data  = 'hello';
    $td.parent().next().children('td:first').html(data);
});

http://jsfiddle.net/jomanlk/4d39N/

Вам необходимо изменить егозагружайте свои данные любым удобным вам способом, но все остальное работает.

Answer 2

Я бы порекомендовал взглянуть на документацию, касающуюся встроенных методов jQuery для обхода DOM. Таким образом, вы можете получить доступ к тд с точки зрения их отношения друг к другу, а не с определенным идентификатором.

http://docs.jquery.com/DOM/Traversing