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

用rowspan分组表数据

1 个答案: