Question

在我的页面上，我有一个搜索输入字段和一个表格。

当用户搜索时，输入通过AJAX发送到返回结果的后端页面。这很好。

我尝试做的是让表单开始为空，然后由返回的结果填充。

我已将表单创建为：

<div class="input-div">Search 
        <input type="text" id="txt_search">
    </div>

    <div class='tableOne'><br/>
    <table>
        <thead>
        <th colspan="4" align="center">RESULTS</th>
        <tr class="res"><td colspan="4" align="center">Matches:</td></tr>
        <tr>
            <th align="center">COL1</th>
            <th align="center">COL2</th>
            <th align="center">COL3</th>
            <th align="center">COL4</th>
        </tr>
        </thead>

        <!-- results -->
        <div id="output">

        </div> 
        <!-- results -->

    </table>
    </div>

在表单中，我添加了一个名为DIV的输出，我现在正试图让我的返回结果显示在其中。

搜索完成后，返回的结果采用以下格式：

    <tr>
    <td>1a</td>
    <td>1b</td>
    <td>1c</td>
    <td>1d</td>
    </tr>

    <tr>
    <td>2a</td>
    <td>2b</td>
    <td>2c</td>
    <td>2d</td>
    </tr>

我使用JQuery来填充输出DIV：

         $('#output').html(data)

这会导致返回的数据出现在表格的上方和外部。

然而，如果我创建一个如果我手动将相同的数据添加到表中，布局就可以了......如下所示：https://jsfiddle.net/Lz49fe6x/1/

我做错了什么？如何让我的返回结果在表格中正确显示？

由于

Answer 1

div标签不能放在表格内，你必须切换tbody而不是div。

<div class="input-div">Search 
    <input type="text" id="txt_search">
</div>

<div class='tableOne'><br/>
<table>
    <thead>
    <th colspan="4" align="center">RESULTS</th>
    <tr class="res"><td colspan="4" align="center">Matches:</td></tr>
    <tr>
        <th align="center">COL1</th>
        <th align="center">COL2</th>
        <th align="center">COL3</th>
        <th align="center">COL4</th>
    </tr>
    </thead>

    <!-- results -->
    <tbody id="output">

    </tbody> 
    <!-- results -->

</table>
</div>

现在使用以下代码将您的行附加到此tbody中。

$('#output').html(data)

在https://jsfiddle.net/Lz49fe6x/2/

查看更新小提琴

Answer 2

你的div不是放在语法正确的地方。你可以在表格中加入div。 div inside table。但你缺少的是tbody。因此将你的div放入tbody并更改你的html如下所示再试一次

<table>
        <thead>
       ..............
        </thead>
        <tbody>
             <!-- results -->
            <div id="output">

            </div> 
            <!-- results -->
       <tbody>
</table>

JQuery - 更新表格内容

2 个答案: