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

#php #jquery #html-table #row

#php #jquery #html-таблица #строка

Вопрос:

У меня есть таблица с тремя столбцами [1] тип, [2] имя и [3] удалить. Идентификатор таблицы — «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 с классом «remove» для удаления строки. У меня получилось удалить строку, которая работает хорошо.

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

 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=addamp;doctorID=' recordID 'amp;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] установить dropdown .DoctorID должен быть пустым (это работает).

Когда я нажимаю кнопку .addPhysician, я получаю это как результат из предложения success в запросе 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 в конец моей таблицы? Я старался быть тщательным в своих примерах, но, пожалуйста, дайте мне знать, если вам понадобится дополнительная информация, чтобы помочь ответить на мой вопрос.

Ответ №1:

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

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

редактировать: о, и вы можете развернуть это в.

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

Ответ №2:

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

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

Комментарии:

1. неплохая идея, большинство браузеров добавят tbody, если вы забудете 🙂