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(...)