php - 使用ajax将行添加到表的末尾

Question

我有一个包含三列的表 [1]type、[2]name 和 [3] delete。该表的 ID 是“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 及其所需的类。为了尝试解决这个问题，我在 php echo 中的 tr 周围放置了表格标签。这在 Firefox 中不起作用，因为它确实返回了我想要的 tr，但它把它包装在一个 tbody 标签中，打乱了表格格式。

任何人都可以告诉我一种将完整的 php 插入到我的表末尾的方法吗？我尽量在我的示例中做到全面，但如果您需要更多信息来帮助回答我的问题，请告诉我。

Answer 1

.html()获取对象内部的 html，在您的情况下为 <td> .

只需取出 .html()你应该是金色的

编辑:哦，你可以将它解包到。

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