Question

I want to use jQuery to insert an image after a certain row of a HTML table. I tried to use the appendTo function, but it did not work. I guess its something wrong with my jQuery selector. Can anyone correct my code?

Thanks!

HTML code:

<div class="articles">
<table align="center">
<tr><th><label for="id_chemical_name">Chemical name:</label></th><td><textarea id="id_chemical_name" rows="2" cols="17" name="chemical_name">Spinosad</textarea></td></tr>
<tr><th><label for="id_T">Number of time intervals:</label></th><td><input type="text" name="T" value="10" id="id_T" /></td></tr>

<!--I would like to insert an image after the row 'Number of time intervals'-->

<tr><th><label for="id_a">Logistic model parameter (&#945;):</label></th><td><input type="text" name="a" value="0.746" id="id_a" /></td></tr>
</table></div>

jQuery code:

<script type="text/javascript" src=" ../stylesheets/jquery-1.7.2.js"></script> 
<script>
    $(document).ready(function(){ 
    $('<img src = "https://www.google.com/images/srpr/logo3w.png" />').appendTo('#id_T');
})
</script>

Here is a demo of the question.

Answer 1

You cannot insert an image directly to a table without enclosing it in a tr and td/th element. I think this is what you are trying to do:

$('<tr><th colspan="2"><img src = "https://www.google.com/images/srpr/logo3w.png" /></th></tr>').insertAfter($("#id_T").parent("td").parent("tr"));