Inserting a row into an empty table?
in Using jQuery
•
12 years ago
Hi,
I have a need to use jquery to insert a row into a table (individual cells within row include images, input box, radio buttons; each with their own attributes). So far i've only been able to append rows to existing rows, or clone an existing row. Is it possible to insert a new row? The table html is already present. I have searched high and low for examples of this to no avail.
Here is what the empty table looks like:
- <!-- sub table for answer options -->
- <table id="white_background" cellpadding="0" border="0">
- <tr><td>
- <table id="answer_options" cellspacing="1" cellpadding="3" border="0">
- <thead>
- <tr >
- <th class="style3" >Select</th>
- <th class="style3" colspan="3">Display<br />Order</th>
- <th class="style3" style="text-align:left">Choice Text</th>
- <th class="style3" style="text-align:center">Default Selection</th>
- <th class="style3" style="text-align:center">Edit Answer<br />Text/Options</th>
- <th class="style3" style="text-align:center">Delete</th>
- </tr>
- </thead>
- <tbody id="container">
- </tbody>
- </table>
- </td></tr>
- </table>
This is the row that needs to be inserted into the empty tbody. It will be inserted each time a user clicks on a "add row" link.
- <tr class="cell">
- <td style="text-align: center">
- <input class="formbuttons" type="checkbox" name="selected"/>
- </td>
- <td style="text-align: center">
- <img class="up" alt="" src="img/icon_sortup.gif"/>
- </td>
- <td style="text-align: center">1</td>
- <td style="text-align: center">
- <img class="down" alt="" src="img/icon_sortdown.gif"/>
- </td>
- <td>
- <input class="formbuttons" type="text" name="choicetext" size="40" maxlength="1024"/>
- </td>
- <td style="text-align: center">
- <input id="defaultval" class="formbuttons" type="radio" value="1" name="defaultyn"/>
- </td>
- <td style="text-align: center">
- <p>
- <a name="modal" href="#dialog">Edit</a>
- </p>
- </td>
- <td align="center"><img width="10px" height="10px" class="delete" src="img/del.png" /></td>
- </tr>