Question

I have some data formatted into a table. I want to setup an onclick button that will get the url of a link inside one of the TD’s in the row and then load the results in a row below. Here’s an example of a row. Assume there are no ID’s in the table.

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

The javascript will need to:

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

I have read up on the .load method in JQuery. Is it possible to load the results if the TD has no ID?

I guess I could set an ID for all the Table elements if this proves too difficult without ID’s, but just trying keep my php script simple and do the “as needed” stuff with JQuery.

Answer 1

Here’s an example of sorts you can use

Your HTML. Notice I added a class to the button, and a type.

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

Your 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/

You’ll need to change it to load your data whichever way you want, but everything else works.