add css code inside while loop <tr>

**newphpcoder** · Mar 16, 2012 01:03

hi...

I have query to display data and I use while loop.

here is my code:

Code:

echo "<table id='kanban_list'>";
echo "<tr>
        <th><label>Display Details:</label><input  onclick='showDetails(this);' id='chkDetail'   type='checkbox' checked='checked' value='wip'/></th>
        <th> PCODE </th>
        <th> LOT CODE </th>
        <th> CHEMICAL WEIGHING </th>
        <th> COMPOUNDING </th>
        <th> EXTRUSION </th>
        <th> FORMING </th>
        <th> DEFLASHING </th>
        <th> KANBAN </th>
        <th> VIRTUAL </th>
        <th> TOTAL </th>
        <!--<th> MIN LOT </th>-->
     </tr>";  
$sql = "SELECT DISTINCT kd.PCODE, kc.count_wip_chemical_weighing, kc.count_wip_compounding, kc.count_wip_extrusion, 
kc.count_wip_forming, kc.count_wip_deflashing, kc.kanban, kc.virtual, kc.total FROM kanban_checker kc JOIN kanban_data kd ON kc.PCODE = kd.PCODE
ORDER BY kc.PCODE";
$result = mysql_query($sql, $con); 
while($row = mysql_fetch_assoc($result)){            
    echo "<tr>
        <td>Total Lot ID (Lot)</td>
        <td>&nbsp;$row[PCODE]</td>  
        <td>&nbsp;</td>
        <td>&nbsp;$row[count_wip_chemical_weighing]</td>                                          
        <td>&nbsp;$row[count_wip_compounding]</td>
        <td>&nbsp;$row[count_wip_extrusion]</td>
        <td>&nbsp;$row[count_wip_forming]</td>
        <td>&nbsp;$row[count_wip_deflashing]</td>
        <td>&nbsp;$row[kanban]</td>
        <td>&nbsp;$row[virtual]</td>
        <td>&nbsp;$row[total]</td>
       <!-- <td>&nbsp;$row[min_lot]</td>  -->
        </tr>";
}

$sql = "SELECT DISTINCT kd.PCODE, kdc.count_doz_chemical_weighing, kdc.count_doz_compounding, kdc.count_doz_extrusion, 
kdc.count_doz_forming, kdc.count_doz_deflashing, kdc.kanban_doz, kdc.virtual_doz, kdc.total_doz FROM kanban_checker_doz kdc JOIN kanban_data kd ON kdc.PCODE = kd.PCODE
WHERE kd.PCODE = '$row[PCODE]'
ORDER BY kdc.PCODE";
$result_qty = mysql_query($sql, $con);

while ($row_doz = mysql_fetch_assoc($result_qty)){
     echo "<tr>
        <td>Total Qty (Doz)</td>
        <!--<td>&nbsp;</td>  -->
        <td>&nbsp;$row_doz[PCODE]</td> 
        <td>&nbsp;</td>
        <td>&nbsp;$row_doz[count_doz_chemical_weighing]</td>                                          
        <td>&nbsp;$row_doz[count_doz_compounding]</td>
        <td>&nbsp;$row_doz[count_doz_extrusion]</td>
        <td>&nbsp;$row_doz[count_doz_forming]</td>
        <td>&nbsp;$row_doz[count_doz_deflashing]</td>
        <td>&nbsp;$row_doz[kanban_doz]</td>
        <td>&nbsp;$row_doz[virtual_doz]</td>
        <td>&nbsp;$row_doz[total_doz]</td>
       <!-- <td>&nbsp;$row[min_lot]</td>  -->
        </tr>";   
}
echo "</table>";

sample data:

Display Details---Compound---Chemical Weighing-----etc...
---------------------P28------------1.00----------------------------
---------------------P28------------250.00------------------------
---------------------P30------------2.00--------------------------
---------------------P30------------520.00---------------------
---------------------P32------------1.00----------------------------

I need to add alternate background color per compound.
for example:

P28 green
P30 yellow
P32 green
P33 yellow
and so on.

Any help is highly appreciated.

Thank you

---------------------P32------------520.00-----------------------
---------------------P33------------4.00----------------------------
---------------------P33------------1000.00---------------------

**CSU-Bill** · Mar 16, 2012 05:45

Have you tried setting a class and using CSS?

Just adding a class to your code in this spot may do what you want.

PHP Code:


while ($row_doz = mysql_fetch_assoc($result_qty)){

     echo "<tr class="alternate">

        <td>Total Qty (Doz)</td>

then set your CSS to read something like:

.alternate tr:nth-child(even) {
background-color: #ffff00;
}
.alternate tr:nth-child(odd) {
background-color: #00ff00;
}

**LeonardChallis** · Mar 16, 2012 18:53

I thought I'd add this, for future reference (though as far as I'm aware it's not supported on IE8 or lower or on Opera at the minute), a method that doesn't require any extra classes or code. You just add this to your CSS:

Code:

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

You can replace even with odd if you wish to start on the first row instead of second. We'll hopefully see more of this in the future

**deathshadow60** · Mar 16, 2012 23:45

1) TR is not actually supposed to accept background-color since it's a non-render element; so you want to target it's children, not the TR.

2) if you're going to use nth-child, target off the parent table's ID instead of wasting time on extra classes.

3) though as pointed out, nth-child doesn't exist on IE8/lower, so an alternating class on the TR targeting the TD/TH are your best bet.

Zeroing a counter first, then going:

Code:

$counter=0;
while ($row_doz = mysql_fetch_assoc($result_qty)) { 
  echo '<tr',( ++$counter%2==0 ? '' : ' class="even"' ),'> 
    <td>Total Qty (Doz)</td>

Will put the class "even" on every other TR...

Code:

#kanban_list td {
  background:green;
}

#kanban_list .even td {
  background:yellow;
}

...and that would work all the way back to IE 5.0

Side Note: get your column headings into THEAD, your 'row upon row' of TD into TBODY, and get SCOPE on them.... and your first TD appears to be a row heading, so those should probably be TH as well... and of course there's the slow double quotes,parsing overhead, and non-breaking spaces / regular spaces doing padding's job...

**deathshadow60** · Mar 17, 2012 00:06

Just to illustrate what I meant above about the TH, TBODY, THEAD and SCOPE...

Code:

echo '
	<table id="kanban_list">
		<thead>
			<tr>
				<td>
					<label>Display Details:</label>
					<input
						onclick="showDetails(this);"
						id="chkDetail"
						type="checkbox"
						checked="checked"
						value="wip"
					/>
				</td>
				<th scope="col">PCODE</th>
				<th scope="col">LOT CODE</th>
				<th scope="col">CHEMICAL WEIGHING</th>
				<th scope="col">COMPOUNDING</th>
				<th scope="col">EXTRUSION</th>
				<th scope="col">FORMING</th>
				<th scope="col">DEFLASHING</th>
				<th scope="col">KANBAN</th>
				<th scope="col">VIRTUAL</th>
				<th scope="col">TOTAL</th>
				<!--<th scope="col">MIN LOT</th>-->
			</tr>
		</thead><tbody>';

$sql="SELECT DISTINCT kd.PCODE, kc.count_wip_chemical_weighing, kc.count_wip_compounding, kc.count_wip_extrusion, kc.count_wip_forming, kc.count_wip_deflashing, kc.kanban, kc.virtual, kc.total FROM kanban_checker kc JOIN kanban_data kd ON kc.PCODE=kd.PCODE
ORDER BY kc.PCODE";

$result=mysql_query($sql, $con);
$counter=0;
while ($row=mysql_fetch_assoc($result)){
	echo '
		<tr',(++$counter%2==0 ? '' : ' class="even"'),'>
			<th scope="row">Total Lot ID (Lot)</th>
			<td>',$row[PCODE],'</td>
			<td></td>
			<td>',$row[count_wip_chemical_weighing],'</td>
			<td>',$row[count_wip_compounding],'</td>
			<td>',$row[count_wip_extrusion],'</td>
			<td>',$row[count_wip_forming],'</td>
			<td>',$row[count_wip_deflashing],'</td>
			<td>',$row[kanban],'</td>
			<td>',$row[virtual],'</td>
			<td>',$row[total],'</td>
			<!-- <td>',$row[min_lot],'</td>	-->
		</tr>';
}

$sql="SELECT DISTINCT kd.PCODE, kdc.count_doz_chemical_weighing, kdc.count_doz_compounding, kdc.count_doz_extrusion, kdc.count_doz_forming, kdc.count_doz_deflashing, kdc.kanban_doz, kdc.virtual_doz, kdc.total_doz FROM kanban_checker_doz kdc JOIN kanban_data kd ON kdc.PCODE=kd.PCODE
WHERE kd.PCODE='$row[PCODE]'
ORDER BY kdc.PCODE";

$result_qty=mysql_query($sql, $con);
while ($row_doz=mysql_fetch_assoc($result_qty)){
	echo '
		<tr',(++$counter%2==0 ? '' : ' class="even"'),'>
			<th scope="row">Total Qty (Doz)</th>
			<td>',$row_doz[PCODE],'</td>
			<td></td>
			<td>',$row_doz[count_doz_chemical_weighing],'</td>
			<td>',$row_doz[count_doz_compounding],'</td>
			<td>',$row_doz[count_doz_extrusion],'</td>
			<td>',$row_doz[count_doz_forming],'</td>
			<td>',$row_doz[count_doz_deflashing],'</td>
			<td>',$row_doz[kanban_doz],'</td>
			<td>',$row_doz[virtual_doz],'</td>
			<td>',$row_doz[total_doz],'</td>
			<!-- <td>',$row[min_lot],'</td>	-->
		</tr>';
}

echo '
	</tbody>
</table>';

I also changed the first column in THEAD to a td -- that doesn't feel like a heading for that column.

**newphpcoder** · Mar 18, 2012 19:31

I already resolve my code using this:

Code:

while ($row_doz = mysql_fetch_assoc($result_qty)){ 
     if($row_doz[PCODE] == 'P28') {
        $css_class = 'blue-css-class-name';
    }
    elseif($row_doz[PCODE] == 'P30') {
        $css_class = 'green-css-class-name';
    }
    elseif ($row_doz[PCODE] == 'P32') {
        $css_class = 'blue-css-class-name';
    }
    elseif ($row_doz[PCODE] == 'P33') {
        $css_class = 'green-css-class-name';
    }
    elseif ($row_doz[PCODE] == 'P35') {
        $css_class = 'blue-css-class-name';
    }
    elseif ($row_doz[PCODE] == 'P35M') {
        $css_class = 'green-css-class-name';
    }
    elseif ($row_doz[PCODE] == 'P35W') {
        $css_class = 'blue-css-class-name';
    }
    elseif ($row_doz[PCODE] == 'P38') {
        $css_class = 'green-css-class-name';
    }
    elseif ($row_doz[PCODE] == 'P41') {
        $css_class = 'blue-css-class-name';
    }
    elseif ($row_doz[PCODE] == 'P42') {
        $css_class = 'green-css-class-name';
    }
    elseif ($row_doz[PCODE] == 'P43') {
        $css_class = 'blue-css-class-name';
    }
    elseif ($row_doz[PCODE] == 'P46') {
        $css_class = 'green-css-class-name';
    }
    elseif ($row_doz[PCODE] == 'P47') {
        $css_class = 'blue-css-class-name';
    }
    else{
        $css_class = '';
    }
    
    echo "<tr class='".$css_class."'>
        <td>Total Qty (Doz)</td>
        <!--<td>&nbsp;</td>  -->
        <td>&nbsp;$row_doz[PCODE]</td> 
        <td>&nbsp;</td>
       <!-- <td>$row[LOT_CODE]</td>   -->
        <td>&nbsp;$row_doz[count_doz_chemical_weighing]</td>                                          
        <td>&nbsp;$row_doz[count_doz_compounding]</td>
        <td>&nbsp;$row_doz[count_doz_extrusion]</td>
        <td>&nbsp;$row_doz[count_doz_forming]</td>
        <td>&nbsp;$row_doz[count_doz_deflashing]</td>
        <td>&nbsp;$row_doz[kanban_doz]</td>
        <td>&nbsp;$row_doz[virtual_doz]</td>
        <td>&nbsp;$row_doz[total_doz]</td>
       <!-- <td>&nbsp;$row[min_lot]</td>  -->
        </tr>"; 
         
}

Thank you

**oddz** · Mar 18, 2012 20:59

You shouldn't be using presentational classes. Instead use class names that convey the context of each separate case. In this case the pcode with a static prefix is probably more appropriate.

**deathshadow60** · Mar 18, 2012 22:00

Much less the flat out inefficiency of that mass of if/else/if/else/if/else -- that's Switch/case's job -- or maybe an array lookup.

Oh, and it's also not cool to be skipping using quotes around your indexes, especially since in some future version of PHP they are going to drop that! (says so on PHP.net in the arrays section)

Switch/case -- much simpler:

Code:

switch ($row_doz['PCODE']) {

	case 'P28':
	case 'P32':
	case 'P35':
	case 'P35W':
	case 'P41':
	case 'P43':
	case 'P47':
		$css_extra=' class="odd"';
	break;
	
	case 'P30':
	case 'P33':
	case 'P35M':
	case 'P38':
	case 'P42':
	case 'P46':
		$css_extra=' class="even"';
	break;
	
	default:$css_extra='';
}

since you had three states I put the class= in there so when an unrecognized value comes along, you aren't wasting time saying it.

Or with an array lookup:

Code:

$colorMatches=array(
	'P28' => 'odd',
	'P35' => 'odd',
	'P35W' => 'odd',
	'P41' => 'odd',
	'P43' => 'odd',
	'P47' => 'odd',
	'P30' => 'even',
	'P33' => 'even',
	'P35M' => 'even',
	'P38' => 'even',
	'P42' => 'even',
	'P46' => 'even'
);
	
$class=(
	isset($colorMatches[$row_doz['PCODE']]) ?
	$colorMatches[$row_doz['PCODE']] :
	''
);

Though targeting them specifically doesn't guarantee alternating rows if any of those are MISSING... or if you decide to add more codes later -- which is why I'd advocate using a counter modulo 2 as I showed, or perhaps a self negating boolean.

The latter of those being as simple as doing $odd=false; then for each TR just:

Code:

echo '<tr class="',(
  ($odd=!$odd) ? 'odd' : 'even'
),'">';

though again, that's alternating the colors automatically, not assigning them directly to just specific values.

User Tag List

Thread: add css code inside while loop <tr>

Thread Tools

Display

add css code inside while loop <tr>

Bookmarks

Bookmarks

Posting Permissions