javascript - 在 php 中循环 Javascript 函数

Question

我有一段 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>

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>