在php中循环使用Javascript函数

Question

我有一个基于复选框中的值隐藏HTML元素的Javascript代码。复选框和其他元素是以表格的形式填充来自数据库的值。这是一个考勤记录。我遇到的问题是，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> 

Answer 1

您只能在页面上显示任意给定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>