Question

我将一些数据格式化为表格。我想设置一个onclick按钮，它将获取行中某个TD内部链接的url，然后将结果加载到下面的行中。这是一行的例子。假设表中没有ID。

<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>
    }

我已经阅读了JQuery中的.load方法。如果TD没有ID，是否可以加载结果？

我想我可以为所有Table元素设置一个ID，如果在没有ID的情况下证明太难了，只是尝试保持我的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。这样你就可以根据彼此之间的关系来访问td，而不是使用特定的id。

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

获取a的innertext并添加带有结果的新行

2 个答案: