HI,
In a page I load table in while loop with time duration calculation for multiple times. I want to display time difference in their respective rows.
Here I included my code.
<?php
$a = mysql_query("SELECT * FROM user")or die(mysql_error());
$a_count = mysql_num_rows($a);
if($a_count > 0)
{
?>
<table border="1" width="100%" cellpadding="0" cellspacing="0">
<tr bgcolor="#1A4779" class="white_bold" align="center" height="25">
<th width="5%">S.No</th>
<th width="5%">Select</th>
<th width="35%">Subject</th>
<th width="10%">Date</th>
<th width="10%">Start Time</th>
<th width="10%">End Time</th>
<th width="15%">Duration</th>
<th width="10%">Maximum Marks</th>
</tr>
<?php
$i = 1;
while($a_res = mysql_fetch_array($a))
{
?>
<tr align="center">
<td width="5%"><?php echo $i;?></td>
<td width="10%"><input type="checkbox" name="subjects[]" value="<?php echo $a_res['id'];?>"/></td>
<td width="35%"><?php echo $a_res['name'];?></td>
<td width="10%"><?php echo $a_res['mobile'];?></td>
<td width="10%"><select name="start_time" id="start_time" style="width:100px;" class="drop_down" required onchange="showSelected(this.form)">
<option value=""><-- Select Time --></option>
<option value="1">12:00 AM</option>
<option value="2">12:30 AM</option>
<option value="3">01:00 AM</option>
<option value="4">01:30 AM</option>
<option value="5">02:00 AM</option>
<option value="6">02:30 AM</option>
<option value="7">03:00 AM</option>
<option value="8">03:30 AM</option>
<option value="9">04:00 AM</option>
<option value="10">04:30 AM</option>
<option value="11">05:00 AM</option>
<option value="12">05:30 AM</option>
<option value="13">06:00 AM</option>
<option value="14">06:30 AM</option>
<option value="15">07:00 AM</option>
<option value="16">07:30 AM</option>
<option value="17">08:00 AM</option>
<option value="18">08:30 AM</option>
<option value="19">09:00 AM</option>
<option value="20">09:30 AM</option>
<option value="21">10:00 AM</option>
<option value="22">10:30 AM</option>
<option value="23">11:00 AM</option>
<option value="24">11:30 AM</option>
<option value="25">12:00 PM</option>
<option value="26">12:30 PM</option>
<option value="27">01:00 PM</option>
<option value="28">01:30 PM</option>
<option value="29">02:00 PM</option>
<option value="30">02:30 PM</option>
<option value="31">03:00 PM</option>
<option value="32">03:30 PM</option>
<option value="33">04:00 PM</option>
<option value="34">04:30 PM</option>
<option value="35">05:00 PM</option>
<option value="36">05:30 PM</option>
<option value="37">06:00 PM</option>
<option value="38">06:30 PM</option>
<option value="39">07:00 PM</option>
<option value="40">07:30 PM</option>
<option value="41">08:00 PM</option>
<option value="42">08:30 PM</option>
<option value="43">09:00 PM</option>
<option value="44">09:30 PM</option>
<option value="45">10:00 PM</option>
<option value="46">10:30 PM</option>
<option value="47">11:00 PM</option>
<option value="48">11:30 PM</option>
</select></td>
<td width="10%"><select name="end_time" id="end_time" style="width:100px;" class="drop_down" onblur="showDuration();" required>
<option value=""><-- Select Time --></option>
<option value="1">12:00 AM</option>
<option value="2">12:30 AM</option>
<option value="3">01:00 AM</option>
<option value="4">01:30 AM</option>
<option value="5">02:00 AM</option>
<option value="6">02:30 AM</option>
<option value="7">03:00 AM</option>
<option value="8">03:30 AM</option>
<option value="9">04:00 AM</option>
<option value="10">04:30 AM</option>
<option value="11">05:00 AM</option>
<option value="12">05:30 AM</option>
<option value="13">06:00 AM</option>
<option value="14">06:30 AM</option>
<option value="15">07:00 AM</option>
<option value="16">07:30 AM</option>
<option value="17">08:00 AM</option>
<option value="18">08:30 AM</option>
<option value="19">09:00 AM</option>
<option value="20">09:30 AM</option>
<option value="21">10:00 AM</option>
<option value="22">10:30 AM</option>
<option value="23">11:00 AM</option>
<option value="24">11:30 AM</option>
<option value="25">12:00 PM</option>
<option value="26">12:30 PM</option>
<option value="27">01:00 PM</option>
<option value="28">01:30 PM</option>
<option value="29">02:00 PM</option>
<option value="30">02:30 PM</option>
<option value="31">03:00 PM</option>
<option value="32">03:30 PM</option>
<option value="33">04:00 PM</option>
<option value="34">04:30 PM</option>
<option value="35">05:00 PM</option>
<option value="36">05:30 PM</option>
<option value="37">06:00 PM</option>
<option value="38">06:30 PM</option>
<option value="39">07:00 PM</option>
<option value="40">07:30 PM</option>
<option value="41">08:00 PM</option>
<option value="42">08:30 PM</option>
<option value="43">09:00 PM</option>
<option value="44">09:30 PM</option>
<option value="45">10:00 PM</option>
<option value="46">10:30 PM</option>
<option value="47">11:00 PM</option>
<option value="48">11:30 PM</option>
</select></td>
<td width="10%"><input type="text" name="duration" id="duration" readonly="readonly" /></td>
<td width="10%"><input type="text" name="total_marks" id="total_marks" required onKeyPress="return onlyNumbers(event)" maxlength="3" size="3"/></td>
</tr>
<?php
$i++;
}
?>
</table>
<?php
}
else
{
echo "No records found!";
}
?>
<!--Time Duration Calculation Starts -->
<script type="text/javascript">
function showDuration()
{
var from_time = document.getElementById('start_time').value;
var to_time = document.getElementById('end_time').value;
if(to_time > from_time)
{
var diff = to_time - from_time;
var duration = diff/2;
var duration_length = duration.toString().length;
//alert(duration_length);
if(duration_length == 3)
{
var y = Math.round(duration)-1;
document.getElementById('duration').value = y+"Hrs : 30 Mins";
}
else
{
document.getElementById('duration').value = duration+"Hrs : 00 Mins";
}
}
else
{
alert("Can not calculate duration");
document.getElementById('start_time').value = "";
document.getElementById('end_time').value = "";
return false;
}
}
</script>
<!--Time Duration Calculation Ends -->
<!------------Number Key Validation Start------------------->
<script type="text/javascript">
function onlyNumbers(event)
{
var charCode = (event.which) ? event.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
</script>
<!------------Number Key Validation End------------------->
For me it displays all values in first row only..
AntonyRayan 15 Posting Whiz in Training
diafol
Have you isolated what's not working? Dumping the whole page is a little bit much don't you think? Oh, and indent your js - it's too messy to read properly.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.