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

Question

How My table currently looks

我希望有一个使用行跨度的侧列，该列具有支付周期并将该支付周期中的日期分组在一起。我希望主管能够创建一个新的支付周期，该周期在数据库中生成一个整数，然后行跨度将对该支付周期内提交的所有数据进行分组。

我当前的表代码：

    <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 来整理数据，使其看起来像这样： Example table

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>