Javascript 为什么'；t我的局部视图渲染<；tr>；元素？

所以我试图创建一个表，其中表行是div，我从数据库中获取的数据构造了div

我似乎遇到了一个问题。。我得到了一段javascript，页面一准备好就开始运行，并且每10秒运行一次又一次。这个脚本的目的是使用ajax更新局部视图，这样我就不必刷新浏览器来查看表中的更改

<script type="text/javascript">
    $(document).ready(function () {
        setInterval(CheckAvailability, 10000);
        setTimeout
    });

    function CheckAvailability() {
        $.ajax({
            type: "POST",
            url: "/Dashboard/CheckChange",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            mimeType: "text/html",
            success: function (response) {
                if (response) {
                    $('#itemsss').load("/Dashboard/ReturnItems");
                    console.log("Updated!");
                }
                else {
                    console.log("Failed!");
                }
            }
        });
    };
</script>

这是我加载PartialView的地方

<div id="itemsss">
    <table id="foo-filtering" class="table table-bordered table-hover toggle-circle" data-page-size="7">
        <thead>
        </thead>
        <tr>
            <td>
                <partial name="_Item" />
            </td>
        </tr>
        <tfoot>
            <tr>
                <td colspan="5">
                    <div class="ft-right">
                        <ul class="pagination"></ul>
                    </div>
                </td>
            </tr>
        </tfoot>
    </table>
</div>

这就是实际的PartialView的样子

<tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td>

                <div class="container-1">
                    <div class="box-img">
                        <img src="@item.ProductImage" />
                    </div>

                    <div class="body">
                        <h3>@item.ItemName</h3>
                        <p>@item.SubTitle</p>
                    </div>

                    <div class="box-button">
                        <p>@item.SKU</p>
                    </div>

                    <div class="box-button">
                        <p class="mt-3 mr-2">$@item.Price</p>
                        <button class="btn btn-primary">Export</button>
                    </div>

                </div>
            </td>
        </tr>
    }
</tbody>

@foreach（模型中的var项目）
{
@item.ItemName
@项目.副标题

@item.SKU

$@item.Price
出口
}

这就是问题发生的地方。。当我第一次加载页面时，一切都很好，看起来很好，工作也很完美，但一旦第一次刷新。。或

.load（）。。它突然停止正常工作，我的意思是它不加载任何
元素

这就是DOM在我第一次加载页面时的样子，它还没有刷新，每个
td
都包含带有类
container-1
的div，因此它工作正常


下面是第一次刷新和之后每次刷新后的外观
jQuery调用
$（“#itemsss”）.load（“/Dashboard/ReturnItems”）
用新元素替换容器的现有内容-声明为

.load（）将匹配元素的HTML内容设置为返回的数据

替换
#itemsss
的
innerHTML
将清除table元素。因为
、
和
标记在表外无效，解析器会忽略它们，只留下
#itemss
包含
元素，如第二张图所示

如果成功的AJAX调用旨在更新整个表，则服务器可以发送该表的完整HTML，然后可以使用该HTML替换
#itemss
的内容，如本文所示。由于图1显示了多个
tbody
元素，我认为情况并非如此

我尝试在不同的条件下将
tbody
html附加到表中：有或没有标题，有或没有现有的表节。警告：我不是jQuery程序员-如果有用，请集成并修改最适合的：


“严格使用”；
函数appendTableBody（bodyHTML）{
让previous=$（“#foo filtering>tbody”）.last（）；
如果（！previous.length）{
previous=$（“#foo table>thead”）.last（）；
}
如果（先前的.length）{
previous.after（bodyHTML）；
}
否则{
$（“#foo筛选”）.prepend（bodyHTML）
}
}
appendTableBody（“追加部分”，true）

表头
表1第1节
表2第2节
表格底部
jQuery调用
$（“#itemsss”）.load（“/Dashboard/ReturnItems”）
用新元素替换容器的现有内容-声明为

.load（）将匹配元素的HTML内容设置为返回的数据

替换
#itemsss
的
innerHTML
将清除table元素。因为
、
和
标记在表外无效，解析器会忽略它们，只留下
#itemss
包含
元素，如第二张图所示

如果成功的AJAX调用旨在更新整个表，则服务器可以发送该表的完整HTML，然后可以使用该HTML替换
#itemss
的内容，如本文所示。由于图1显示了多个
tbody
元素，我认为情况并非如此

我尝试在不同的条件下将
tbody
html附加到表中：有或没有标题，有或没有现有的表节。警告：我不是jQuery程序员-如果有用，请集成并修改最适合的：


“严格使用”；
函数appendTableBody（bodyHTML）{
让previous=$（“#foo filtering>tbody”）.last（）；
如果（！previous.length）{
previous=$（“#foo table>thead”）.last（）；
}
如果（先前的.length）{
previous.after（bodyHTML）；
}
否则{
$（“#foo筛选”）.prepend（bodyHTML）
}
}
appendTableBody（“追加部分”，true）

表头
表1第1节
表2第2节
表格底部
将基于您的局部视图创建无效标记，因为您将
嵌入
将基于您的局部视图创建无效标记，因为您将
嵌入
中。这非常有趣！这也解释了为什么它会被消灭！我对
在回复之前将响应包装在合适的/tags中可能会解决问题感到有点困惑。
部分，您能澄清一下吗？@RileyVarga后端更改可能不需要或不可取，但这取决于表更新的确切目标。查看更新的答案进行讨论。我刚刚看到，
<tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td>

                <div class="container-1">
                    <div class="box-img">
                        <img src="@item.ProductImage" />
                    </div>

                    <div class="body">
                        <h3>@item.ItemName</h3>
                        <p>@item.SubTitle</p>
                    </div>

                    <div class="box-button">
                        <p>@item.SKU</p>
                    </div>

                    <div class="box-button">
                        <p class="mt-3 mr-2">$@item.Price</p>
                        <button class="btn btn-primary">Export</button>
                    </div>

                </div>
            </td>
        </tr>
    }
</tbody>