Question

I have got a table where i want to insert html in a td on the next row.
I pasted one row below.

<tr class="content">
    <td align="center">
      <a class="version" href="theurl">click here to update the td in the row below</a>
    </td>
    <td align="left">col 2</td>
    <td align="left">col 3</td>
    <td align="left">col 4</td>
    <td align="left">col 5</td>
    <td align="left">col 6</td>
</tr>
<tr class="version" style="display: none;">
    <td colspan="6"></td>  <-- this is where i want to insert the new html in.
</tr>

my jquery script looks like this.

$("a.version").click(function () {
    var sLink = $(this).attr("href"); <-- this gets the link to retrieve data from
    var nexttr = $(this).parent().parent().next(".version"); <-- gets the next tr
    var nexttrtd = $(this).parent().parent().next(".version td:first"); <-- gets the first td in the next tr. alerting the colspan displays 6 (which is correct)

    nexttrtd.html("hello world"); <-- this wont insert the text in the td.
    nexttr.css("display", "");

    return false;
});

Now the question is, why doesn’t the html get shown in the td? I have tried append, innerHTML = “bla” and that won’t work either.

Think i’m doing things according the manual, but can’t really figure out where it goes wrong.

any ideas?

Answer 1

The next() probably fails as it tries to find a td:first element that’s next to the current tr. Try this instead:

$("a.version").click(function () {
    var sLink = $(this).attr("href"); <-- this gets the link to retrieve data from

    var nexttrtd = $(this).closest('tr').next('.version').find('td:first');
    nexttrtd.html("hello world"); // This will insert "hello world" to the td

    return false;
});

I’ve reduced some redundant code that didn’t seem to do anything. The weird thing is that you selected nexttr but then did the search for nexttrtd all over again from the start. You could have just used the nexttr element in aid:

var nexttr = $(this).closest('tr').next(".version"); // gets the next tr
var nexttrtd = nexttr.find('td:first'); // Gets the first td in that row