我有一个Javascript代码，它根据复选框中的值隐藏HTML元素。复选框和其他元素采用表格形式，由数据库中的值填充。这是一个出勤登记册。我遇到的问题是Javascript在第一行运行良好，但运行到后续行。
这是Javascript：
<script language="JavaScript" type="text/javascript">
function initiallyHideElements() {
var absent = document.getElementById('emppresent').value;
var reason = document.getElementById('absentReason');
var remarks = document.getElementById('remarks');
var timein = document.getElementById('timein');
var timeout = document.getElementById('timeout');
reason.style.visibility = 'hidden';
remarks.style.visibility = 'hidden';
timein.style.visibility = 'visible';
timeout.style.visibility = 'visible';
}
function hideShowElements(){
var absent = document.getElementById('emppresent').value;
var reason = document.getElementById('absentReason');
var remarks = document.getElementById('remarks');
var timein = document.getElementById('timein');
var timeout = document.getElementById('timeout');
if (absent == "Yes") {
reason.style.visibility = 'visible';
remarks.style.visibility = 'visible';
timein.style.visibility = 'hidden';
timeout.style.visibility = 'hidden';
} else {
reason.style.visibility = 'hidden';
remarks.style.visibility = 'hidden';
timein.style.visibility = 'visible';
timeout.style.visibility = 'visible';
}
}
</script>
现在这是循环的重点。
<form action="processAttRegister.php" method="post" name="frmAttregister">
<table width="95%" border="1" align ="center" cellpadding="0" cellspacing="0" id="projectOverview">
<tr>
<th width="72">Date</th>
<th width="144">Name</th>
<th width="46">Absent</th>
<th width="143">Reason For Absence</th>
<th width="42">Time In</th>
<th width="42">Time Out</th>
<th width="152">Remarks</th>
<?php
$atts = mysql_query("SELECT * FROM tblemployeedata WHERE grade>4 AND section=3");
while($att = mysql_fetch_array($atts)) {
echo '<script type="text/javascript">initiallyHideElements();</script>';
?>
<tr id="projectlist">
<td><input name="date" id="date"type="text" value="<?php echo date("d-m-Y");?>" readonly size="12"/></td>
<td><input name="name" id="name"type="text" value="<?php echo $att["firstname"]." ".$att["surname"];?>" readonly /></td>
<td>
<div align="center">
<input name="emppresent" id="emppresent" type="checkbox" value="Yes" onclick="hideShowElements()"/>
</div>
</td>
<td>
<select name="absentReason" id="absentReason">
<option value="value" selected="selected">-</option>
<option value="Funeral">Attending Funeral</option>
<option value="Sick">Sick</option>
<option value="Other">Other</option>
</select>
</td>
<td><input type="text" name="timein" id="timein" size="7"/></td>
<td><input type="text" name="timeout" id="timeout" size="7"/></td>
<td>
<textarea name="remarks" id="remarks" cols="20" rows="3"></textarea>
</td>
</tr>
<?php
}
?>
<tr>
<td colspan="7">
<div align="center">
<input name="postAttendance" type="submit" id="postAttendance" value="Register Project" align="center" />
</div>
</td>
</tr>
</table>
</form>
答案 0 :(得分：0)
您只能在页面上拥有任何给定ID。你的循环正在创建大量重复的ID。
您可以创建一个计数器，该计数器随着每个循环迭代递增，并将计数器值添加到ID属性，使它们是唯一的。
修改JavaScript函数以使其具有参数count，并将其包含在ID选择器中：
<script language="JavaScript" type="text/javascript">
function initiallyHideElements(count) {
var absent = document.getElementById('emppresent' + count);
var reason = document.getElementById('absentReason' + count);
var remarks = document.getElementById('remarks' + count);
var timein = document.getElementById('timein' + count);
var timeout = document.getElementById('timeout' + count);
reason.style.visibility = 'hidden';
remarks.style.visibility = 'hidden';
timein.style.visibility = 'visible';
timeout.style.visibility = 'visible';
}
function hideShowElements(count){
var absent = document.getElementById('emppresent' + count);
var reason = document.getElementById('absentReaso' + count);
var remarks = document.getElementById('remarks' + count);
var timein = document.getElementById('timein' + count);
var timeout = document.getElementById('timeout' + count);
if (absent.checked === false) {
reason.style.visibility = 'visible';
remarks.style.visibility = 'visible';
timein.style.visibility = 'hidden';
timeout.style.visibility = 'hidden';
} else {
reason.style.visibility = 'hidden';
remarks.style.visibility = 'hidden';
timein.style.visibility = 'visible';
timeout.style.visibility = 'visible';
}
}
</script>
然后，修改PHP以包含唯一的$count作为元素ID的一部分，并作为JS函数调用的参数：
<form action="processAttRegister.php" method="post" name="frmAttregister">
<table width="95%" border="1" align ="center" cellpadding="0" cellspacing="0" id="projectOverview">
<tr>
<th width="72">Date</th>
<th width="144">Name</th>
<th width="46">Absent</th>
<th width="143">Reason For Absence</th>
<th width="42">Time In</th>
<th width="42">Time Out</th>
<th width="152">Remarks</th>
<?php
// we'll increase this new variable by 1 on each loop,
// to make sure it's always unique
$count = 0;
$atts = mysql_query("SELECT * FROM tblemployeedata WHERE grade>4 AND section=3");
while($att = mysql_fetch_array($atts)) {
// increase the count variable by 1
$count++;
// $count is added inside each ID attribute below to ensure uniqueness.
?>
<tr id="projectlist">
<td><input name="date" id="date<?php echo $count; ?>" type="text" value="<?php echo date("d-m-Y");?>" readonly size="12"/></td>
<td><input name="name" id="name<?php echo $count; ?>" type="text" value="<?php echo $att["firstname"]." ".$att["surname"];?>" readonly /></td>
<td>
<div align="center">
<input name="emppresent" id="emppresent<?php echo $count; ?>" type="checkbox" value="Yes" onclick="hideShowElements(<?php echo $count; ?>)"/>
</div>
</td>
<td>
<select name="absentReason" id="absentReason<?php echo $count; ?>">
<option value="value" selected="selected">-</option>
<option value="Funeral">Attending Funeral</option>
<option value="Sick">Sick</option>
<option value="Other">Other</option>
</select>
</td>
<td><input type="text" name="timein" id="timein<?php echo $count; ?>" size="7"/></td>
<td><input type="text" name="timeout" id="timeout<?php echo $count; ?>" size="7"/></td>
<td>
<textarea name="remarks" id="remarks<?php echo $count; ?>" cols="20" rows="3"></textarea>
</td>
</tr>
<?php
// pass count to the function.
echo '<script type="text/javascript">initiallyHideElements(' . $count . ');</script>';
}
?>
<tr>
<td colspan="7">
<div align="center">
<input name="postAttendance" type="submit" id="postAttendance" value="Register Project" align="center" />
</div>
</td>
</tr>
</table>
</form>