不寻常的Ajax响应行为 - <style>和<tr>似乎彼此不喜欢</style>

Question

问题

当使用<tr>标记时，

<td>和<style>标记会从HTML中删除。

HTML

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr class="first">
            <td>Abc</td>
            <td>abc@def.com</td>
        </tr>
    </tbody>
</table>
<input type="button" id="add" value="Add Row" />

的jQuery

$(document).ready(function () {
    $(document).on('click', '#add', function () {
        $.ajax({
            type: 'post',
            url: 'abc.php',
            success: function (ret) {
                $('tr.first').after(ret);
            }
        });
    });
});

abc.php（案例1）

<style type="text/css">
  .someclass{
     font-weight:bold;
  }
</style>
<tr>
    <td colspan="2">
        <div class="someclass">Something goes here</div>
    </td>
</tr>

abc.php（案例2）

<tr>
    <td colspan="2">
        <div class="someclass">Something goes here</div>
    </td>
</tr>

发生了什么？

在 CASE 1 中，最终结果为

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr class="first">
            <td>Abc</td>
            <td>abc@def.com</td>
        </tr>
        <div class="someclass">Something goes here</div>
        <!-- where did tr and td go? -->
    </tbody>
</table>

在 CASE 2 （预期输出）中，最终结果为

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr class="first">
            <td>Abc</td>
            <td>abc@def.com</td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="someclass">Something goes here</div>
            </td>
        </tr>
    </tbody>
</table>

• 这是一种正常行为还是我遇到某种错误？
• 如果它应该表现得那样，背后的原因是什么？

Answer 1

您将style置于无效的标记结构的位置，而是将其放在head中，甚至可以放在table之外：

<style type="text/css">
  .someclass{
    font-weight:bold;
  }
</style>

<table>
   ...other stuff related to table
</table>

Answer 2

这是因为您无法在<tbody>代码中添加任何内容，但只有<tr>，其他任何代码都无效（包括<style>和<div> ）

HTML 4.0 specification for tbody

  

表行可以分组为表头，表脚和一个或   更多桌面部分，使用THEAD，TFOOT和TBODY元素，   分别。此划分使用户代理能够支持滚动   桌子的主体独立于桌子的头部和脚部。很久   表格是打印的，表头和脚的信息可能是   在包含表格数据的每个页面上重复。

     

桌头和桌脚应包含有关的信息   表的列。 表正文应包含多组表数据。

     

如果存在，则每个THEAD，TFOOT和TBODY都包含一个行组。每   行组必须至少包含一行，由TR元素定义。

创建无效标记会产生意外结果。如有疑问，请在http://validator.w3.org/

检查您的标记

您可以（如您所知）将样式放在<td>内，这是有效的。我不建议这样做。一个更好的解决方案是将它放在页面的顶部或底部附近，或者更好地放在外部.css文件中，然后引用它。