Problem appending a <div> inside table row column or <td>
I was trying to include an rateit plugin "
http://rateit.codeplex.com/ " or a star rater to every table row I dynamically add. Here is the problem, when I try to manually put the code "<div id='rateit10' class='rateit'></div>" in the html code inside the table i works perfectly BUT when I try this:
- function add(id,skilldesc)
- {
- var table = $('#lower');
- table.append("<tr id='" + id + "'><td><text>" + skilldesc + ":</text></td><td><div id='rateit10' class='rateit'></div> </td></tr>");
- }
appending the rateit <div> using JS append()
nothing is displayed on the second column which is the rateit <div> should show.
and this is the table
- <table id='lower'>
- <tr>
- <td width='40%'><h2 id='skillhead2'>Skills</h2></td><td width='15%'><h2 id='skillhead2'>Rating</h2></td><td width='35%'><h2 id='skillhead2'>Year of exp.</h2></td><td width='10%'><h2 id='skillhead2'>Top 5 Skills</h2></td>
- </tr>
- <?php //When I manually place this here <tr><td>RATEIT</td><td><div id='rateit10' class='rateit'></div></td></tr>?>
- </table>
It works fine, but what I want is the rateit <div> should display on every row I dynamically add.
Hope someone would help me, this caused me a great headache and i'm very confused what to do.