TEST

Question

如下所示，如果您单击“显示”按钮，将启动ajax请求，响应将在（隐藏）<div>和<div>中进行会显而易见的。

但<div>错误。它位于<tr>中，应该出现在1.1和1.2之间

这是一个小提琴，我做了一个例子，没有Ajax，只显示/隐藏文本“TEST”

如何正确解决这个问题？

Answer 1

您忘记了单元格（<td></td>）：

<Label onclick="doShow()"> <p> ---- CLICK ME (show) ----- </p> </label>
<Label onclick="doHide()"> <p> ---- CLICK ME (hide) ----- </p> </label>

<table class="table">
    <thead>
        <th> TITLE 1 </th>
        <th> TITLE 2 </th>
        <th> TITLE 3 </th>
    </thead>
    <tbody>
          <tr>
              <td> 1.1</td>
              <td> 2.1</td>
              <td> 3.1</td>
        </tr>
        <tr>
            <td><div class="class1" id="testdiv"><h1>TEST</h1> </div></td>
        </tr>
            <tr>
              <td> 1.2</td>
              <td> 2.2</td>
              <td> 3.2</td>
        </tr>
    </tbody>
</table>

http://jsfiddle.net/hescano/pt2w3/13/

Answer 2

无效将div置于tr内。您需要将div嵌套在tr的有效子项中。否则，浏览器会将无效元素放在其他位置，在这种情况下，它会将其放在表格之前。

如有疑问，请检查Specification。具体来说，检查可以使用此元素的上下文以了解可以放置元素的位置，以及内容模型部分，以了解您可以在该元素中立即放置的内容：

enter image description here

Answer 3

添加<td></td>标记以正确显示div：

小提琴示例： http://jsfiddle.net/agconti/pt2w3/14/

HTML

<Label onclick="doShow()"> <p> ---- CLICK ME (show) ----- </p> </label>
<Label onclick="doHide()"> <p> ---- CLICK ME (hide) ----- </p> </label>

<table class="table">
    <thead>
        <th> TITLE 1 </th>
        <th> TITLE 2 </th>
        <th> TITLE 3 </th>
    </thead>
    <tbody>
          <tr>
              <td> 1.1</td>
              <td> 2.1</td>
              <td> 3.1</td>
        </tr>
        <tr>
            <td><div class="class1" id="testdiv"><h1>TEST</h1> </div></td>
        </tr>
            <tr>
              <td> 1.2</td>
              <td> 2.2</td>
              <td> 3.2</td>
        </tr>
    </tbody>
</table>

像这样呈现：

----点击我（显示）-----

----点击我（隐藏）-----

第1标题标题2 标题3 1.1 2.1 3.1

TEST

1.2 2.2 3.2

DIV-定位错误

3 个答案:

TEST