I am creating a table in which each cell should have a checkbox.The layout of table is coming fine but in each cell I am getting blank instead of a checkbox like this http://s28.postimg.org/cssu0w1vx/pic.png.But if I dont use loop and do it manually it shows checkboxes Below is the php code
<?php
$j=0;
for($k=0;$k<3;$k++)
{
if($k==0)
{
echo "<tr id="."spanDate".">";
for($i=0;$i<8;$i++)
{
if($i==0)
echo "<td><input type='checkbox' name='time' value='" . ($i+1) . "'></td>";
else
echo "<td><input type='checkbox' name='time" . $j . "' value='" . ($i+1) . "'></td>";
$j++;
}
echo "</tr>";
}
else
{
echo "<tr id="."spanDate".$k.">";
for($i=0;$i<8;$i++)
{
if($i==0)
echo "<td><input type='checkbox' name='time' value='" . ($i+1) . "'></td>";
else
echo "<td><input type='checkbox' name='time" . $j . "' value='" . ($i+1) . "'></td>";
$j++;
}
echo "</tr>";
}
}
?>
</table>
AFTER running the updated code given by @bs03 I get this
<tr id=spanDate><td><input type='checkbox' name='time' value='1'></td><td><input type='checkbox' name='time1' value='2'></td><td><input type='checkbox' name='time2' value='3'></td><td><input type='checkbox' name='time3' value='4'></td><td><input type='checkbox' name='time4' value='5'></td><td><input type='checkbox' name='time5' value='6'></td><td><input type='checkbox' name='time6' value='7'></td><td><input type='checkbox' name='time7' value='8'></td></tr><tr id=spanDate1><td><input type='checkbox' name='time' value='1'></td><td><input type='checkbox' name='time9' value='2'></td><td><input type='checkbox' name='time10' value='3'></td><td><input type='checkbox' name='time11' value='4'></td><td><input type='checkbox' name='time12' value='5'></td><td><input type='checkbox' name='time13' value='6'></td><td><input type='checkbox' name='time14' value='7'></td><td><input type='checkbox' name='time15' value='8'></td></tr><tr id=spanDate2><td><input type='checkbox' name='time' value='1'></td><td><input type='checkbox' name='time17' value='2'></td><td><input type='checkbox' name='time18' value='3'></td><td><input type='checkbox' name='time19' value='4'></td><td><input type='checkbox' name='time20' value='5'></td><td><input type='checkbox' name='time21' value='6'></td><td><input type='checkbox' name='time22' value='7'></td><td><input type='checkbox' name='time23' value='8'></td></tr></table>
CSS CODE
<style>
.CSSTableGenerator {
margin:0px;padding:0px;
width:100%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #000000;
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}.CSSTableGenerator table{
border-collapse: collapse;
border-spacing: 0;
width:100%;
height:100%;
margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
}
.CSSTableGenerator table tr:first-child td:first-child {
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}
.CSSTableGenerator table tr:first-child td:last-child {
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
}.CSSTableGenerator tr:last-child td:first-child{
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
}.CSSTableGenerator tr:hover td{
}
.CSSTableGenerator tr:nth-child(odd){ background-color:#ffaa56; }
.CSSTableGenerator tr:nth-child(even) { background-color:#ffffff; }.CSSTableGenerator td{
vertical-align:middle;
border:1px solid #000000;
border-width:0px 1px 1px 0px;
text-align:left;
padding:7px;
font-size:10px;
font-family:Arial;
font-weight:bold;
color:#000000;
}.CSSTableGenerator tr:last-child td{
border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
background:-o-linear-gradient(bottom, #ff7f00 5%, #bf5f00 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff7f00), color-stop(1, #bf5f00) );
background:-moz-linear-gradient( center top, #ff7f00 5%, #bf5f00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff7f00", endColorstr="#bf5f00"); background: -o-linear-gradient(top,#ff7f00,bf5f00);
background-color:#ff7f00;
border:0px solid #000000;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:14px;
font-family:Arial;
font-weight:bold;
color:#ffffff;
}
.CSSTableGenerator tr:first-child:hover td{
background:-o-linear-gradient(bottom, #ff7f00 5%, #bf5f00 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff7f00), color-stop(1, #bf5f00) );
background:-moz-linear-gradient( center top, #ff7f00 5%, #bf5f00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff7f00", endColorstr="#bf5f00"); background: -o-linear-gradient(top,#ff7f00,bf5f00);
background-color:#ff7f00;
}
.CSSTableGenerator tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}
</style>
Why are you concatenating them unnecessarily. Only concatenate where needed and add the '/"s properly.Simply do -
echo "<td><input type='checkbox' name='time' value='" . ($i+1) . "'></td>";
For else part -
echo "<td><input type='checkbox' name='time" . $j . "' value='" . ($i+1) . "'></td>"