Добавление строки в конец таблицы с помощью AJAX

Question

У меня есть таблица с тремя столбцами [1] type, [2] name и & [3] delete. Идентификатор таблицы - «physicianTable».

Это формат таблицы.

<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>

Также $ doctorRow выглядит так:

$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>';

Когда я загружаю страницу, появляется таблица с типами и именем с img с классом «удалить» для удаления строки. У меня удаление строки работает хорошо.

Часть, над которой я не могу работать, это добавление новой строки в таблицу. Данные, которые должны быть загружены, имеют форму tr. Страница, которую я вызываю, имеет php-эхо для возврата строки таблицы.

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>';

Это JQuery Ajax, который я называю:

$('.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);
            }
        });
    });

Что я намерен сделать, это [1] принять значение выпадающего списка .doctorID (это работает), [2] получить значение скрытого поля .reskey (это работает), [3] получить целевой URL-адрес в качестве переменной 'href' (это работает), [4] вызывает запрос get ajax, возвращает информацию (строку таблицы) и вставляет ее в конец таблицы #physicianTable (эта часть не работает) и [5] установите раскрывающийся список .doctorID пустым (это работает).

Когда я нажимаю кнопку .addPhysician, я получаю это как выражение от условия успеха в запросе ajax:

<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>

Однако в мою таблицу вставлено только это:

<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 с его классами, которые мне нужны. Чтобы попытаться решить проблему, я поместил табличные теги вокруг tr, который находится в php echo. Это не сработало в Firefox, потому что оно вернуло желаемое значение tr, но обернуло его в тег tbody, который испортил форматирование таблицы.

Может кто-нибудь помочь, подскажите мне, как вставить полный php в конец моего стола? Я старался быть тщательным в своих примерах, но, пожалуйста, дайте мне знать, если вам нужна дополнительная информация, чтобы помочь ответить на мой вопрос.

Answer 1

.html() принимает html внутри объекта, в вашем случае это будет <td>.

просто возьми .html() и ты должен быть золотым

edit: о, и вы можете развернуть его.

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

Answer 2

Я вижу, что вы пытаетесь добавить его к телу, но я не вижу в вашей разметке. Вы используете один, но не показывает эту часть разметки? Если нет, то просто добавьте его в таблицу:

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