首页 > 解决方案 > 如何制作动态行跨度代码点火器?

问题描述

我在 CodeIgniter 应用程序上有动态表行跨度,如下所示:

<table>
<tr>
    <td>No</td>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Qty</td>
    <td>Data 3</td>
</tr>
<?php

$source1 = $this->db->query("select * from table")->result_array(); 
$no=1;
foreach($source1 as source1){ ?>
    <tr>
        <?php 
        $source2 = $this->db->query("select * from table where data1='$source1[data1]'");
        $total_source2 = $source2->num_rows();
        $source3 = $source2->result_array();
        ?>
        <td rowspan="<?php echo $total_source2 ?>"><?php echo $no; ?></td>
        <td rowspan="<?php echo $total_source2 ?>"><?php echo $source1['data1']; ?></td>
        <?php foreach($source3 as $source3){ ?>
            <td><?php echo $source3['data2'] ?></td>
            <td><?php echo $source3['qty'] ?></td>
            <td><?php echo $source3['data3'] ?></td>
        </tr>
    <?php } ?>
    <?php $no++; } ?>
</table>

这是我的代码的结果:

表格1

如何使它像这样:

表 2

?

谢谢

标签: phphtmlcodeigniter

解决方案


table {
    border: 1px solid #000;
    border-collapse: collapse;
    width: 100%;
}

table td,
table th {
    border: 1px solid #000;
    text-align: center;
}
<table>
  <tr> 
    <th>No</th>
    <th>Data1</th> 
    <th>Data2</th> 
    <th>Qty</th>
    <th>Price</th>
    <th>Sub Total</th>
    <th>Total</th>
  </tr> 
  <tr> 
    <td rowspan="2">1</td> 
    <td rowspan="2">ABCDE</td> 
    <td>Data2 a</td> 
    <td>1</td>
    <td>100</td>
    <td>100</td>
    <td rowspan="2">620</td>
  </tr> 
  <tr> 
    <td>Data2 b</td> 
    <td>4</td> 
    <td>130</td> 
    <td>152</td>
  </tr>
  <tr> 
    <td rowspan="3">2</td> 
    <td rowspan="3">ABC</td> 
    <td>Data2 c</td> 
    <td>2</td>
    <td>400</td>
    <td>800</td>
    <td rowspan="3">1560</td>
  </tr> 
  <tr> 
    <td>Data2 d</td> 
    <td>2</td> 
    <td>200</td> 
    <td>400</td>
  </tr>
  <tr> 
    <td>Data2 e</td> 
    <td>3</td> 
    <td>120</td> 
    <td>360</td>
  </tr>
  <tr> 
    <td>3</td> 
    <td>ASS</td> 
    <td>Data 2 f</td> 
    <td>1</td> 
    <td>100</td> 
    <td>100</td> 
    <td>100</td> 
  </tr>
 </table>


推荐阅读