Question

我遇到一个问题，即.html（）JQuery方法正在删除我的响应的tr / td标记。不确定从哪里开始。

响应：

<tr>
   <td>
      <input value="Blah">
   </td>
</tr>

JQuery完成所有工作：

$.get(options.addNewLink, function (template) {
    alert(template);
    obj.find('tbody').append(template);
}

附加到tbody的内容只是＆＃34;输入＆＃34;标签。警报功能显示所有数据都存在并且完好无损，因此所有tr和td元素都是如此。它只是在翻译中丢失了。

有什么建议吗？

Answer 1

我无法完全按照问题的要求重现该问题。在Chrome 72中使用JQuery 1.6（以及3.3.1）将响应放入字符串并附加到正文实际上对我来说还不错

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.js"></script>
        <script type="text/javascript">
            function test() {
                var template = '<tr><td><input value="Blah"></td><td>col2</td></tr>';
                var obj = $("#myTable");
                alert(template);
                obj.find('tbody').append(template);
            }
        </script>
    </head>
    <body>
        <table id="myTable" border="1">
            <tbody>
                <tr><td>foo</td><td>bar</td></tr>
            </tbody>
        </table>
        <button type="button" onclick="test();">Test</button>&nbsp;
    </body>
</html>

话虽如此，首先导致我提出这个问题的原因（并让我认为我的回答可能仍然对其他发现此问题的人有所帮助）是一个非常相似的问题，它试图从a中提取一些tr元素。响应并将其插入到我页面上的现有表中，看到所有tr和td都按照OP所述的方式被剥离了。

我的情况是返回一个包含两行的响应，一组在一个单行中，另一行在一个行脚中，因此我想将子节点从tbody和tfooter中分别复制到它们各自的目标节点中。我页面的表格。

这让我看到首先将响应文本解析为节点，以便能够在其中找到所需的节点子集以提取并复制到我的表中（与之相反，OP只是直接将其完整地附加到整个表中）。

尝试执行此操作，我突然发现在解析响应时所有tr，td都被剥夺了。

这是因为我的响应没有用表格标签包裹它们（因此解决方案是将响应更改为用表格标签（而不是div）包围），然后才可以将响应成功解析为html不进行tr，td剥离。

我怀疑这种剥离是jquery如何使用浏览器的本机DOM内容将html字符串解析为实际节点的副作用。当您仅将一个完整的包含trs的字符串直接附加到tbody中时，这是很好的，因为trs属于tbody-他们与朋友在一起，一切都是阳光和玫瑰，但是首先解析它们意味着jquery在后台进行设置字符串插入div的innerHTML中，其中未分配的trs和tds不在他们满意的位置，浏览器也不喜欢这样。

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.js"></script>
        <script type="text/javascript">

                theBodyPart
                    = '<tbody id="resultBody">'
                    + '<tr><td><input value="Hello"></td><td>World</td></tr>'
                    + '<tr><td>abc</td><td>123</td></tr>'
                    + '</tbody>';

                //An outer node is needed for the jquery find() (because find doesnt include the start node in its search)
                badResponse = '<div>' + theBodyPart + '</div>';
                goodResponse = '<table>' + theBodyPart + '</table>';

            function replaceBody(response) {
                var parsedResponse = $( response );
                alert('parsedResponse=' + parsedResponse.html()); //<-- you can see the tr, td stripping of badResponse here
                //parse the html, search for node, use first result
                //(this fails if wrapped in a div instead of a table because the tbody was stripped!)
                var resultBody = parsedResponse.find("#resultBody")[0]; 
                if(resultBody) {
                    $( "#myBody" ).html( $(resultBody).html());
                } else {
                    alert('resultBody not found');
                }
            }
        </script>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr><th>Foo</th><th>Bar</th></tr>
            </thead>
            <tbody id="myBody">
                <tr><td>old1</td><td>old2</td></tr>
            </tbody>
        </table>
        <button type="button" onclick="replaceBody(badResponse);">Bad</button>&nbsp;
        <button type="button" onclick="replaceBody(goodResponse);">Good</button><br/>
        <div id="message"></div>
    </body>
</html>

但是我仍然不知道为什么OP失败了，因为他们没有在追加之前尝试解析和提取响应！

停止JQuery .html（）从剥离tr / td标签

1 个答案: