0

person.jsp

 <script type="text/javascript">
        function validateadvance() {
            document.getElementById("fn").style.visibility = "visible";
            }

        $(function() {
            $(".dp").datepicker();
        });
    </script>
    </head>

    <body>
        <form>

             <table border="1" width="500" align="center">
                <tr>
                                 <td>
                                     <div id="left-pane"
                            style="float: left; width: 20%; padding-bottom: 350px">
                            <a href="person.jsp">Candidate_Details</a> <br> <a
                                href="jobsearch.jsp">Technical_Details</a> <br>
                        </div>
                    </td>

                    <td>
                        <div id="left-pane">
                            <br>
                            <br> ID <input type=text value="" maxlength="10" size="10">
                            <br>
                            <br> Name <select>
                                <option value="start">Startswith</option>
                                <option value="end">Endswith</option>
                                <option value="exact">Exact</option>
                                <option value="anywhere">Anywhere</option>
                            </select> <input type=text value=""> <br>
                            <br> Batch <select>
                                <option value="completed">JINIS Group</option>
                                <option value="intensionally quit">Brigade Group</option>
                                <option value="incomplete">Apurva Batch</option>
                                <option value="not taken">TCS Group</option>
                                <option value="all">All</option>
                            </select> <br>
                            <br> Test_Status <select>
                                <option value="approved">Approved</option>
                                <option value="onhold">On_Hold</option>
                                <option value="pending">Pending</option>
                                <option value="rejected">Rejected</option>
                            </select> <br>
                            <br>


                            <div id="fn" class="hidethis" style="visibility: 'hidden'">

                                Email <select>
                                    <option value="start">Startswith</option>
                                    <option value="end">Endswith</option>
                                    <option value="exact">Exact</option>
                                    <option value="anywhere">Anywhere</option>
                                </select> <input type=text value=""> <br>
                                <br> Password <select>
                                    <option value="start">Startswith</option>
                                    <option value="end">Endswith</option>
                                    <option value="exact">Exact</option>
                                    <option value="anywhere">Anywhere</option>
                                </select> <input type=text value=""> <br>
                                <br> Job Processed <select>
                                    <option value="businessman">Businessman</option>
                                    <option value="ceo">CEO of the company</option>
                                    <option value="design manager">Design Manager</option>
                                    <option value="project leader">Project Leader</option>
                                </select> <br>
                                <br> Pdf_Export <input type="radio" name="pdf_export"
                                    value="yes">Yes <input type="radio" name="pdf_export"
                                    value="no">No <input type="radio" name="pdf_export"
                                    value="no">Both <br>
                                <br> Technical_TestStatus <select>
                                    <option value="completed">Completed</option>
                                    <option value="intensionally quit">Intentionally Quit</option>
                                    <option value="incomplete">Incomplete</option>
                                    <option value="not taken">Not Taken</option>
                                </select> <br>
                                <br> Test Inconsistency<br> <input type="checkbox"
                                    name="inconsistency" value="yes">Yes <input
                                    type="checkbox" name="inconsistency" value="no">No <input
                                    type="checkbox" name="inconsistency" value="no">Ok <br>
                                <br> Date_of_Test <input type="text" id="datepicker"
                                    class="dp" size="8" /> - <input type="text" id="datepicker1"
                                    class="dp" size="8" />
                            </div>

                            <div id="left-pane" align="center">

                                <br>
                                <br> <input type="button" value="Search"
                                    style="width: 130px; height: 35px;" />&nbsp;&nbsp; <input
                                    type="button" value="AdvancedSearch"
                                    onclick="return validateadvance()"
                                    style="width: 130px; height: 35px;" />
                            </div>
                    </td>
                             </tr>
            </table>

        </form>
    </body>

//Eclipse でコードを実行すると、開始時に ID "fn" を持つ div が非表示になり、advancesearch の onclick で div が表示されますが、ブラウザーで実行すると、ページの読み込み時に div が表示されます。だから、divを開始時に非表示にし、ブラウザでもボタンのクリックで表示する方法を教えてください。

4

3 に答える 3

0

DOM がロードされた後にのみ JavaScript を実行するようにしてください。そうしないと、JavaScript がdivページに読み込まれる前に実行されます。jQuery を使用してこれを行うには、既存のコードを次のようにラップするだけです。

$(document).ready(function() {
    ... your JS code ...
});

…そして、それはそれを行う必要があります。

しかし、それを隠す必要もあります。hiddenこれは、可視性をではなくに設定することを意味しますvisible。

于 2013-10-03T04:41:15.673 に答える
0

このスタイルを試してください

//html
<div id="fn" class="hidethis" style="display: none;">

//javascript
function validateadvance() {
    document.getElementById("fn").style.display = "block";
}
于 2013-10-03T04:44:35.890 に答える
0 
<script type="text/javascript">
        function validateadvance() {
            document.getElementById("fn").style.visibility = "visible";

        }

        $(function() {
            $(".dp").datepicker();
            document.getElementById("fn").style.visibility = "hidden";
        });
    </script>
于 2013-10-03T04:49:22.877 に答える