jquery inserting html doesn't work

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

Answer 2

I tried your code and it works for me. Is jQuery included properly in your page header, without any typo? I tested it with

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;

Answer 3

Make sure your jQuery script is executed on the page. If it's not, the click event will never be added for your a tag.

Answer 4

hi!

got one part working now. key to get the td in the next tr was the following:

var nexttrtd = $(this).parent().parent().next("tr.version, td"); $.get(sLink, function(sData){ nexttrtd.html(""+sData+""); nexttr.css("display", ""); });

(a comma in "tr.version, td") The thing now is that html doesn't insert the sData string IN the but IN STEAD OF the .

That's why i went around that by inserting " too but surely this isn't the way it should be or what?

Is there a proper way to do this?

(appending the sData will but the sData next to the so that is not wanted either.

Answer 5

html doesn't insert the sData string IN the but IN STEAD OF the .

Use .append(), not .html()!