Adding row to end of table with ajax

I have a table with three columns [1]type, [2]name, & [3] delete. The table's id is "physicianTable".

This is the format of the table.

<table width="100%" border="0" cellspacing="0" cellpadding="3" style="font-size:12px;" id="physicianTable">
      <tr>
        <td align="right" valign="top"><strong>Type</strong></td>
        <td align="left" valign="top"><strong>Name</strong></td>
        <td width="55" align="center" valign="top"><strong>Remove</strong开发者_高级运维></td>
      </tr>
      <?php echo $doctorRow;?>
    </table>

Also the $doctorRow looks like this:

$doctorRow .= '<tr class="residentDoctorID_'.$docRecid.' doctorRow '.$docRecid.'">
               <td align="right"><strong>'.$type.':</strong></td>
               <td align="left">'.$name.'</td>
               <td align="center">
                 <a href="'.$docRecid.'" class="remove">
                   <img src="../../../images/1307661708_delete.png" width="16" height="16">
                 </a>
               </td>

               </tr>';

When I load a page the table appears with types and name with a img with the class "remove" to delete the row. I have got the deletion of the row working well.

The part that I can't get working is adding a new row to the table. The data that is to be loaded is in the form of a tr. The page that I call has a php echo to return a table row.

echo '<tr>
       <td align="right"><strong>'.$recordType.'</strong></td>
       <td class="name">'.$doctorName.'</td>
       <td align="center">
       <a href="'.$recordID.'" class="remove">
         <img src="../../../images/1307661708_delete.png" width="16" height="16">
       </a>
       </td>
      </tr>';

This is the jquery ajax that I call:

$('.addPysician').live('click', function(){
        var recordID = $('.doctorID option:selected').val();
        var reskey = $('.reskey').val();
        var href = 'doctor/editResidentDoctor.php'
        $('.fade').remove();
        $.ajax({
            url: href,
            type: 'get',
            dataType: 'html',
            data: 'action=add&doctorID='+recordID+'&reskey='+reskey,
            success: function(resp){
                $('#physicianTable > tbody').append(($(resp).html()));
                $('.doctorID').val('');
                alert(resp);
            }
        });
    });

What I intend this to do is to [1] take the value of the dropdown box .doctorID (this works), [2] get the value of the hidden field .reskey (this works), [3] get the target url as the variable 'href' (this works), [4] call a get ajax request and return the information (table row) and insert it at the end of the #physicianTable (this is the part that is not working), and [5] set dropdown .doctorID to be blank (this works).

When I press the button .addPhysician I get this as the resp from the success clause in the ajax request:

<tr class="residentDoctorID_2308 doctorRow 2308">
   <td align="right"><strong>MMS, PA-C</strong></td>
   <td class="name">Dr. lastName, firstName</td>
   <td align="center">
     <a href="2308" class="remove">
       <img src="../../../images/1307661708_delete.png" width="16" height="16">
     </a>
  </td>
</tr>

However, only this is inserted into my table:

<td align="right"><strong>MMS, PA-C</strong></td>
<td class="name">Dr. lastName, firstName</td>
<td align="center">
  <a href="2308" class="remove">
    <img src="../../../images/1307661708_delete.png" width="16" height="16">
  </a>
</td>

As you can see I am missing the tr with its classes that I need. To try to solve the problem I put table tags around the tr that is in the php echo. This didn't work in Firefox because it did return the tr that I wanted but it wrapped it in a tbody tag messing up the table formatting.

Can anyone help by telling me a way to insert the full php into the end of my table? I tried to be thorough in my examples, but please let me know if you need more info to help answer my question.

.html() takes the html inside the object, in your case that'll be the <td>.

just take out the .html() and you should be golden

edit: oh, and you can unwrap it to.

$('#physicianTable > tbody').append(resp);

I see you're trying to append it to a tbody, but I don't see a tbody in your markup. Are you using one but not showing that part of the markup? If not, then just append it to your table:

$('#physicianTable').append(...)