jquery - 使用ajax动态附加多个tr元素

Question

我有服务器生成的 html：

<div id="invContent">
    <tbody>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
        </tr>
        <tr>
            <td>D</td>
            <td>E</td>
            <td>F</td>
        </tr>
        <tr>
            <td>G</td>
            <td>H</td>
            <td>X</td>
        </tr>
    </tbody>
</div>

这个ajax调用：

& .ajax({
    url: path,
    datatype: "html",
    success: function (result) {
        $("#tableID>tbody").append($(result).find("#invContent").html());
    }
});

问题是没有附加 tr 和 td 标签，只有 td 的内容。

如何附加这些多个 tr？

Answer 1

Your selector is selecting and then appending the tbody element, which is probably generating content that is confusing to the browser (multiple tbody elements inside one table).

Try changing your success callback to:

$("#tableID>tbody").append($(result).find("#invContent>tbody").html());

An even better solution would be to update your server-side code to just return the tr elements so that you don't have to do any selecting/navigating in the response.

Answer 2

我终于解决了这个问题！

我只是将 tr 包装在 table 标记中：

<div id="invContent">

<table>
    <tbody>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
        </tr>
        <tr>
            <td>D</td>
            <td>E</td>
            <td>F</td>
        </tr>
        <tr>
            <td>G</td>
            <td>H</td>
            <td>X</td>
        </tr>
    </tbody>
<table
</div>

和success回调是：

$("#tableID>tbody").append($(result).find("#invContent>table>tbody").html());