0

データベース更新用のコードを書きました。問題は、新しい行が追加された後、表示されてから消えることです.このページはサーバー側にあります.ChromeだけでなくFirefoxでもページを開こうとしましたが、表示されてから消えます. 何が問題ですか？？

<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        //$(function() { alert('hi') })
        $(document).ready(
            function () {
                $("#AddRow").click(
                    function () {
                        if ($('.checkbox').is(':checked')) {
                            {
                                //alert('hi') 
                                var row = document.getElementById("row"); // find row to copy
                                var table = document.getElementById("tabletomodify"); // find table to append to
                                var clone = row.cloneNode(true); // copy children too
                                clone.id = "row0"; // change id or other attributes/contents
                                table.appendChild(clone); // add new row to end of table

                            }

                        }
                    }

                );
            }
        );
    </script>
</head>



<table cellpadding="10" style="border:2px solid black;" id="tabletomodify">

    <tr bgcolor="#360584">
        <td style="border:1px solid black;" colspan="15"><font face="Arial" size="4" color="white"><b><i>Records</i></b></font>
        </td>
    </tr>
    <tr>
        <td>
            <button id="AddRow">Add Row</button>
        </td>
        <td>
            <button id="DuplicateRow">Duplicate Row</button>
        </td>
        <td>
            <button id="DeleteRow">Delete Row</button>
        </td>
    </tr>
    <tr bgcolor="#360584">
        <td><font face="Arial" size="2" color="white">Name </font>
        </td>
        <td><font face="Arial" size="2" color="white">Date of Birth</font>
        </td>
        <td><font face="Arial" size="2" color="white">City</font>
        </td>
        <td><font face="Arial" size="2" color="white">State</font>
        </td>
        <td><font face="Arial" size="2" color="white">Country</font>
        </td>
        <td><font face="Arial" size="2" color="white">Phone Number</font>
        </td>
        <td><font face="Arial" size="2" color="white">Mail ID</font>
        </td>


        <td><font face="Arial" size="2" color="white">Select</font>
        </td>



        <tr id="row">
            <td>
                <select></select>
            </td>
            <td>
                <select></select>
            </td>
            <td>
                <select></select>
            </td>
            <td>
                <select></select>
            </td>
            <td>
                <select></select>
            </td>
            <td>
                <select></select>
            </td>
            <td>
                <select></select>
            </td>
            <td>
                <input type="checkbox" class="checkbox">
            </td>

        </tr>
</table>
4

2 に答える 2

0

これは古い質問ですが、最近同様の問題がありました。HTMLタグの使用<button>が問題であることが判明しました。ボタンをフォームに配置すると、ページがリロードされ、報告された問題が発生します。フォームにボタンがありませんが、ページの内容を正確に投稿していない可能性がありますか? HTMLにbodyタグがないため、これが当てはまると思います。

最も簡単な修正は、< input type="button"/>代わりに使用することです。

于 2016-03-08T18:09:37.837 に答える
-1

これは、同じ html とクリーンアップされた JavaScript を使用したフィドルです: http://jsfiddle.net/krmFU/

$("#AddRow").click(function () {
    if ($('.checkbox').is(':checked')) {
        {
            alert('hi');
            var row = document.getElementById("row"); // find row to copy
            var table = document.getElementById("tabletomodify"); // find table to append to
            var clone = row.cloneNode(true); // copy children too
            clone.id = "row0"; // change id or other attributes/contents
            table.appendChild(clone); // add new row to end of table
        }
    }
});

<table cellpadding="10" style="border:2px solid black;" id="tabletomodify">
    <tr bgcolor="#360584">
        <td style="border:1px solid black;" colspan="15"><font face="Arial" size="4" color="white"><b><i>Records</i></b></font>

        </td>
    </tr>
    <tr>
        <td>
            <button id="AddRow">Add Row</button>
        </td>
        <td>
            <button id="DuplicateRow">Duplicate Row</button>
        </td>
        <td>
            <button id="DeleteRow">Delete Row</button>
        </td>
    </tr>
    <tr bgcolor="#360584">
        <td><font face="Arial" size="2" color="white">Name </font>

        </td>
        <td><font face="Arial" size="2" color="white">Date of Birth</font>

        </td>
        <td><font face="Arial" size="2" color="white">City</font>

        </td>
        <td><font face="Arial" size="2" color="white">State</font>

        </td>
        <td><font face="Arial" size="2" color="white">Country</font>

        </td>
        <td><font face="Arial" size="2" color="white">Phone Number</font>

        </td>
        <td><font face="Arial" size="2" color="white">Mail ID</font>

        </td>
        <td><font face="Arial" size="2" color="white">Select</font>

        </td>
    </tr>
    <tr id="row">
        <td>
            <select></select>
        </td>
        <td>
            <select></select>
        </td>
        <td>
            <select></select>
        </td>
        <td>
            <select></select>
        </td>
        <td>
            <select></select>
        </td>
        <td>
            <select></select>
        </td>
        <td>
            <select></select>
        </td>
        <td>
            <input type="checkbox" class="checkbox" />
        </td>
    </tr>
</table>
于 2013-10-31T18:54:26.217 に答える