Question

我有一个table table-bordered table-hover table-stripped表加载了一些数据。我用ajax重新加载行，表变得丑陋，失去了表边界，表悬停和表剥离引导类的所有属性。我该如何重新加载这些属性？它是否带有JS？

编辑：这是代码。

表：

<table class="table table-bordered table-hover table-stripped" id="data_list">
    <tr>
        <th>Lot</th>
        <th>size</th>
    </tr>
    <?php foreach ($lots as $lot): ?>
        <tr>
            <td><?php echo $lot['id']; ?></td>
            <td><?php echo $lot['size']; ?></td>
        </tr>
    <?php endforeach ?>
</table>

JS：

...
$.ajax({type: "POST",cache: false,url: '?', dataType: "html", data: submitdata,
    success: function(res) {
        $('#data_list').html(res);
    },
    error: function(xhr, ajaxOptions, thrownError) {
        bootbox.alert("There was an error, try again. "+thrownError);
    },
    async: true
});

AJAX响应：

<tr>
    <th>Lot</th>
    <th>Size</th>
</tr>
<tr>
    <td>38706000524</td>
    <td>30</td>
</tr>

Answer 1

table元素的内部需要tbody包装。在大多数浏览器中，如果你没有明确定义一个，它会自动为你包围一个内部。

如果您检查了网页生成的代码，您会注意到您在原始HTML中未指定tbody。

当您使用.html()替换内容时，浏览器不执行自动换行，因此您将丢失tbody。

您应该返回一个作为服务器代码的一部分并更新原始代码。

<table class="table table-bordered table-hover table-stripped" id="data_list">
    <tbody>
        <tr>
            <th>Lot</th>
            <th>size</th>
        </tr>
        <?php foreach ($lots as $lot): ?>
            <tr>
                <td><?php echo $lot['id']; ?></td>
                <td><?php echo $lot['size']; ?></td>
            </tr>
        <?php endforeach ?>
    </tbody>
</table>

或者在原始代码中添加一个，并将.html()替换代码更改为

 $('#data_list tbody').html(res);

Answer 2

我可以搞清楚。加载表时，bootstrap会添加

<tbody>

容器。如果稍后修改表，则不得覆盖该元素。

我从

更改了我的ajax响应

<tr>
    <th>Lot</th>
    <th>Size</th>
</tr>
<tr>
    <td>38706000524</td>
    <td>30</td>
</tr>

到

<tbody>
    <tr>
        <th>Lot</th>
        <th>Size</th>
    </tr>
    <tr>
        <td>38706000524</td>
        <td>30</td>
    </tr>
</tbody>

如何重新初始化已加载的引导表？

2 个答案: