SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    658
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help in table color design

    Hi,

    I created reports and i display it on a table format.

    Now I just want to add color line in every end of reject type within the date. to identify what are the reject type per reject date.

    here is my code:

    PHP Code:
    <?php 
    ob_start
    (); 
    include 
    "connection.php"

    $id "30";

    if(isset(
    $id)){ 
        
    /* 
        We are building an array of all information with a single query. 
        */ 
        
    $Reports = array();     
        
    $dates = array();  
        
    $process_names = array(); 
        
    $reject_types = array(); 
        
    $compound_types = array(); 
        
    $rejects = array(); 
        
    $reject_total = array();
        
    $sql "SELECT  
        r.reject_date,  
        r.reject,  
        r.process_id,  
        r.reject_type,  
        r.compound_type,  
        p.process_name  
        FROM op_reject AS r  
        JOIN process_list AS p  
        ON (p.process_id = r.process_id) 
        WHERE WEEK(reject_date)+1= '
    $id
        ORDER BY p.process_id, r.reject_date, r.compound_type ASC"
    ;  
        
    $res mysql_query($sql);             
        while(
    $row mysql_fetch_assoc($res)){ 
            
    //Would have been nice to work off this single array, but found it difficult so I built sub-arrays below.                     
            
    $Reports[$row['reject_date']][$row['process_name']][$row['reject_type']][$row['compound_type']][]  = $row['reject']; 
             
            
    //build some unique sub arrays for displaying data  
            
    if (!in_array($row['reject_date'],$dates)){ 
                
    $dates[] = $row['reject_date']; 
            } 
            if (!
    in_array($row['process_name'],$process_names)){ 
                
    $process_names[] = $row['process_name']; 
            }     
            if (
    array_key_exists($row['process_name'],$compound_types) && !in_array($row['compound_type'],$compound_types[$row['process_name']]) ||  
            !
    array_key_exists($row['process_name'],$compound_types)){                                                                                                                                                
                
    $compound_types[$row['process_name']][] = $row['compound_type']; 
            }     
                
    $reject_types[$row['reject_date']][$row['process_name']][] = $row['reject_type']; 
                
    $rejects[$row['reject_date']][$row['process_name']][$row['reject_type']][$row['compound_type']] = $row['reject']; 
              
        } 
        
        
    //----query for total rejec
        
        
    $sql_total "SELECT  
        r.reject_date,  
        SUM(r.reject) AS reject_total,  
        r.process_id,  
        r.reject_type,   
        p.process_name  
        FROM op_reject AS r  
        JOIN process_list AS p  
        ON (p.process_id = r.process_id) 
        WHERE WEEK(reject_date)+1= '
    $id'
       GROUP BY r.reject_type 
        ORDER BY r.reject_date, reject_type, p.process_id  ASC"
    ;
        
        
    $res_total mysql_query($sql_total);
        
         while(
    $row_total mysql_fetch_assoc($res_total)){ 
            
    $Reports[$row_total['reject_date']][$row_total['process_name']][$row_total['reject_type']]  = $row_total['reject_total']; 
             
            
    //build some unique sub arrays for displaying data  

                
    $rejects_total[$row_total['reject_date']][$row_total['process_name']][$row_total['reject_type']] = $row_total['reject_total']; 
              
        } 
         
    //echo "<pre>"; 
    //print_r($Reports); 
    //print_r($dates);         
    //print_r($process_names);          
    //print_r($compound_types);     
    //print_r($reject_types); 
    //print_r($rejects);     
    //echo "</pre>"; 


    ////Build display data BEFORE output to browser//// 
    $display "<table border=1 cellpadding=2 cellspacing=0> 
            <thead> 
                <tr> 
                    <th>Compound</th>\r"

                    
    //I'll keep your id identifier in place                 
                    
    $i=1;                 
                    foreach(
    $dates as $date){ 
                        
    $display .= "<th id=col".$i." colspan=\"8\">$date</th>\r"
                        
    $i++; 
                    } 
                
    $display .= "</tr> 
                </thead>"

                    
    $datecnts = array();     
                    foreach(
    $process_names as $process_name){                 
                        
    $display .= "<tr>\r";     
                            
    $display .= "<td>$process_name</td>\r"
                                         
                        foreach(
    $dates as $date){ 
                            if (
    array_key_exists($process_name,$Reports[$date])){ 
                                
    $datecnts[$date] = count($Reports[$date][$process_name]); 
                                
    $d=0;                     
                                foreach(
    $Reports[$date][$process_name] as $reject_type => $arry){ 
                                    
    $display .= "<td>$reject_type</td>\r";     
                                    
    $d++;                             
                                }                             
                            }else{                             
                                for(
    $c=0;$c<=$d;$c++){ 
                                    
    $display .= "<td>&nbsp;</td>\r"
                                } 
                            }                                                                         
                        }                      
                
    $display .= "</tr>\r"
                
    // Even with sub-arrays it get quite messy checking for all the keys and attempting to fill empty table cells  
                        
    foreach($compound_types[$process_name] as $compound_type){                 
                            
    $display .= "<tr>\r";     
                                
    $display .= "<td>$compound_type</td>\r";                    
                            foreach(
    $dates as $date){ 
                                if (
    array_key_exists($date,$rejects) && array_key_exists($process_name,$rejects[$date])){ 
                                    foreach(
    $rejects[$date][$process_name] as $reject_type => $arry){ 
                                        if (
    array_key_exists($date,$rejects) && array_key_exists($process_name,$rejects[$date]) && !array_key_exists($reject_type,$rejects[$date][$process_name])){ 
                                            
    $display .= "<td>&nbsp;</td>\r"
                                        }elseif (
    array_key_exists($date,$rejects) && array_key_exists($process_name,$rejects[$date]) && array_key_exists($reject_type,$rejects[$date][$process_name]) && !array_key_exists($compound_type,$rejects[$date][$process_name][$reject_type])){ 
                                            
    $display .= "<td>&nbsp;</td>\r"
                                        }elseif (
    array_key_exists($date,$rejects) && array_key_exists($process_name,$rejects[$date]) && array_key_exists($reject_type,$rejects[$date][$process_name]) && array_key_exists($compound_type,$rejects[$date][$process_name][$reject_type])){ 
                                            
    $display .= "<td>{$rejects[$date][$process_name][$reject_type][$compound_type]}</td>\r"
                                        }else{ 
                                            
    $display .= "<td>&nbsp;</td>\r"
                                        } 
                                    } 
                                }else{ 
                                
    $display .= "<td colspan=\"{$datecnts[$date]}\">&nbsp;</td>\r"
                                }                                                         
                            }
                            
                                                                                                                      
                        }  
               
    //---total rejects per process and per reject type---//
                        
                            
    $display .= "<tr>"
                            
    $display .= "<td>Total</td>";
                     
                            foreach(
    $dates as $date1){ 
                                if (
    array_key_exists($date1,$rejects_total) && array_key_exists($process_name,$rejects_total[$date1])){ 
                                    foreach(
    $rejects_total[$date1][$process_name] as $reject_type => $arry){ 
                                        if (
    array_key_exists($date1,$rejects_total) && array_key_exists($process_name,$rejects_total[$date1]) && !array_key_exists($reject_type,$rejects_total[$date1][$process_name])){ 
                                            
    $display .= "<td>&nbsp;</td>\r"
                                        }elseif (
    array_key_exists($date1,$rejects_total) && array_key_exists($process_name,$rejects_total[$date1]) && !array_key_exists($reject_type,$rejects_total[$date1][$process_name])){ 
                                            
    $display .= "<td>&nbsp;</td>\r"
                                        }elseif (
    array_key_exists($date1,$rejects_total) && array_key_exists($process_name,$rejects_total[$date1]) && array_key_exists($reject_type,$rejects_total[$date1][$process_name])){ 
                                            
    $display .= "<td>{$rejects_total[$date1][$process_name][$reject_type][$compound_type]}</td>\r"
                                        }else{ 
                                            
    $display .= "<td>&nbsp;</td>\r"
                                        } 
                                    } 
                                }else{ 
                                
    $display .= "<td colspan=\"{$datecnts[$date1]}\">&nbsp;</td>\r"
                                }                                                         
                            }
                            
                            
    $display .= "</tr>";  
                    } 


                    
        
    $display .= "</table>"


    ?> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
        <html xmlns="http://www.w3.org/1999/xhtml"> 
        <head> 
        <title>Operator's Output and Reject</title> 
        </head> 
        <body> 
            <?php 
            
    if(isset($display)){ 
                echo 
    "$display"
            } 
            
    ?> 
        </body> 
    </html>
    Code:
    table {
        margin: 12px;
        margin-left: 3px;
        border: 1px;
            
        
    }
    
    th {
        background: #694;
        color: #FFF;
        padding: 2px 6px;
        border-collapse: separate;
        border: 1px;
    }
    
    td {
        border: 1px solid #DDD;
        text-align: left;
    
    }
    I attached my sample screenshots and also the database

    Thank you.
    Attached Images Attached Images
    Attached Files Attached Files

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,521
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Are you asking for help with PHP or CSS?

  3. #3
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    658
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    css

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,521
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    After re-reading, it still sounds like database and php to me, so we will have to wait until the images are approved and hope that the one labeled "table line" explains what a color line is and how it relates to css. Sorry, I just don't understand. Don't dispair, though. A php person will probably drop in before long .

  5. #5
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    658
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you..

    It was just a simple table that data came from database.

    I just want to add green line after between dates to figured out the list of reject type per date.


    Thank you so much

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,521
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Can you show us the HTML that is generated by the PHP? Most of us do not read PHP. We work primarily with HTML and CSS.

    Please note the following guideline:

    http://www.sitepoint.com/forums/show...=1#post5410283

  7. #7
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    658
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is the view source:

    Code:
     
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
        <html xmlns="http://www.w3.org/1999/xhtml"> 
        <head> 
        <title>Operator's Output and Reject</title> 
        </head> 
        <body> 
            <table border=1 cellpadding=2 cellspacing=0> 
            <thead> 
                <tr> 
                    <th>Compound</th>
    <th id=col1 colspan="8">2013-07-24</th>
    <th id=col2 colspan="8">2013-07-25</th>
    </tr> 
                </thead><tr>
    <td>Compound Mixing</td>
    <td>SC</td>
    <td>SH</td>
    <td>SP</td>
    <td>PG</td>
    <td>PT</td>
    </tr>
    <tr>
    <td>P28</td>
    <td>1.00</td>
    <td>3.00</td>
    <td>2.00</td>
    <td>1.00</td>
    <td>&nbsp;</td>
    <tr>
    <td>P30</td>
    <td>1.00</td>
    <td>3.00</td>
    <td>2.00</td>
    <td>2.00</td>
    <td>&nbsp;</td>
    <tr>
    <td>P32</td>
    <td>1.00</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>3.00</td>
    <tr><td>Total</td><td>3</td>
    <td>6</td>
    <td>4</td>
    <td>3</td>
    <td>3</td>
    </tr><tr>
    <td>Forming</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>BS</td>
    </tr>
    <tr>
    <td>P28</td>
    <td colspan="3">&nbsp;</td>
    <td>1.00</td>
    <tr><td>Total</td><td colspan="3">&nbsp;</td>
    <td>1</td>
    </tr></table> 
        </body> 
    </html>
    but the problem here the reject_type PG and PT and BS is reject type of 2013-07-25

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,521
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    OK. Are you saying that some of the cells of data are aligned under the wrong heading?

  9. #9
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    658
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes.


    Thank you

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,521
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Should BS be in the "Forming" row or should it be in the "Compound Mixing" row? And what about the data in P28 and Total?

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,521
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Tell me if this is what you are expecting the table to look like?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <title>Operator's Output and Reject</title> 
    </head> 
    <body> 
    <table border=1 cellpadding=2 cellspacing=0> 
    <thead> 
    <tr> 
        <th>Compound</th>
        <th id=col1 colspan="3">2013-07-24</th>
        <th id=col2 colspan="2">2013-07-25</th>
    </tr> 
    </thead>
    <tr>
        <td>Compound Mixing</td>
        <td>SC</td>
        <td>SH</td>
        <td>SP</td>
        <td>PG</td>
        <td>PT</td>
    </tr>
    <tr>
        <td>P28</td>
        <td>1.00</td>
        <td>3.00</td>
        <td>2.00</td>
        <td>1.00</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>P30</td>
        <td>1.00</td>
        <td>3.00</td>
        <td>2.00</td>
        <td>2.00</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>P32</td>
        <td>1.00</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>3.00</td>
    </tr>
    <tr>
        <td>Total</td>
        <td>3</td>
        <td>6</td>
        <td>4</td>
        <td>3</td>
        <td>3</td>
    </tr>
    <tr>
        <td>Forming</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>BS</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>P28</td>
        <td colspan="3">&nbsp;</td>
        <td>1.00</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>Total</td>
        <td colspan="3">&nbsp;</td>
        <td>1</td>
        <td>&nbsp;</td>
    </tr>
    </table> 
    </body> 
    </html>

  12. #12
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    658
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Should be in Forming Row

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,521
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Please copy the HTML that I posted into an HTML file and open it in your browser and tell me if this is on the right track.

    If it is, please describe what else you would like to see.

  14. #14
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    658
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nothing was change, but its ok cause i resolved it now using php.

    THank you so much

  15. #15
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,521
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Would you mind posting another Source View of the HTML? I would like to see how it is fixed?

    Thank you.

  16. #16
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    658
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
     
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
        <html xmlns="http://www.w3.org/1999/xhtml"> 
        <head> 
        <title>Operator's Output and Reject</title>
        <style type="text/css">
        .display {
        background-color:#9D9D9D;
        color:#00000;  
        font-family: Arial;
        font-size: 13px;
        }
        .display th{
        background-color:#4F8E38;
        color:#FFF;
        font-size: 14px;
        font-weight:bold;
        text-align:center;
        padding: 1px 3px;
        }
        .display td{
        background-color:#FFF;
        color:#00000;
        font-weight:bold;
        padding: 2px 4px;
        border:1px solid #E1E1E1;
        }
        .display .total{
        background-color:#F7FFF1;
        color:#000000;
        font-size: 13px; 
        font-weight:bold;
        padding: 2px 4px;
        border-top:1px solid #609A2C;
        border-bottom:1px solid #609A2C;
        }
        .display .border {
        border-left:2px solid #385320;
        }
        </style> 
        </head> 
        <body> 
            <table border=0 cellpadding=0 cellspacing=0 class="display"> 
            <thead> 
                <tr> 
                    <th>Compound</th>
    <th id=col1 colspan="3">2013-07-24</th>
    <th id=col2 colspan="2">2013-07-25</th>
    </tr> 
                </thead><tr>
    <td>Compound Mixing</td>
    <td class="border">SC</td>
    <td>SH</td>
    <td>SP</td>
    <td class="border">PG</td>
    <td>PT</td>
    </tr>
    <tr>
    <td>P28</td>
    <td class="border">1.00</td>
    <td>3.00</td>
    <td>2.00</td>
    <td class="border">1.00</td>
    <td> </td>
    </tr>
    <tr>
    <td>P30</td>
    <td class="border">1.00</td>
    <td>3.00</td>
    <td>2.00</td>
    <td class="border">2.00</td>
    <td> </td>
    </tr>
    <tr>
    <td>P32</td>
    <td class="border">1.00</td>
    <td> </td>
    <td> </td>
    <td class="border"> </td>
    <td>3.00</td>
    </tr>
    <tr>
    <td class="total">Total</td>
    <td class="total border">3.00</td>
    <td class="total">3.00</td>
    <td class="total">3.00</td>
    <td class="total border">3.00</td>
    <td class="total">3.00</td>
    <tr>
    <td>Forming</td>
    <td class="border"> </td>
    <td> </td>
    <td> </td>
    <td class="border">BS</td>
    <td> </td>
    </tr>
    <tr>
    <td>P28</td>
    <td class="border"> </td>
    <td> </td>
    <td> </td>
    <td class="border">1.00</td>
    <td> </td>
    </tr>
    <tr>
    <td class="total">Total</td>
    <td class="total border"> </td>
    <td class="total"> </td>
    <td class="total"> </td>
    <td class="total border">1.00</td>
    <td class="total"> </td>
    </tr>
    </table>
     
        </body> 
    </html>

  17. #17
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,521
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    You're very fast! That looks very nice. You're quite a pro.

    FYI: there is one closing </tr> tag missing around line 89 in the above code, but it does not seem to affect the output.

    And the validator would like to have the attribute values placed within quotation marks the same as "display" is.
    Code:
    <table border="0" cellpadding="0" cellspacing="0" class="display"> 
        <thead> 
            <tr> 
                <th>Compound</th>
                <th id="col1" colspan="3">2013-07-24</th>
                <th id="col2" colspan="2">2013-07-25</th>
    Nice chatting with you.

  18. #18
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    658
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  19. #19
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Make sure you close each command, but I agree it should be used in forming row.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •