如何在提交后隐藏已选中的表格行（PHP & JavaScript）-php教程-PHP中文网

如何在提交后隐藏已选中的表格行（PHP & JavaScript）

碧海醫心

发布： 2025-09-28 17:10:01

原创

796人浏览过

如何在提交后隐藏已选中的表格行（php & javascript）

本文将介绍如何在提交包含复选框的表格后，隐藏之前选中的行，而无需从数据库中删除这些数据。核心思路是在数据库中添加一个布尔类型的字段，用于标记行是否已被选中并提交。通过PHP和JavaScript的配合，实现表格数据的动态显示与隐藏。

1. 数据库结构调整

首先，需要在你的数据表（例如，示例中的 ff 表）中添加一个布尔类型的字段，用于标识该行是否已被选中并提交。假设我们添加的字段名为 checkbox，其默认值为 0 (表示未选中)。

ALTER TABLE ff ADD COLUMN checkbox BOOLEAN DEFAULT 0;

登录后复制

2. 修改表格显示逻辑 (PHP)

在生成表格的 PHP 代码中，添加一个条件判断，只显示 checkbox 字段值为 0 的行。

<form action="companies.php" method="post" onsubmit='checkform()'>
    <table border=2 style="width:1200px";>
    <?php
    // 查询数据库，获取数据
    $query = "SELECT * FROM ff"; // 可以根据需要添加 WHERE 条件
    $result = mysqli_query($connection, $query);

    while($ff = mysqli_fetch_assoc($result)) {
        if($ff['checkbox'] == 0){ // 只显示 checkbox 值为 0 的行
    ?>
        <tr>
            <td class="ttd"><input type="checkbox" value="<?php echo $ff['ID']; ?>" name="chk[]"> </td>
            <td class="ttd"><?php echo htmlentities($ff['ID']); ?> </td>
            <td class="ttd"><?php echo htmlentities($ff['Invoice_number']); ?>
            <input type="hidden" name="Inum[<?php echo $ff['ID']; ?>]" value="<?php echo $ff['Invoice_number']; ?>"></td>
            <td class="ttd"><?php echo htmlentities($ff['Invoice_date']); ?> </td>
            <td class="ttd"><?php echo htmlentities($ff['Month']); ?> </td>
            <td class="ttd"><?php echo htmlentities($ff['Space_name']); ?>
            <input type="hidden" name="Sname[<?php echo $ff['ID']; ?>]" value="<?php echo $ff['Space_name']; ?>"></td>
            <td class="ttd"><?php echo htmlentities($ff['Company_Name']); ?>
            <input type="hidden" name="Cname[<?php echo $ff['ID']; ?>]" value="<?php echo $ff['Company_Name']; ?>"></td>
            <td class="ttd"><?php echo htmlentities($ff['Amount']); ?>
            <input type="hidden" name="amount[<?php echo $ff['ID']; ?>]" value="<?php echo $ff['Amount']; ?>"></td>
            <td class="ttd" style="width:200px;"><?php echo htmlentities($x); ?>
            <input type="hidden" name="iban[<?php echo $ff['ID']; ?>]" value="<?php echo $ff['Iban']; ?>"></td>
            <td class="ttd"><?php echo htmlentities($ff['BIC']); ?>
            <input type="hidden" name="bic[<?php echo $ff['ID']; ?>]" value="<?php echo $ff['BIC']; ?>"></td>
        </tr>
    <?php
        } // end if
    } // end while
    ?>
    </table>
    <button type="submit" name="submit" value="submit" onclick='sendit()'>submit</button>
</form>

登录后复制

3. 更新数据库状态 (PHP)

在 companies.php 文件中，当处理提交的表单数据并生成 XML 文件后，更新数据库中对应行的 checkbox 字段值为 1。这里假设你通过 Invoice_number 来唯一标识每一行。

立即学习“PHP免费学习笔记（深入）”；

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

查看详情

if ($_POST['submit']){
    // XML 文件创建过程...

    // 更新数据库
    $invoice_number = $_POST['Inum'][$ff['ID']]; // 获取对应的 Invoice_number。  需要根据你的实际数据结构调整。
    $query = "UPDATE ff SET checkbox = 1 WHERE Invoice_number = '{$invoice_number}'";
    $result = mysqli_query($connection, $query);

    if($result && mysqli_affected_rows($connection) >= 0){
        $xml->formatOutput = true;
        $xml->save('../includes/xml/'.$filename) or die('XML Create Error') ;
        redirect_to("manage_content.php");
    }
}

登录后复制

注意：

$invoice_number 的获取方式需要根据你的实际 POST 数据进行调整。示例中假设 $_POST['Inum'][$ff['ID']] 包含了正确的发票号码。
确保 $connection 变量已正确初始化并连接到数据库。
redirect_to("manage_content.php"); 需要根据你的实际跳转页面进行调整。

4. JavaScript 代码 (可选优化)

虽然主要逻辑在 PHP 端实现，但 JavaScript 代码可以用来优化用户体验。例如，可以在提交表单前，禁用已选中的行，防止用户重复提交。

function checkform(){
    // 获取所有选中的复选框
    var checkboxes = document.querySelectorAll('input[name="chk[]"]:checked');

    // 禁用选中的行 (可选)
    checkboxes.forEach(function(checkbox) {
        var row = checkbox.parentNode.parentNode; // 获取复选框所在的行
        row.style.display = 'none'; // 隐藏该行，提供即时反馈
    });


    if (send == 1){
        console.log(send);
        //document.form[0].submit();  // 移除这行，让默认的 submit 行为发生
        return true; // 确保表单可以提交
    } else {
        return false;
    }

 }

登录后复制

重要提示: