在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>