Start Free TrialLog in
Avatar of Peter Kroman
Peter KromanFlag for Denmark

asked on 

Different headlines in a table

Hi,

I have a need to be able to show different headlines depending on the search result in the database.
I have made the code pasted in below, but it give me the problem that when I have a search that have more than one result in the "Type" column, I get the headline displayed at every row in the table.

Try it here - write e.g. Odense Odense in the searchfield. http://kroweb.dk/gfdev/ft_raw2/#

Is there a way that i create a separate headline when I have more than one result in the "Type" column, and at the same time keep the possibilities to differentiate the headlines represented in the code below?

                               <!-- Have we ran a query -->
                               <?php if (isset($results)): ?>

                               <!-- Do we have any results -->
                               <?php if ($results->num_rows): ?>

                               <table id="myTable" class="table">
                                <colgroup>
                            </colgroup>

                            <tr>
                                <!-- Loop through the results of the query -->    
                                <?php while ($row = $results->fetch_object()): ?>
                                


                                <?php if ($row->Type =='Købstad'): ?>

                                <th>&nbsp;</th> <th>Amt By Gade</th> <th>Amt</th> <th>Aar</th> <th>Type</th> <th>Gade (1860)</th> <th>Matr. nr. (1860)</th> 

                            <?php elseif ($row->Type == 'Hovedstaden'):?>

                            <th>&nbsp;</th> <th>Amt By Gade</th> <th>Amt</th> <th>Aar</th> <th>Type</th> <th>Gade (1860)</th> <th>Matr. nr. (1860)</th> 

                            <?php else:
                            if ($row->Type =='Landdistrikt'): ?>
                            
                            <th>&nbsp;</th> <th>Amt Herred Sogn</th> <th>Amt</th> <th>Aar</th> <th>Type</th> <th>Gade (1860)</th> <th>Matr. nr. (1860)</th> 

                        <?php endif; ?>
                    <?php endif; ?>



                </tr>


                <!-- Links for the individual rows -->    
                <?php
                $link1 = sprintf("<a href='%s' target='_blank'>%s</a>", $row->URL, $row->AmtHerredSognGade); 
                $link2 = sprintf("<a href='%s' target='_blank'>%s</a>", $row->Infourl, $row->Info);
                $link3 = sprintf("<a href='%s' target='_blank'>%s</a>", $row->Infourl, $row->Gade);
                $link4 = sprintf($row->AmtHerredSognGade);
                ?>

                <?php if ($row->Collapse == 'p'): ?>
                <!-- We have a parent row -->

                <tbody class='toggle' >
                    <tr class="expander">
                        <td><span class='toggle'></td>
                        <td><?php echo (!empty($row->URL)) ? $link1 : $link4 ?></td>
                        <td><?php echo $row->Amt ?></td>             
                        <td><?php echo $row->Aar ?></td>
                        <td><?php echo $row->Type ?></td>   
                        <td><?php echo $row->Gade ?></td>            
                        <td><?php echo $row->Kvarter ?></td>            
                    </tr>

                <?php elseif ($row->Collapse == 'c'): ?>
                <!-- We have a child row -->

                <tr class="child">
                    <td>&nbsp;</td>
                    <td><?php echo (!empty($row->URL)) ? $link1 : $link4 ?></td>
                    <td><?php echo $row->Amt ?></td>             
                    <td><?php echo $row->Aar ?></td>
                    <td><?php echo $row->Type ?></td>
                    <td><?php echo $row->Gade ?></td>            
                    <td><?php echo $row->Kvarter ?></td>           
                </tr>

            <?php else: ?>
            <!-- We have a non-collapsible row -->

            <tr class="non">
                <td>&nbsp;</td>
                <!-- Område, link -->
                <td><?php echo $link1 ?></td>
                <td><?php echo $row->Amt ?></td>      
                <td><?php echo $row->Aar ?></td>
                <td><?php echo $row->Type ?></td>
                <td colspan="2">&nbsp;</td>
            </tr>

        <?php endif; ?>


    <?php endwhile; ?>


</table>

<?php else: ?>

    <p>Der er ingen resultater for denne søgning</p>

<?php endif; ?>
<?php endif; ?>

Open in new window

PHP
Avatar of undefined
Last Comment
Chris Stanyon
Avatar of Peter Kroman
Peter Kroman
Flag of Denmark image

ASKER

Hi

I believe have solved most of the problem my self :) Only problem now is, that if the search returns a collapsed row as the first row, it is not collapsed and it does not show the "collapse toggle headline".

Try to search for "Assens" in 1890, and you will se that one of the results are a collapsed row names "Odense Assens". The try to change the searchfiels to "Odense Assens" and you will se that the content (streets) of the city Assens is shown but it is not collapsed and the collapse toggle line for Assens is not shown either.

I have this code - what am I missing here: 

                                  <!-- Loop through the results of the query -->    
                                <?php while ($row = $results->fetch_object()): ?>
                                


                                <?php if ($row->Type =='Købstad'): ?>

                           <th>&nbsp;</th> <th>Amt By Gade</th> <th>Amt</th> <th>Aar</th> <th>Type</th> <th>Gade (1860)</th> <th>Matr. nr. (1860)</th> 

                            <?php elseif ($row->Type == 'Hovedstaden'):?>

                            <th>&nbsp;</th> <th>Amt By Gade</th> <th>Amt</th> <th>Aar</th> <th>Type</th> <th>Gade (1860)</th> <th>Matr. nr. (1860)</th> 

                            <?php else:
                            if ($row->Type =='Landdistrikt'): ?> 
                            
                            <th>&nbsp;</th> <th>Amt Herred Sogn </th> <th>Amt</th> <th>Aar</th> <th>Type</th> <th>Gade (1860)</th> <th>Matr. nr. (1860)</th> 

                        <?php endif; ?>
                    <?php endif; ?>

                </tr>

                <!-- Loop through the results of the query -->
                <?php while ($row = $results->fetch_object()): ?>

                <!-- Links for the individual rows -->    
                <?php
                $link1 = sprintf("<a href='%s' target='_blank'>%s</a>", $row->URL, $row->AmtHerredSognGade); 
                $link2 = sprintf("<a href='%s' target='_blank'>%s</a>", $row->Infourl, $row->Info);
                $link3 = sprintf("<a href='%s' target='_blank'>%s</a>", $row->Infourl, $row->Gade);
                $link4 = sprintf($row->AmtHerredSognGade);
                ?>

                <?php if ($row->Collapse == 'p'): ?>
                <!-- We have a parent row -->

                <tbody class='toggle' >
                    <tr class="expander">
                        <td><span class='toggle'></td>
                        <td><?php echo (!empty($row->URL)) ? $link1 : $link4 ?></td>
                        <td><?php echo $row->Amt ?></td>             
                        <td><?php echo $row->Aar ?></td>
                        <td><?php echo $row->Type ?></td>   
                        <td><?php echo $row->Gade ?></td>            
                        <td><?php echo $row->Kvarter ?></td>            
                    </tr>

                <?php elseif ($row->Collapse == 'c'): ?>
                <!-- We have a child row -->

                <tr class="child">
                    <td>&nbsp;</td>
                    <td><?php echo (!empty($row->URL)) ? $link1 : $link4 ?></td>
                    <td><?php echo $row->Amt ?></td>             
                    <td><?php echo $row->Aar ?></td>
                    <td><?php echo $row->Type ?></td>
                    <td><?php echo $row->Gade ?></td>            
                    <td><?php echo $row->Kvarter ?></td>           
                </tr>

            <?php else: ?>
            <!-- We have a non-collapsible row -->

            <tr class="non">
                <td>&nbsp;</td>
                <!-- Område, link -->
                <td><?php echo $link1 ?></td>
                <td><?php echo $row->Amt ?></td>      
                <td><?php echo $row->Aar ?></td>
                <td><?php echo $row->Type ?></td>
                <td colspan="2">&nbsp;</td>
            </tr>

        <?php endif; ?>

    <?php endwhile; ?>
<?php endwhile; ?>


</table>

<?php else: ?>

    <p>Der er ingen resultater for denne søgning</p>

<?php endif; ?>
<?php endif; ?>

Open in new window

Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image
Hey Peter,

Not entirely clear on what you need, but one thing of note that will cause you problems. Each time you call fetch_object() your code retrieves the next line from the results. You are trying to call fetch_object() in 2 separate while loops:

<?php while ($row = $results->fetch_object()): ?>
    <?php if ($row->Type =='Købstad'): ?>
    ...

    <?php while ($row = $results->fetch_object()): ?>
        <!-- Links for the individual rows --> 
        ...

Open in new window

What this effectively does is retrieve the first row from the database so it can check the Type. It then starts another loop so it can display the records, but this loop now starts on the second record. This second loop works it's way through all your remaining records, before trying to return to the first loop - by which time there are no more records left to loop through. That is probably why you think the first record doesn't have the toggle - you're effectively starting to display the records from the second one onwards.

If you need to take a peak at the first record, then you should call fetch_object() outside of a loop and then reset the record pointer using the data_seek method. This isn't full code, but should give you a general idea of what you need to do:

<!-- Have we ran a query -->
<?php if (isset($results)): ?>

    <!-- Do we have any results -->
    <?php if ($results->num_rows): ?>

        <table id="myTable" class="table">
            <colgroup></colgroup>

            <?php
                // Set up the Header
                $firstRow = $results->fetch_object();
                $headerText = ($firstRow->Type == 'Landdistrikt') ? 'Amt Herred Sogn' : 'Amt By Gade';
            ?>

            <tr>
                <th>&nbsp;</th> <th><?php echo $headerText ?></th> <th>Amt</th> <th>Aar</th> <th>Type</th> <th>Gade (1860)</th> <th>Matr. nr. (1860)</th> 
           </tr>

            <?php
                // Reset the record marker back to the first record
                $results->data_seek(0);
            ?>

            <!-- Loop through the results of the query -->
            <?php while ($row = $results->fetch_object()): ?>

                <!-- Links for the individual rows -->    
                <?php
                $link1 = sprintf("<a href='%s' target='_blank'>%s</a>", $row->URL, $row->AmtHerredSognGade); 
                $link2 = sprintf("<a href='%s' target='_blank'>%s</a>", $row->Infourl, $row->Info);
                $link3 = sprintf("<a href='%s' target='_blank'>%s</a>", $row->Infourl, $row->Gade);
                $link4 = sprintf($row->AmtHerredSognGade);
                ?>

Open in new window

You'll see that I've also tidied up the Header row output (using a ternary operator) as the only difference in all three rows was a single text value.
Avatar of Peter Kroman
Peter Kroman
Flag of Denmark image

ASKER

Thanks Chris, I get the idea - and this is working.

But I have another problem down the same alley. I have struggled with this for several hours now, and I just cant get it right.

The problem is that is not showing the results right.

The actual page I am working on now is this:
http://kroweb.dk/gfdev/ft_raw2/index_test.php

For expample. If you choose the year 1890 and search for Rønne (Roenne), it shows the 16 LAST streets in the city of Roenne at the top, and then it shows an expander row which I can toggle and here toggles out the FIRST 65 streets in the city of Roenne. But a lot of other entries holding the letter combination "roenne"  - which has absolutely nothing to do with the city of Roenne - is also shown in the toggled child section. Even a row that is not marked as a child row in the database (one with the Type  "Landdistrikt").

I have checked, re-checked, doubble-checked, and checked again that everything is marked and placed correctly in the database. It is - I promise :)

I can understand that everything with the letter combination in the searchfield are displayed, but I can't understand why something that should be indside a child toggle is displayed outside, and something that is should be displayed outside the toggle is dislayed inside.

I paste in the full working code here below, and hope you can see where I am failing :)

The index file: 
                    <!DOCTYPE html>
                    <html lang="en">
                    <head>
                        <meta charset="utf-8">
                        <title>Folketællinger</title>

                        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
                        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
                        <link rel="stylesheet" type="text/css" href="style_test.css">

                        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
                        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

                        <script type="text/javascript">
                        $(function(){
                            $('#ft_items').on('click', '.toggle', function() {
                                $(this).parents('tr').nextAll('tr.child').toggle();
                            });
                        });
                        </script>


 


                    </head>

                    <body>
                        <!-- Søge felt til folketællinger -->
                        <div class="container" style="width:100%;padding-top:10px;background-color:#f6f6f6;">
                            <!-- HEADER START -->
                            <div class="row" id="header">


                                <form method="POST" id="search" style="margin-left:30px; margin-right: 30px;"> 
                                    <label for="amt">Amt</label> 
                                    <select id="amt" name="amt" style="width: 125px; margin-right: 20px; font-weight:normal; background-color: #f6f6f6;">
                                        <option value=""></option>
                                        <option value="Bornholm">Bornholm</option>
                                        <option value="Frederiksborg">Frederiksborg</option>
                                        <option value="Færøerne">Færøerne</option>
                                        <option value="Grønland">Grønland</option>
                                        <option value="Haderslev">Haderslev</option>
                                        <option value="Hjørring">Hjørring</option>
                                        <option value="Holbæk">Holbæk</option>
                                        <option value="København">København</option>
                                        <option value="Køøge">Køge</option>               
                                        <option value="Maribo">Maribo</option>
                                        <option value="Odense">Odense</option>
                                        <option value="Præstø">Præstø</option>
                                        <option value="Randers">Randers</option>
                                        <option value="Ribe">Ribe</option>
                                        <option value="Ringkøbing">Ringkøbing</option>
                                        <option value="Roskilde">Roskilde</option>
                                        <option value="Skanderborg">Skanderborg</option>
                                        <option value="Sorø">Sorø</option>
                                        <option value="Svendborg">Svendborg</option>
                                        <option value="Sønderborg">Sønderborg</option>
                                        <option value="Thisted">Thisted</option>
                                        <option value="Tønder">Tønder</option> 
                                        <option value="Vejle">Vejle</option>
                                        <option value="Viborg">Viborg</option>
                                        <option value="Aabenraa">Aabenraa</option>
                                        <option value="Aalborg">Aalborg</option>
                                        <option value="Aarhus">Aarhus</option>
                                        <option value="Åbenrå-Sønderborg">Åbenrå-Sønderborg</option>
                                    </select>

                                    <label for="type">Type</label>
                                    <select id="type" name="type"style="width: 160px; margin-right: 20px; font-weight:normal; background-color: #f6f6f6;">
                                        <option value=""></option>
                                        <option value="Landdistrikt">Søg i Landdistrikter</option>
                                        <option value="Købstad">Søg i Købstæder</option>
                                        <option value="Hovedstaden">Søg i Hovedstaden</option>
                                    </select>


                                    <label for="aar">År</label>                
                                    <select id="aar" name="query_start" style=" width: 65px; margin-right: 20px; font-weight:normal;  background-color: #f6f6f6;">
                                        <option value=""></option>
                                        <option value="1787">1787</option>
                                        <option value="1801">1801</option>
                                        <option value="1803">1803</option>
                                        <option value="1834">1834</option>
                                        <option value="1835">1835</option>
                                        <option value="1840">1840</option>
                                        <option value="1845">1845</option>
                                        <option value="1850">1850</option>
                                        <option value="1855">1855</option>
                                        <option value="1860">1860</option>
                                        <option value="1861">1861</option>
                                        <option value="1870">1870</option>
                                        <option value="1878">1878</option>
                                        <option value="1880">1880</option>
                                        <option value="1890">1890</option>
                                        <option value="1901">1901</option>
                                        <option value="1906">1906</option>
                                        <option value="1911">1911</option>
                                        <option value="1916">1916</option>
                                        <option value="1921">1921</option>
                                        <option value="1925">1925</option>
                                        <option value="1930">1930</option>
                                        <option value="1940">1940</option>          
                                    </select>

                                    <label for="sogn">Sted, By, Sogn, Gade</label>
                                    <input type="text" name="sogn" id="sogn" placeholder="Fritekst" style="color: #e08a94;  background-color: #f6f6f6;">
                                    <input type="submit" value="Søg" name="Sog" id="Sog">
                                    <input type="reset" value="Nulstil">
                                    <script>
                                    $(':reset', '#search').click(function(e) {
                                    $('#ft_items').html('');
                                    });
                                    </script>




                                </form>
                            </div>  
                            <!-- HEADER END -->        
                        </div>

           <div id="ft_items"></div>


<script>
      var SogButton=document.getElementById('Sog'); //"Søg" button
      var amt = document.getElementById('amt'); //amt dropdown
      var type = document.getElementById('type'); //type dropdown      
      var start = document.getElementById('aar'); //aar dropdown
      var sogn = document.getElementById('sogn'); //free text search field      


            // "Søg" button function
    SogButton.addEventListener('click',function (){
      $('#ft_items > table').remove();    
      $.ajax({
       url: 'ajaxFtHtml_test.php',
       data: $('#search').serialize(),
       method:'POST',
       dataType: 'html'
     }).done(function (res){             
             $('#ft_items > table').remove();           
             $('#ft_items').html(res);
 

          });         

   });

      // Return key search function
  $('#search').submit(function(e) {
    e.preventDefault();
    $.ajax({
        url : 'ajaxFtHtml_test.php',
        method: 'post',
        data : $('#search').serialize(),
        dataType: 'html'
    })
    .done(function(res){
        $('#ft_items').html(res);
      
    });
});



 
</script>

</body>
</html>

Open in new window


The ajax file: 
<?php
// Turn on error reporting
error_reporting(E_ALL);
ini_set('display_errors', 1);

function cityVariations($city) {
    $substitute = array(
        "æ" => "ae",
        "ø" => "oe",
        "å" => "aa",
        "ae" =>"æ",
        "oe" =>"ø",
        "aa" => "å",
        );

    $flatCity = mb_convert_case($city, MB_CASE_LOWER);

    $cities[] = $flatCity;
    $cities[] = strtr($flatCity, $substitute); 

    return $cities;
}

// Do we need the database
if (!empty($_POST)):

    // Connect to the database if we have a POST
    $mysqli = mysqli_connect("db credentials") or die("Error connecting to database!");
$mysqli->set_charset("utf8");

    // Trim the input values
$start = trim($_POST['query_start']); 
$sogn = trim($_POST['sogn']);
$amt = trim($_POST['amt']);
$type = trim($_POST['type']);

            // Get the city variations
$cities = cityVariations($sogn);

            // Prepare the cities for the LIKE clause by wrapping each in %...%
array_walk($cities, function (&$city) { $city = '%'.$city.'%'; });



if (!empty($amt) && !empty($sogn) && empty($type) && empty($start)):
                    // We have a 'amt - 'sogn' value

    $query = $mysqli->prepare("SELECT * FROM ft WHERE Amt = ? AND (AmtHerredSognGade LIKE ? OR AmtHerredSognGade LIKE ?) ORDER BY Aar ASC, Amt ASC");
$query->bind_param("sss",$amt, $cities[0], $cities[1]);



elseif (!empty($amt) && !empty($start) && !empty($sogn) && empty($type)):
                    // We have a 'amt' - 'aar' - sogn' value

    $query = $mysqli->prepare("SELECT * FROM ft WHERE Amt = ? AND Aar = ? AND (AmtHerredSognGade LIKE ? OR AmtHerredSognGade LIKE ?) ORDER BY Aar ASC, Amt ASC");
$query->bind_param("ssss", $amt, $start, $cities[0], $cities[1]); 

else:   


    if (!empty($amt) && !empty($type) && !empty($start) && !empty($sogn)):
            //We have 'amt' - 'type' - 'aar' - 'sted' value

        $query = $mysqli->prepare("SELECT * FROM ft WHERE Amt = ? AND Type = ? AND Aar = ? AND (AmtHerredSognGade LIKE ? OR AmtHerredSognGade LIKE ?) ORDER BY Aar ASC, Amt ASC");
    $query->bind_param("sssss", $amt, $type, $start, $cities[0], $cities[1]);   

            //var_dump($amt, $type, $start, $cities);

    elseif (!empty($type) && !empty($sogn) && empty($start) && empty($amt)):
                    // We have a 'type' - sogn' value

        $query = $mysqli->prepare("SELECT * FROM ft WHERE Type = ? AND (AmtHerredSognGade LIKE ? OR AmtHerredSognGade LIKE ?) ORDER BY Aar ASC, Amt ASC");
    $query->bind_param("sss", $type, $cities[0], $cities[1]); 


    else:

      if (!empty($amt) && !empty($type) && !empty($start) && empty($sogn)):
            //We have 'amt' - 'type' - 'aar' value

        $query = $mysqli->prepare("SELECT * FROM ft WHERE Amt = ? AND Type = ? AND Aar = ? ORDER BY Aar ASC, Amt ASC");
    $query->bind_param("sss", $amt, $type, $start);   




    elseif (!empty($amt) && !empty($type) && empty($start) && empty($sogn)):
            //We have 'amt' - 'type' value

        $query = $mysqli->prepare("SELECT * FROM ft WHERE Amt = ? AND Type = ? ORDER BY Aar ASC, Amt ASC");
    $query->bind_param("ss", $amt, $type);   



    else:


        if (!empty($amt) && empty($type) && empty($start) && empty($sogn)):
            //We have 'amt' value

            $query = $mysqli->prepare("SELECT * FROM ft WHERE Amt = ? ORDER BY Aar ASC, Amt ASC");
        $query->bind_param("s", $amt);   

        //var_dump($amt, $type, $start, $cities); 


        elseif (!empty($amt) && empty($type) && !empty($start) && empty($sogn)):
            //We have 'amt' - 'aar' value

            $query = $mysqli->prepare("SELECT * FROM ft WHERE Amt = ? AND Aar = ? ORDER BY Aar ASC, Amt ASC");
        $query->bind_param("ss", $amt, $start);       
        //var_dump($amt, $start); 


        else:

            if (!empty($type) && !empty($start) && !empty($sogn) && empty($amt)):
                // We have a 'type' - 'aar' - 'sogn' value

                $query = $mysqli->prepare("SELECT * FROM ft WHERE Type = ? AND Aar = ? AND (AmtHerredSognGade LIKE ? OR AmtHerredSognGade LIKE ?) ORDER BY Aar ASC, Amt ASC");
            $query->bind_param("ssss",$type, $start, $cities[0], $cities[1]);


            elseif  (!empty($type) && !empty($start) && empty($sogn) && empty($amt)):
                // We have a 'type' - 'aar' value

                $query = $mysqli->prepare("SELECT * FROM ft WHERE Type = ? AND Aar = ? ORDER BY Aar ASC, Amt ASC ");
            $query->bind_param("ss",$type, $start); 



            else:

                if (!empty($type) && empty($start) && empty($sogn) && empty($amt)):
                // We have a 'type' value

                    echo "<h2> Feltet 'Type' skal anvendes sammen med mindst ét af de andre valg. Klik på Nulstil og prøv igen </h2>";

                //    $query = $mysqli->prepare("SELECT * FROM ft WHERE Type = ?");
                //$query->bind_param("s",$type); 


                elseif (!empty($start) && !empty($sogn) && empty($type) && empty($amt)):
                // We have a 'aar' - 'sogn' value

                    $query = $mysqli->prepare("SELECT * FROM ft WHERE Aar = ? AND (AmtHerredSognGade LIKE ? OR AmtHerredSognGade LIKE ?)ORDER BY Aar ASC, Amt ASC");
                $query->bind_param("sss",$start, $cities[0], $cities[1]);  


                else:                

                    if (!empty($start) && empty($sogn) && empty($type) && empty($amt)):
                // We have a 'aar' value

                        $query = $mysqli->prepare("SELECT * FROM ft WHERE Aar = ? ORDER BY Aar ASC, Amt ASC");
                    $query->bind_param("s",$start);


                    elseif (!empty($sogn)&& empty($start) && empty($type) && empty($amt)):
                // We have a sogn' value

                        $query = $mysqli->prepare("SELECT * FROM ft WHERE (AmtHerredSognGade LIKE ? OR AmtHerredSognGade LIKE ?)ORDER BY Aar ASC, Amt ASC");
                    $query->bind_param("ss", $cities[0], $cities[1]); 


                    endif;

                    endif;

                    endif;

                    endif;

                    endif;

                    endif; 

                    endif;   

    // Do we have a query to run
                    if (!empty($query)):
                        $query->execute();
                    $results = $query->get_result();
                    endif;

                    endif;
                    ?>

                    <div class="flex-container" style="width:site-width; background-color:white;">
                        <div class="flex-item" style="margin-top:10px; float:left; margin-left:20px;width: site-width; overflow:auto;">
                            <div class="row" style="margin-left:10px;margin-right:10px;">

                               <!-- Have we ran a query -->
                               <?php if (isset($results)): ?>

                               <!-- Do we have any results -->
                               <?php if ($results->num_rows): ?>

                               <table id="myTable" class="table">
                                <colgroup>
                            </colgroup>

                            <tr>
                        <?php
                        // Set up the Header
                        $firstRow = $results->fetch_object();
                        $headerText = ($firstRow->Type == 'Landdistrikt') ? 'Amt Herred Sogn' : 'Amt By Gade';
                        ?>

                        <tr>
                        <th>&nbsp;</th> <th><?php echo $headerText ?></th> <th>Amt</th> <th>Aar</th> <th>Type</th> <th>Gade (1860)</th> <th>Matr. nr. (1860)</th> 
                        </tr>


                        <?php
                        // Reset the record marker back to the first record
                        $results->data_seek(0);
                        ?>



                </tr>

                <!-- Loop through the results of the query -->
                <?php while ($row = $results->fetch_object()): ?>

                <!-- Links for the individual rows -->    
                <?php
                $link1 = sprintf("<a href='%s' target='_blank'>%s</a>", $row->URL, $row->AmtHerredSognGade); 
                $link2 = sprintf("<a href='%s' target='_blank'>%s</a>", $row->Infourl, $row->Info);
                $link3 = sprintf("<a href='%s' target='_blank'>%s</a>", $row->Infourl, $row->Gade);
                $link4 = sprintf($row->AmtHerredSognGade);
                ?>

                <?php if ($row->Collapse == 'p'): ?>
                <!-- We have a parent row -->

                <tbody class='toggle' >
                    <tr class="expander">
                        <td><span class='toggle'></td>
                        <td><?php echo (!empty($row->URL)) ? $link1 : $link4 ?></td>
                        <td><?php echo $row->Amt ?></td>             
                        <td><?php echo $row->Aar ?></td>
                        <td><?php echo $row->Type ?></td>   
                        <td><?php echo $row->Gade ?></td>            
                        <td><?php echo $row->Kvarter ?></td>            
                    </tr>

                <?php elseif ($row->Collapse == 'c'): ?>
                <!-- We have a child row -->

                <tr class="child">
                    <td>&nbsp;</td>
                    <td><?php echo (!empty($row->URL)) ? $link1 : $link4 ?></td>
                    <td><?php echo $row->Amt ?></td>             
                    <td><?php echo $row->Aar ?></td>
                    <td><?php echo $row->Type ?></td>
                    <td><?php echo $row->Gade ?></td>            
                    <td><?php echo $row->Kvarter ?></td>           
                </tr>

            <?php else: ?>
            <!-- We have a non-collapsible row -->

            <tr class="non">
                <td>&nbsp;</td>
                <!-- Område, link -->
                <td><?php echo $link1 ?></td>
                <td><?php echo $row->Amt ?></td>      
                <td><?php echo $row->Aar ?></td>
                <td><?php echo $row->Type ?></td>
                <td colspan="2">&nbsp;</td>
            </tr>

        <?php endif; ?>

    <?php endwhile; ?>



</table>

<?php else: ?>

    <p>Der er ingen resultater for denne søgning</p>

<?php endif; ?>
<?php endif; ?>


</div>
</div> 
</div>

Open in new window


The CSS file: 

        h2 {
            font-size: 14px;
            font-weight: normal;
            color: red;
            margin-left: 250px;
        }




        table, th {

            border-bottom: 1px  #666666;
            border-top: 0px;
            border-right: 0px;
            border-left: 0px;
            border-style: solid;
            border-collapse: collapse;
            padding-top:10px;
            padding-left:20px;
            color:black;
            font-family: Serif; 
            font-size: 20px;
            font-weight: bold;
            text-align: left;




        }

        table, td {

            border: 0px  #f6f6f6;
            border-style: none;
            border-collapse: collapse;
            padding-top: 0px;
            border-bottom: 1px solid #666666;
            padding-left: 0px;
            color:black;
            font-family: arial;
            font-size: 12px;
            font-weight: normal;
            text-align: padding-left; 




        }



        a:link {
            color: black;
            text-decoration: underline;
            font-weight: bold;
        }
        a:visited {
            color: #e08a94;
            text-decoration: underline;

        }
        a:hover {
            color: cornflowerblue;
            text-decoration: underline;
            font-weight:normal;
        }
        a:active {
            color: black;
            text-decoration: underline;
        }

        .table > tbody + tbody { border-top: none; }
        .table > tbody > tr > td { border-top: none; }

         
        table tr td:nth-child(1){width: 10px; font-weight:normal; color:black;}
        table tr td:nth-child(2){width: 300px; font-weight:normal; color:black;}
        table tr td:nth-child(3){width: 75px; font-weight:normal; color:black;}
        table tr td:nth-child(4){width: 25px; font-weight: normal; color:black;}
        table tr td:nth-child(5){width: 100px; font-weight: normal; color:black;}
        table tr td:nth-child(6){width: 150px; font-weight: normal; color:black;}
        table tr td:nth-child(7){width: 150px; font-weight: normal; color:black;}


        #header { margin-top: 10px; margin-bottom:10px; }
        tbody.toggle tr.child { display: none; background-color: #f6f6f6;}
        tbody.toggle tr:nth-child(even){ display: none; background-color: #d5d5d5;}
        tbody.toggle tr.expander { display: table-row; background-color: #f6f6f6; }
        tbody.toggle tr.non { display: table-row; background-color: white; }
        span.toggle { cursor: pointer; color: cornflowerblue; font-family: 'FontAwesome'; font-size: 16px;}
        span.toggle:hover { color: cornflowerblue; }
        span.toggle:after { content: '\f055' }

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image
Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of Peter Kroman
Peter Kroman
Flag of Denmark image

ASKER

Thanks Chris,

You have a beautiful way to put the words. A way that make me think again, and hopefully get a little wiser along the way :)

I have decided to skip the toggle thing on this page - it did not make much sense on this particular page anyway. In stead I use the facilities in Data Tables which will compensate nicely.

Thanks again.
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image
No worries Peter.

Sometimes it is easier to  just move on ... we've all been there :)
PHP
PHP

PHP is a widely-used server-side scripting language especially suited for web development, powering tens of millions of sites from Facebook to personal WordPress blogs. PHP is often paired with the MySQL relational database, but includes support for most other mainstream databases. By utilizing different Server APIs, PHP can work on many different web servers as a server-side scripting language.

125K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts

  • "Invaluable tool for our organization"

    Josh Regalski

  • "Your help has saved me hundreds of hours of internet surfing."

    @fblack61

  • "Just a dang good service!"

    @golferski

  • "Worth every penny."

    Steve Hougom

  • "It’s been a life saver."

    Maria Halt

  • "Best support site I’ve seen!"

    Bob Schneider

  • "I would be lost without them."

    @fblack61

  • "Saved my job multiple times."

    Walt Forbes

  • "I love this site."

    Maria Duwe

  • "Friendly respectful help."

    Andrew Kowtalo

  • "Such top-notch experts."

    @magento

  • "The best money I have ever spent."

    @rwheeler23

  • "Beyond any comprehensible value"

    George Morris

  • "Invaluable tool for our organization"

    Josh Regalski

Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo
© 1996-2023 Experts Exchange, LLC. All rights reserved. Covered by US Patent