Question

我编写了一个数据库更新代码。问题是在添加新行后，它会显示然后消失。这个页面在服务器端。我试图在firefox和chrome中打开页面，它会显示然后消失。有什么问题??

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

Answer 1

这是一个老问题，但我最近遇到了类似的问题。事实证明，使用HTML标记<button>是个问题。如果您将按钮放在表单中，则会导致页面重新加载，从而导致您报告的问题。虽然您没有表单中的按钮，但是您可能没有准确地向我们发送您网页上的内容？我怀疑是这种情况，因为您的HTML中没有正文标记。

最简单的解决方法是使用< input type="button"/>代替。

Answer 2

这是一个使用相同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>

添加的行消失了jquery

2 个答案: