Question

我正在尝试创建一个嵌套表，通过在用户单击之后添加一行然后在新行中添加一行，添加一个表格，其中包含所显示项目的其他详细信息。嵌套类型的示例如下所示：

<table>
  <tr id="1">
    <td></td>
    <td></td>
  </tr>
  <tr id="2">
    <td></td>
    <td></td>
  </tr>
</table>

<table>
  <tr id="1">
    <td></td>
    <td></td>
  </tr>
  <tr id="1a">
    <table>
      <tr>
        <td></td>
        <td></td>
      </tr>
    </table>
  </tr>
  <tr id="2">
    <td></td>
    <td></td>
  </tr>
</table>

Jquery选择用户点击并向PHP询问详细信息，然后按如下方式添加：

$.ajax({
    type: "POST",
    url: "php/getDetail.php",
    data: {
        id: data_id
    },
    cache: false,
    success: function(data) {
        $('#' + row_id).after(data);
    }
});

这会将行添加到原始表中，但它会省略嵌套表的封闭标记，最后会得到：

<table>
  <tr id="1">
    <td></td>
    <td></td>
  </tr>
  <tr id="2">
    <td></td>
    <td></td>
  </tr>
</table>

<table>
  <tr id="1">
    <td></td>
    <td></td>
  </tr>
  <tr id="1a">
        <td></td>
        <td></td>
  </tr>
  <tr id="2">
    <td></td>
    <td></td>
  </tr>
</table>

看起来在Jquery调用和浏览器呈现之间的某个位置，嵌套的表标签被剥离了。有没有其他人遇到过这个？

Answer 1

嵌套table无法成为tr的直接孩子，您可以将其添加到tr代码中：

<table>
  <tr id="1">
    <td></td>
    <td></td>
  </tr>
  <tr id="1a">
     <td>
        <table>
           <tr>
              <td></td>
              <td></td>
           </tr>
        </table>
     </td>
  </tr>
  <tr id="2">
    <td></td>
    <td></td>
  </tr>
</table>

注意： id属性在同一文档中应该是唯一的，请尝试使用常用类。

希望这有帮助。

Answer 2

归功于Rory McCrossan。以下是正确功能的修改HTML：

<table>
  <tr id="1">
    <td></td>
    <td></td>
  </tr>
  <tr id="1a">
    <td colspan=2>
      <table>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr id="2">
    <td></td>
    <td></td>
  </tr>
</table>

删除嵌套的HTML表格标签

2 个答案: