使用ajax将行添加到表的末尾答案

【问题标题】：Adding row to end of table with ajax使用ajax将行添加到表的末尾
【发布时间】：2017-11-24 03:05:07
【问题描述】：

我有一个包含三列 [1] 类型、[2] 名称和 [3] 删除的表。该表的 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 来返回一个表格行。

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 插入表格末尾的方法？我试图在示例中做到详尽，但如果您需要更多信息来帮助回答我的问题，请告诉我。

【问题讨论】：

标签： php jquery html-table row

【解决方案1】：

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

只要拿出.html()，你就应该是金子了

编辑：哦，你可以打开它。

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

【讨论】：

【解决方案2】：

我看到您正在尝试将其附加到 tbody，但我在您的标记中没有看到 tbody。您是否正在使用一个但未显示该部分标记？如果没有，那么只需将其附加到您的表中：

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

【讨论】：

不错，如果您忘记了，大多数浏览器都会添加 tbody :)