Question

我尝试在运行时以这种方式向js对象添加数据，但是收到错误。告诉我我犯了哪个错误？

这一行给出问题Persons.push(new Person(id:id,name:name,salary:sal));

这是我的代码：

$(document).ready(function () {
    $("#btnSave").click(function () {
        var id,name,salary;
        id=$("#txtID").val();
        name=$("#txtName").val();
        sal=$("#txtSal").val();
        Persons.push(new Person(id:id,name:name,salary:sal));
        return false;
    });

    $("#btnDelete").click(function () {
        alert('delete');
        return false;
    });
});

var Persons = [];
var Person = function (id, name, salary) {
    this.id = id;
    this.name = name;
    this.salary = salary;
};

这样我在js数组中添加编辑和删除数据。完整代码

<html>
<head><title>

</title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <style type="text/css">
        .style1
        {
            width: 100%;
        }
        .style2
        {
            width: 197px;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnSave").click(function () {
                var id, name, salary;
                id = $("#txtID").val();
                name = $("#txtName").val();
                sal = $("#txtSal").val();
                var index = IndexOfArrayByKeyValue(Persons, "id", id);
                if (index == null) {
                    Persons.push(new Person(id, name, sal));
                }
                else {
                    Persons[index].id = id;
                    Persons[index].name = name;
                    Persons[index].salary = sal;
                }
                Show();
                return false;
            });

            $("#btnDelete").click(function () {
                var id, name, salary;
                id = $("#txtID").val();
                name = $("#txtName").val();
                sal = $("#txtSal").val();
                var index = IndexOfArrayByKeyValue(Persons, "id", id);
                if (index != null) {
                    Persons.splice(index, 1);
                }
                Show();
                return false;
            });
        });

        var Persons = [];
        var Person = function (id, name, salary) {
            this.id = id;
            this.name = name;
            this.salary = salary;
        };

        function Show() {
            var theTable = document.createElement('table');
            for (var i = 0, tr, td; i < Persons.length; i++) {
                tr = document.createElement('tr');
                td = document.createElement('td');
                td.appendChild(document.createTextNode(Persons[i].id + '\u00A0\u00A0\u00A0'));
                tr.appendChild(td);

                td = document.createElement('td');
                td.appendChild(document.createTextNode(Persons[i].name + '\u00A0\u00A0\u00A0'));
                tr.appendChild(td);

                td = document.createElement('td');
                td.appendChild(document.createTextNode(Persons[i].salary + '\u00A0\u00A0\u00A0'));
                tr.appendChild(td);

                theTable.appendChild(tr);
            }
            $("#Displaytable").html(theTable);
        }

        function findArrayByKeyValue(arraytosearch, key, valuetosearch) {
            var Person = [];
            for (var i = 0; i < arraytosearch.length; i++) {
                if (arraytosearch[i][key] == valuetosearch) {
                    Person = arraytosearch[i];
                }
            }
            return Person;
        }

        function IndexOfArrayByKeyValue(arraytosearch, key, valuetosearch) {
            for (var i = 0; i < arraytosearch.length; i++) {
                if (arraytosearch[i][key] == valuetosearch) {
                    return i;
                }
            }
            return null;
        }

    </script>
</head>
<body>
    <form method="post" action="WebForm1.aspx" id="form1">

    <div>

        <table class="style1">
            <tr>
                <td class="style2" colspan="2">
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style2">
                    ID</td>
                <td>
                    <input name="txtID" type="text" id="txtID" style="width:61px;" />
                </td>
            </tr>
            <tr>
                <td class="style2" colspan="2">
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style2">
                    Name</td>
                <td>
                    <input name="txtName" type="text" id="txtName" style="width:252px;" />
                </td>
            </tr>
            <tr>
                <td class="style2" colspan="2">
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style2">
                    Salary</td>
                <td>
                    <input name="txtSal" type="text" id="txtSal" />
                </td>
            </tr>
            <tr>
                <td class="style2" colspan="2">
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style2">
                    <input type="submit" name="btnSave" value="Save" id="btnSave" />
&nbsp;
                    <input type="submit" name="btnDelete" value="Delete" id="btnDelete" />
                </td>
                <td>
                    &nbsp;</td>
            </tr>
        </table>
    </div>
    </form>
    <br /><br /><br />
    <div id='Displaytable'></div>
</body>
</html>

Answer 1

也许你应该改变这一行：

Persons.push(new Person(id:id,name:name,salary:sal));

对此：

Persons.push(new Person(id, name, salary));

Answer 2

您无需传递参数/参数名称。只需将值传递给Person构造函数。

id = $("#txtID").val();
name = $("#txtName").val();
sal = $("#txtSal").val();
Persons.push(new Person(id,name,sal));

如何在运行时向javascript对象添加数据

这样我在js数组中添加编辑和删除数据。完整代码

2 个答案: