使用行跨度对表数据进行分组

Question

我的桌子目前的外观我想要一个使用行跨度的侧列，该列具有支付期间并将该支付期间的日期分组在一起。我希望主管能够创建一个新的支付期，该支付期在数据库中生成一个整数，然后行跨度将对该支付期内提交的任何数据进行分组。我当前的表代码：    <div class="table-responsive">        <table id="editable_table" class="table table-bordered table-striped" data-editable="true" data-buttons-toolbar=".toolbar" data-search="true"data-show-refresh="true" >            <thead>                <tr>                    <th>Index</th>                    <th>Employee ID</th>                    <th>Username</th>                    <th>Date</th>                    <th>Time In</th>                    <th>Time Out</th>                    <th>Total Hours</th>                    <th>Submit Status</th>                    <th>Approved Status</th>                    <th>Time Change</th>                    <th>Edit</th>                </tr>            </thead>            <tbody>                <?php                    while($row = $res->fetch()){                        echo '                        <tr>                        <td>'.$row["id"].'</td>                        <td>'.$row["user_id"].'</td>                                            <td>'.$row["name"].'</td>                        <td>'.$row["submit_day"].'</td>                        <td>'.$row["time_in"].'</td>                        <td>'.$row["time_out"].'</td>                        <td>'.$row["total_hours"].'</td>                                                                        <td>'.$row["submit_status"].'</td>                        <td  style="color:green;">'.$row["approve_status"].'</td>                       <td>'.$row["change_request"].'</td>                       <td><center><a id="editbtn" href="action.php?id='.$row["id"].'"><span class="glyphicon glyphicon-edit"></span></a></td>                      </tr>';                }             ?>        </tbody>        </table>    </div>我不确定如何使用 rowspan 来整理数据，使其看起来像这样： 示例表

Answer 1

我正在更新我的答案，因为它因未知原因而被降级，没有人会解释。

所以这是我的回答，基于我所做的和基于逻辑的。

简而言之，不要尝试在 PHP 中做你想做的事情，因为它会在你的循环代码中创建太多额外的工作和复杂性，否则你需要进行预先计算以知道要为数量设置的行跨度该期间的项目在输出该期间的项目之前。

在我继续之前，不妨问自己一个问题：“为什么我只需要在周期发生变化时打印一次，这对最终用户有什么帮助？如果有的话？”

由于您仍在使用列，因此尝试按句点对它们进行分组并没有节省任何空间，因此您可以在页面的下方一直重复该列中的句点，因为如果有人向下滚动并且句点不在左侧他们可能需要向上滚动才能记住他们所处的时期。

如果您想避免 PHP 预先计算并且仍然做您想做的事情，您可以仅在您知道它已更改时打印句点，然后使用 CSS 像这样格式化表格。

例如：

$lastPeriod="";

while($row = $mysqli->fetchassoc($res)){

    echo "<tr>";

    if($lastPeriod == $row["period"]){

        echo "<td>&nbsp;</td>";

    } else {

        echo "<td class='period'>$row[period]</td>";

    }

    // echo the rest of the cells in the row

    echo "</tr>";

    $lastPeriod = $row["period"];

}

table{

border-collapse:collapse;

}

table tr th,

table tr td{

padding:5px;

border-color:#dddddd; /* Only have to set colour once this way*/

border-style:solid;

border-width:0px 0px 1px 0px;

}

table tr th{

background-color:#eeeeee;

}

table tr td:first-child{

border-width:0px;

}

table tr td.period{

  border-width:0px 0px 1px 0px !important;

  font-weight:bold;

 }

<table>

<tr>

<th>Period</th>

<th>Name</th>

<th>Day</th>

<th>Options</th>

</tr>

<tr>

<td class='period'>September</td>

<td>John</td>

<td>01</td>

<td>-</td>

</tr>

<tr>

<td></td>

<td>Mary</td>

<td>05</td>

<td>-</td>

</tr>

<tr>

<td></td>

<td>Joe</td>

<td>06</td>

<td>-</td>

</tr>

<tr>

<td class='period'>October</td>

<td>John</td>

<td>22</td>

<td>-</td>

</tr>

</table>