Skip to content
Advertisement

2 foreach in 1 table is not work correctly

I’m try to loop 2 query inside one table . both query had 10 records . so i put my first foreach (or looping) before TR tag ..

here is example of the table that i want to create :

.table, th, td { border: 1px solid}
<table>
        <thead>
          <tr>
            <th colspan=2><center>Out Of Stock</center></th>
            <th colspan=2><center>Sales By Qty</center></th>
          </tr>
        </thead>
        <tbody>      
            <tr>
             <td>Data 1 from 1st Query</td>
             <td>Data 1 from 1st Query</td>
             <td>Data 1 from 2nd Query</td>
             <td>Data 1 from 2nd Query</td>
            </tr>
            <tr>
             <td>Data 2 from 1st Query</td>
             <td>Data 2 from 1st Query</td>
             <td>Data 2 from 2nd Query</td>
             <td>Data 2 from 2nd Query</td>
            </tr>
             <tr>
             <td>Data 3 from 1st Query</td>
             <td>Data 3 from 1st Query</td>
             <td>Data 3 from 2nd Query</td>
             <td>Data 3 from 2nd Query</td>
            </tr>
            <tr>
             <td>Data 4 from 1st Query</td>
             <td>Data 4 from 1st Query</td>
             <td>Data 4 from 2nd Query</td>
             <td>Data 4 from 2nd Query</td>
            </tr>
        </tbody>
      </table>

I don’t know how i can make my table like that with data from my database..

so i tried and put the first Foreach out the TR tag and close it after /TR tg. so as we can see there is 4 TD /TD inside TR /TR . so i put the second foreach in the middle between 4 TD /TD .

just like this :

        <table>
        <thead>
          <tr>
            <th colspan=2><center>Out Of Stock</center></th>
            <th colspan=2><center>Sales By Qty</center></th>
          </tr>
        </thead>
        <tbody>   
          <?php foreach($First_Data as $row){?>   
            <tr>
             <td>Data 1 from 1st Query</td>
             <td>Data 1 from 1st Query</td>
         <?php foreach($Second_data as $row){?>
             <td>Data 1 from 2nd Query</td>
             <td>Data 1 from 2nd Query</td>
         <?php }?>
            </tr>
          <?php }?>
        </tbody>
        </table>

and the result was not perfect and i guess my foreachs are in the wrong place .

and here u can see the result of my try :

<!DOCTYPE html>
<html>
<head>
<style>
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 5px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: orange;
  color: white;
}
</style>
</head>
<body>

      <table id="customers" >
        <thead>
          <tr>
            <th colspan=2><center>Out Of Stock</center></th>
            <th colspan=2><center>Sales By Qty</center></th>
          </tr>
        </thead>
        <tbody>
        <tr>
        <td>CIMORY YD STRAW 70 ML BANDED 4</td>
        <td>89%</td>
        <tr>
        <td>CIMORY YD STRAWBERY MANGGO LF</td>
        <td>88%</td>
        <tr>
        <td>CIMORY YD BLUEBERRY 250 ML</td>
        <td>85%</td>
        <tr>
        <td>CIMORY YD MIXED BERRIES 250 ML</td>
        <td>85%</td>
        <tr>
        <td>CIMORY YD BLUEBERRY 70 ML BND4</td>
        <td>84%</td>
        <tr>
        <td>CIMORY YD MIXED 70 ML BANDED 4</td>
        <td>84%</td>
        <tr>
        <td>YOLITE C+100 ORANGE </td>
        <td>84%</td>
        <tr>
        <td>YOLITE C+100 ORIGINAL</td>
        <td>84%</td>
        <tr>
        <td>CIMORY YD BANANA LF</td>
        <td>83%</td>
        <tr style="background-color: yellow;">
        <td>CIMORY YD PLAIN 250 ML</td>
        <td>82%</td>
        <td>YD-004</td>
        <td>390</td>
        </tr>
        <td>YD-005</td>
        <td>363</td>
        </tr>
        <td>YD-006</td>
        <td>248</td>
        </tr>
        <td>YD-002</td>
        <td>240</td>
        </tr>
        <td>YD-008</td>
        <td>153</td>
        </tr>
        <td>YD-069</td>
        <td>137</td>
        </tr>
        <td>YD-072</td>
          <td>132</td>
        </tr>
        <td>YD-015</td>
        <td>111</td>
        </tr>
        <td>YD-010</td>
        <td>111</td>
        </tr>
        <td>YD-001</td>
        <td>72</td>
        </tr>
        </tbody>
        </table>

</body>
</html>

only one row (yellow background) is correct and the others are not . i dont know why . maybe my foreach is not correct or i put it in the wrong place .

and here what i want to achieve but i dont know how :

<html>
<head>
<style>
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 5px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: orange;
  color: white;
}
</style>
</head>
<body>
     <table id="customers" style="width: 80%" >
        <thead>
          <tr>
            <th colspan=2><center>Out Of Stock</center></th>
            <th colspan=2><center>Sales By Qty</center></th>
          </tr>
        </thead>
        <tbody>
        <tr>
        <td>CIMORY YD STRAW 70 ML BANDED 4</td>
        <td>89%</td>
        <td>YD-005</td>
        <td>363</td>
        </tr>
        <tr>
        <td>CIMORY YD STRAWBERY MANGGO LF</td>
        <td>88%</td>
        <td>YD-006</td>
        <td>248</td>
        </tr>
        <tr>
        <td>CIMORY YD BLUEBERRY 250 ML</td>
        <td>85%</td>
        <td>YD-002</td>
        <td>240</td>
        </tr>
        <tr>
        <td>CIMORY YD MIXED BERRIES 250 ML</td>
        <td>85%</td>
        <td>YD-008</td>
        <td>153</td>
        </tr>
        <tr>
        <td>CIMORY YD BLUEBERRY 70 ML BND4</td>
        <td>84%</td>
        <td>YD-069</td>
        <td>137</td>
        </tr>
        <tr>
        <td>CIMORY YD MIXED 70 ML BANDED 4</td>
        <td>84%</td>
        <td>YD-072</td>
        <td>132</td>
        </tr>
        <tr>
        <td>YOLITE C+100 ORANGE </td>
        <td>84%</td>
        <td>YD-015</td>
        <td>111</td>
        </tr>
        <tr>
        <td>YOLITE C+100 ORIGINAL</td>
        <td>84%</td>
        <td>YD-010</td>
        <td>111</td>
        </tr>
        <tr>
        <td>CIMORY YD BANANA LF</td>
        <td>83%</td>
        <td>YD-001</td>
        <td>72</td>
        <tr>
        <td>CIMORY YD PLAIN 250 ML</td>
        <td>82%</td>
        <td>YD-004</td>
        <td>390</td>
        </tr>
        </tbody>
        </table>
</body>
</html>

can someone tell me how and i’ll be so thankful.. and sorry if my English is not really good because its not my mother tongue

Advertisement

Answer

Yep, your logic is missing something because the second loop is running within the first loop, so you’re creating a lot of TDs within the same TR.

In order to achieve what you want, I suggest merging the two arrays, then looping a single array.

<?php
$merged_array = [];
foreach($First_Data as $key => $row) {
    $merged_array[$key] = ['first' => $row];
}

foreach($Second_data as $key => $row) {
    $merged_array[$key]['second'] = $row;
}

/// HTML
?>
<tbody>   
    <?php foreach($merged_array as $key => $data){?>   
        <tr>
            <td><?=$data['first']['yourcolumnname'] ?></td>
            <td><?=$data['first']['yourcolumnname2'] ?></td>
            <td><?=$data['second']['yourcolumnname'] ?></td>
            <td><?=$data['second']['yourcolumnname2'] ?></td>
        </tr>
    <?php }?>
</tbody>

Alternatively, if you’re 100% sure that the keys between the two arrays are the same you can also do the following, shorter version without merging the two arrays:

<tbody>   
    <?php foreach($First_Data as $key => $row){?>   
        <tr>
            <td><?=$row['yourcolumnname'] ?></td>
            <td><?=$row['yourcolumnname2'] ?></td>
            <td><?=$Second_data[$key]['yourcolumnname'] ?></td>
            <td><?=$Second_data[$key]['yourcolumnname2'] ?></td>
        </tr>
    <?php }?>
</tbody>
User contributions licensed under: CC BY-SA
1 People found this is helpful
Advertisement