【问题标题】:Get data from buttons populated in while loop从 while 循环中填充的按钮获取数据
【发布时间】:2021-10-05 06:21:51
【问题描述】:

我有一个循环遍历我的驱动程序表并使用驱动程序名称填充按钮

function driverMenu()
{
    global $conn;
    $query = mysqli_query($conn, "SELECT * FROM driver");

    while ($row = mysqli_fetch_assoc($query)) {
        $id = $row['DriverID'];
        $name = $row['driverName'];

        echo "<div class='col text-center'>
                <input type='submit' name='driverNameBtn' class='btn btn-primary rounded-pill text-light' value='{$name}'></input>
                </div>";
    }
}

然后我在另一个显示与驱动程序相关的工作的页面中调用该函数。

我现在需要弄清楚的是如何更改当他们点击不同的驱动程序按钮时显示的数据。

这是我的代码,它显示了数据库中当前的每个作业,但还没有按驱动程序过滤掉作业。但它确实按星期几对每个作业进行排序。

<?php ini_set('error_reporting', E_ALL); ?>
<?php ini_set('display_errors', 1); ?>
<?php ini_set('display_startup_errors', 1); ?>

<?php include '../header.php' ?>

<!-- Page Title -->
    <div class="container-sm text-dark px-3 p-4 truckList">
        <div class="row m-auto align-items-center">
            <?php include '../includes/functions.php'; driverMenu();?>
        </div>
    </div>

    <?php 
        global $conn;
        $monday = mysqli_query($conn, "SELECT *
                                        FROM openjobs
                                        INNER JOIN driver ON openjobs.driverName_fk = driver.driverName
                                        WHERE weekday(jobDate) = 0");

        $tuesday = mysqli_query($conn, "SELECT *
                                            FROM openjobs
                                            INNER JOIN driver ON openjobs.driver_fk = driver.DriverID
                                            WHERE weekday(jobDate) = 1");

        $wednesday = mysqli_query($conn, "SELECT *
                                            FROM openjobs
                                            INNER JOIN driver ON openjobs.driver_fk = driver.DriverID
                                            WHERE weekday(jobDate) = 2");

        $thursday = mysqli_query($conn, "SELECT *
                                            FROM openjobs
                                            INNER JOIN driver ON openjobs.driver_fk = driver.DriverID
                                            WHERE weekday(jobDate) = 3");

        $friday = mysqli_query($conn, "SELECT *
                                        FROM openjobs
                                        INNER JOIN driver ON openjobs.driver_fk = driver.DriverID
                                        WHERE weekday(jobDate) = 4");
    ?>

    <!-- Truck's Weekly Job List -->
    <div class="container-fluid bg-secondary darkContainer">
        <div class="container py-5 px-4 p-3 webWeeklyPlanTruckCard">
            <div class="row gy-2"> 
                <div class="col-12">               

                    <!-- Monday -->
                    <div class="card mondayJobCard my-1">
                        <div class="card-body">
                            <div class="row justify-content-between">
                                <div class="col-11">
                                    <h5 class="card-title">Monday ...</h5>
                                </div>
                                <div class="col-1">                            
                                    <a href="/pages/webAddJob.html" class="btn btn-primary btn-sm text-light rounded-pill">Add Job</a>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col pt-3">
                                    <table class="table table-bordered table-responsive">
                                        <thead>
                                            <tr class="table-light">
                                                <th scope="col" class="col-2">Job</th>
                                                <th scope="col">Driver</th>
                                                <th scope="col">Type</th>
                                                <th scope="col" class="col-2">Order #</th>
                                                <th scope="col" class="col-2">Reference</th>
                                                <th scope="col">Pallets</th>
                                                <th scope="col">Weight (kg)</th>
                                                <th scope="col" class="col-2">Status</th>
                                            </tr>
                                        </thead>

                                        <?php 
                                            while ($row = mysqli_fetch_assoc($monday)) {
                                                //$id = $row['DriverID'];
                                                $driverName_fk = $row['driverName_fk'];
                                                $jobName = $row['jobName'];
                                                $jobType = $row['jobType'];
                                                $orderNumber = $row['orderNumber'];
                                                $referenceNumber = $row['referenceNumber'];
                                                $pallets = $row['pallets'];
                                                $jobWeight = $row['jobWeight'];
                                                $jobStatus = $row['jobStatus'];
                                        
                                                echo "<tbody>
                                                        <tr>
                                                            <th>{$jobName}</th>
                                                            <th>{$driverName_fk}</td>
                                                            <td>{$jobType}</td>
                                                            <td>{$orderNumber}</td>
                                                            <td>{$referenceNumber}</td>
                                                            <td>{$pallets}</td>
                                                            <td>{$jobWeight}</td>
                                                            <td>{$jobStatus}</td>
                                                        </tr> 
                                                    </tbody>";
                                            }
                                        ?>

                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                            
                    <!-- Tuesday -->
                    <div class="card tuesdayJobCard my-2">
                        <div class="card-body">
                            <div class="row justify-content-between">
                                <div class="col-11">
                                    <h5 class="card-title">Tuesday ...</h5>
                                </div>
                                <div class="col-1">                            
                                    <a href="/pages/webAddJob.html" class="btn btn-primary btn-sm text-light rounded-pill">Add Job</a>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col pt-3">
                                    <table class="table table-bordered table-responsive">
                                        <thead>
                                            <tr class="table-light">
                                                <th scope="col" class="col-2">Job</th>
                                                <th scope="col">Driver</th>
                                                <th scope="col">Type</th>
                                                <th scope="col" class="col-2">Order #</th>
                                                <th scope="col" class="col-2">Reference</th>
                                                <th scope="col">Pallets</th>
                                                <th scope="col">Weight (kg)</th>
                                                <th scope="col" class="col-2">Status</th>
                                            </tr>
                                        </thead>

                                        <?php
                                            while ($row = mysqli_fetch_assoc($tuesday)) {
                                                //$id = $row['DriverID'];
                                                $driverName_fk = $row['driverName_fk'];
                                                $jobName = $row['jobName'];
                                                $jobType = $row['jobType'];
                                                $orderNumber = $row['orderNumber'];
                                                $referenceNumber = $row['referenceNumber'];
                                                $pallets = $row['pallets'];
                                                $jobWeight = $row['jobWeight'];
                                                $jobStatus = $row['jobStatus'];
                                        
                                                echo "<tbody>
                                                        <tr>
                                                            <th>{$jobName}</th>
                                                            <th>{$driverName_fk}</td>
                                                            <td>{$jobType}</td>
                                                            <td>{$orderNumber}</td>
                                                            <td>{$referenceNumber}</td>
                                                            <td>{$pallets}</td>
                                                            <td>{$jobWeight}</td>
                                                            <td>{$jobStatus}</td>
                                                        </tr> 
                                                    </tbody>";
                                            }
                                        ?>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Wednesday -->
                    <div class="card wednesdayJobCard my-2">
                        <div class="card-body">
                            <div class="row justify-content-between">
                                <div class="col-11">
                                    <h5 class="card-title">Wednesday ...</h5>
                                </div>
                                <div class="col-1">                            
                                    <a href="/pages/webAddJob.html" class="btn btn-primary btn-sm text-light rounded-pill">Add Job</a>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col pt-3">
                                    <table class="table table-bordered table-responsive ">
                                        <thead>
                                            <tr class="table-light">
                                                <th scope="col" class="col-2">Job</th>
                                                <th scope="col">Driver</th>
                                                <th scope="col">Type</th>
                                                <th scope="col" class="col-2">Order #</th>
                                                <th scope="col" class="col-2">Reference</th>
                                                <th scope="col">Pallets</th>
                                                <th scope="col">Weight (kg)</th>
                                                <th scope="col" class="col-2">Status</th>
                                            </tr>
                                        </thead>
                                        <?php 
                                          while ($row = mysqli_fetch_assoc($wednesday)) {
                                            //$id = $row['DriverID'];
                                            $driverName_fk = $row['driverName_fk'];
                                            $jobName = $row['jobName'];
                                            $jobType = $row['jobType'];
                                            $orderNumber = $row['orderNumber'];
                                            $referenceNumber = $row['referenceNumber'];
                                            $pallets = $row['pallets'];
                                            $jobWeight = $row['jobWeight'];
                                            $jobStatus = $row['jobStatus'];
                                    
                                            echo "<tbody>
                                                    <tr>
                                                        <th>{$jobName}</th>
                                                        <th>{$driverName_fk}</td>
                                                        <td>{$jobType}</td>
                                                        <td>{$orderNumber}</td>
                                                        <td>{$referenceNumber}</td>
                                                        <td>{$pallets}</td>
                                                        <td>{$jobWeight}</td>
                                                        <td>{$jobStatus}</td>
                                                    </tr> 
                                                </tbody>";  
                                          }
                                        ?>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Thursday -->
                    <div class="card thursdayJobCard my-2">
                        <div class="card-body">
                            <div class="row justify-content-between">
                                <div class="col-11">
                                    <h5 class="card-title">Thursday ...</h5>
                                </div>
                                <div class="col-1">                            
                                    <a href="/pages/webAddJob.html" class="btn btn-primary btn-sm text-light rounded-pill">Add Job</a>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col pt-3">
                                    <table class="table table-bordered table-responsive">
                                        <thead>
                                            <tr class="table-light">
                                                <th scope="col" class="col-2">Job</th>
                                                <th scope="col">Driver</th>
                                                <th scope="col">Type</th>
                                                <th scope="col" class="col-2">Order #</th>
                                                <th scope="col" class="col-2">Reference</th>
                                                <th scope="col">Pallets</th>
                                                <th scope="col">Weight (kg)</th>
                                                <th scope="col" class="col-2">Status</th>
                                            </tr>
                                        </thead>
                                        <?php
                                            while ($row = mysqli_fetch_assoc($thursday)) {
                                                //$id = $row['DriverID'];
                                                $driverName_fk = $row['driverName_fk'];
                                                $jobName = $row['jobName'];
                                                $jobType = $row['jobType'];
                                                $orderNumber = $row['orderNumber'];
                                                $referenceNumber = $row['referenceNumber'];
                                                $pallets = $row['pallets'];
                                                $jobWeight = $row['jobWeight'];
                                                $jobStatus = $row['jobStatus'];
                                        
                                                echo "<tbody>
                                                        <tr>
                                                            <th>{$jobName}</th>
                                                            <th>{$driverName_fk}</td>
                                                            <td>{$jobType}</td>
                                                            <td>{$orderNumber}</td>
                                                            <td>{$referenceNumber}</td>
                                                            <td>{$pallets}</td>
                                                            <td>{$jobWeight}</td>
                                                            <td>{$jobStatus}</td>
                                                        </tr>
                                                    </tbody>";
                                            }
                                        ?>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Friday -->
                    <div class="card fridayJobCard my-2">
                        <div class="card-body">
                            <div class="row justify-content-between">
                                <div class="col-11">
                                    <h5 class="card-title">Friday ...</h5>
                                </div>
                                <div class="col-1">                            
                                    <a href="/pages/webAddJob.html" class="btn btn-primary btn-sm text-light rounded-pill">Add Job</a>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col pt-3">
                                    <table class="table table-bordered table-responsive">
                                        <thead>
                                            <tr class="table-light">
                                                <th scope="col" class="col-2">Job</th>
                                                <th scope="col">Driver</th>
                                                <th scope="col">Type</th>
                                                <th scope="col" class="col-2">Order #</th>
                                                <th scope="col" class="col-2">Reference</th>
                                                <th scope="col">Pallets</th>
                                                <th scope="col">Weight (kg)</th>
                                                <th scope="col" class="col-2">Status</th>
                                            </tr>
                                        </thead>
                                        <?php
                                            while ($row = mysqli_fetch_assoc($friday)) {
                                                //$id = $row['DriverID'];
                                                $driverName_fk = $row['driverName_fk'];
                                                $jobName = $row['jobName'];
                                                $jobType = $row['jobType'];
                                                $orderNumber = $row['orderNumber'];
                                                $referenceNumber = $row['referenceNumber'];
                                                $pallets = $row['pallets'];
                                                $jobWeight = $row['jobWeight'];
                                                $jobStatus = $row['jobStatus'];
                                        
                                                echo "<tbody>
                                                        <tr>
                                                            <th>{$jobName}</th>
                                                            <th>{$driverName_fk}</td>
                                                            <td>{$jobType}</td>
                                                            <td>{$orderNumber}</td>
                                                            <td>{$referenceNumber}</td>
                                                            <td>{$pallets}</td>
                                                            <td>{$jobWeight}</td>
                                                            <td>{$jobStatus}</td>
                                                        </tr>
                                                    </tbody>";
                                            }
                                        ?>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <script src="../JS/app.js"></script>
    <script src="../JS/ui.js"></script>

    <?php include '../footer.php' ?>

我假设一切都需要在 if (isset) 等中,但无法弄清楚条件需要是什么。也不知道如何从原始函数中获取数据。

【问题讨论】:

  • 仅供参考 - input 元素是自动关闭的,因此不需要 &lt;/input&gt; 并且确实这样做是不正确的。
  • 您提到的这些按钮在哪里?还有为什么一周中的每一天都有这么多代码重复?
  • 这取决于您想要实现的行为类型。如果您希望页面在他们每次单击按钮时重新加载,那么您就在正确的轨道上。用'form'标签包裹你的表单,定义一个目标脚本(脚本本身),一个方法(POST),然后检查isset($_POST['nameOfButton'])
  • 如果您正在寻找更动态的行为,您可能需要查看 JavaScript 进行过滤。 JQuery 是一个非常好的 JS 库,可以做很多“交互行为”。要实际使用 JS 保存任何内容,您可能需要阅读“AJAX”。
  • @ProfessorAbronsius,你提出了一个很好的观点。我假设,Anya 将超链接元素称为“按钮”。是的,我还假设“使用循环创建表单”会更有效和可维护。

标签: php html mysql


【解决方案1】:

以下内容完全未经测试,可能有错误 - 所以很抱歉,但我认为可以通过使用没有 where 子句的单个 sql select 语句来简化初始页面,然后使用 PHP 中的逻辑来确定哪些记录是根据工作日编号显示。在 PHP 中,您可以使用 date 函数来查找 weekday 编号,因此对于每个 weekday number 重复相同的代码块 - 现在每个表行都有驱动程序的名称和 ID,以帮助在 Javascript 中识别。 PHP 和 mySQL 对 weekday 使用不同的编号系统 - PHP 使用 0 表示星期日,而 mySQL 使用 0 表示星期一!

<?php ini_set('error_reporting', E_ALL); ?>
<?php ini_set('display_errors', 1); ?>
<?php ini_set('display_startup_errors', 1); ?>
<?php include '../header.php' ?>

<!-- Page Title -->
    <div class="container-sm text-dark px-3 p-4 truckList">
        <div class="row m-auto align-items-center">
            <?php 
                include '../includes/functions.php';
                driverMenu();
            ?>
        </div>
    </div>

    <?php
    
        $sql='SELECT *
            FROM openjobs
            INNER JOIN driver ON openjobs.driverName_fk = driver.driverName';
        $results = $conn->query( $sql );
        
        $days=array(
            1   =>  'Monday',
            2   =>  'Tuesday',
            3   =>  'Wednesday',
            4   =>  'Thursday',
            5   =>  'Friday'
        );

        for( $i=1; $i<=5; $i++ ){
                printf('
                    <div class="container-fluid bg-secondary darkContainer">
                        <div class="container py-5 px-4 p-3 webWeeklyPlanTruckCard">
                            <div class="row gy-2"> 
                                <div class="col-12">               

                                    <!-- %1$s -->
                                    <div class="card %2$sJobCard my-1">
                                        <div class="card-body">
                                            <div class="row justify-content-between">
                                                <div class="col-11">
                                                    <h5 class="card-title">%1$s ...</h5>
                                                </div>
                                                <div class="col-1">                            
                                                    <a href="/pages/webAddJob.html" class="btn btn-primary btn-sm text-light rounded-pill">Add Job</a>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col pt-3">
                                                    <table class="table table-bordered table-responsive">
                                                        <thead>
                                                            <tr class="table-light">
                                                                <th scope="col" class="col-2">Job</th>
                                                                <th scope="col">Driver</th>
                                                                <th scope="col">Type</th>
                                                                <th scope="col" class="col-2">Order #</th>
                                                                <th scope="col" class="col-2">Reference</th>
                                                                <th scope="col">Pallets</th>
                                                                <th scope="col">Weight (kg)</th>
                                                                <th scope="col" class="col-2">Status</th>
                                                            </tr>
                                                        </thead>
                    ',
                    $days[ $i ],
                    strtolower( $days[ $i ] )
                );//close printf()
                
                
            while( $row = $results->fetch_object() ) {
                if( (int)date( 'w', strtotime( $row->jobDate ) )==$i ){
                    printf('<tbody>
                                <tr data-did="%9$s" data-driver="%1$s">
                                    <th>%2$s</th>
                                    <th>%1$s</td>
                                    <td>%3$s</td>
                                    <td>%4$s</td>
                                    <td>%5$s</td>
                                    <td>%6$s</td>
                                    <td>%7$s</td>
                                    <td>%8$s</td>
                                </tr> 
                            </tbody>',
                            $row->driverName_fk,
                            $row->jobName,
                            $row->jobType,
                            $row->orderNumber,
                            $row->referenceNumber,
                            $row->pallets,
                            $row->jobWeight,
                            $row->jobStatus,
                            $row->DriverID
                    );
                }
            }
            
            
            
            
            echo '
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>';
        }
    ?>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <script src="../JS/app.js"></script>
    <script src="../JS/ui.js"></script>

    <?php include '../footer.php' ?>

driverMenu 函数经过轻微修改,将驱动程序 ID 作为输入/按钮的属性包含在内 - 再次有助于在 Javascript 中进行识别。另一项更改是使用 OO 样式语法而不是过程 - 只是为了方便。

function driverMenu(){
    global $conn;
    $results=$conn->query('select * from driver');

    while( $row = $results->fetch_object() ) {
        printf('
            <div class="col text-center">
                <input type="button" data-name="driverNameBtn" class="btn btn-primary rounded-pill text-light" data-did="%s" value="%s" />
            </div>', 
            $row->DriverID,
            $row->driverName
        );
    }
}

显示/隐藏各种行的 Javascript - buttons 分配了相同的事件处理程序,它查询 DOM 以查找包含数据的所有表行,然后根据驱动程序名称和 ID 显示/隐藏行 - 取自属性在button 和表格行中分配。

<script>


    const qa=(e,n=document)=>n.querySelectorAll(e);
    
    qa('input[ data-name="driverNameBtn" ]').forEach( bttn=>bttn.addEventListener('click',function(e){
        e.preventDefault();
        qa('table.table-responsive tbody tr').forEach( tr=>{
            if( tr.dataset.did==this.dataset.did && tr.dataset.driver==this.value ){
                tr.style.display='table-row';
            }else{
                tr.style.display='none';
            }
        })
    }));
</script>

【讨论】:

  • 谢谢,我会试一试并报告:)
  • 所以我不得不将 $row['driverName_fk'] 更改为 $row->driverName_fk 因为对象类型不能用作数组。 “按钮”现在可以在用户之间切换,太棒了!但仅显示日期为星期一的工作,本周剩余时间不显示工作。随着时间的推移,容器也变得越来越小,包括该代码下方的页脚。
  • 修复了大小问题,php顶部的一些html必须移出并插入到php之前:)
  • "change the $row['driverName_fk'] to $row-&gt;driverName_fk because the object type couldn't be used as an array" - 对不起~愚蠢的错误
  • 没问题,关于为什么循环可以在容器中显示不同的日期名称但在第一个循环后停止显示表格内容的任何想法?我玩过代码,但到目前为止我尝试过的任何东西似乎都没有奏效。非常感谢您的帮助!
猜你喜欢
  • 2011-10-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-04-30
  • 1970-01-01
  • 2012-05-30
  • 1970-01-01
相关资源
最近更新 更多