javascript - 动态加载表格主体内容，无需更改表格标题

Question

html:

     $("#submit").click(function(event) {
         event.preventDefault()
         data = {
                start_date: start_date,
                end_date: end_date,
                name: name,
                code: code,
                extra_code: extra_code
            }
    
         $("tbody").load("http://127.0.0.1:5000/filter?"+ $.param(data), function(response, status, xhr ){
                $("tbody").append(response)
            })

    <table class="table table-bordered table-striped table-condensed table-hover" id="table2">
            <thead>
                <tr>
                    <th>Heading A</th>
                    <th>Heading B</th>
                    <th>Heading C</th>
                </tr>
            </thead>
            <tbody>
                 {% if users %}
                        {% for user in users %}
                            <tr>
                                <td>{{ user.date }}</td>
                                <td>{{ user.name }}</td>
                                <td>{{ user.event_body }}</td>
                                <td>{{ user.code }}</td>
                                <td>{{ user.extra_code }}</td>
                            </tr>
                        {% endfor %}
                    {% endif %}
            </tbody>
        </table>

我的页面上有一个过滤按钮，当我单击它时，整个表格都会重新加载，这使得它看起来很奇怪

我的问题是我们如何才能只操作表体？那么当用户单击提交按钮时，load 方法将触发并且仅添加表格行？

Answer 1

我也遇到过类似的情况，我需要将来自 PHP 服务器的数据仅在 tbody 中以 rows/tr 的形式显示在 HTML 表中。

我能够使用 HTML 和 jQuery 实现它。

只需将表格放在带有thead和tbody的HTML中，thead将包含静态标题，tbody有一个id来在jQuery中识别它，并将填充动态数据。

<table>
<thead>
    <tr>
        <td>ID</td>
        <td>Description</td>
        <td>Number</td>
        <td>Status</td>
    </tr>
</thead>

<tbody id="myTbody">

</tbody>

然后我使用 jQuery 从 PHP 获取动态数据并将它们显示为 tbody 中的 tr。

$("#myTbody").html(ret_ajxdata2.output);

通过 Ajax 从 php 文件获取值来获取输出。提供输出的 php 文件将输出排列在 tr 中，以获取每个唯一记录。 PHP...

$sql = "SELECT * FROM info";

    $result = mysqli_query($link, $sql);

    $out = "";


    if (mysqli_num_rows($result) > 0) {
        //RESULTS FOUND

        while($row = mysqli_fetch_assoc($result)) {
            // output data of each row

            $out .= '<tr class="tr-entry">';
            $out .= '<td>' . $row["id"] . '</td>';
            $out .= '<td>' . $row["description"] . '</td>';
            $out .= '<td>' . $row["no"] . '</td>';
            $out .= '<td>' . $row["status"] . '</td>';
            $out .= '</tr>';


        }

        $return["msg"] = "Products Found";
        $return["error"] = false;
        $return["output"] = $out;


    } else {
        //RESULTS NOT FOUND
        $return["msg"] = "No products found";
        $return["error"] = true;
    }

    echo json_encode($return);

也许您可以在服务器端安排所有 tr 数据，以便在发送时将输出简单地插入到客户端的 tbody 中。希望对解决您的问题有所帮助。