导致JS完全无法工作的Array方法。如何将值保存到2d数组并显示它?

时间:2014-02-14 14:06:49

标签: javascript multidimensional-array

这要归功于Thunda和ArtyMcFly的大力帮助。 有关整个代码,请查看此处:http://plnkr.co/edit/Imcl53?p=info 感谢Thunda的这个建议。 首先请让我为这些庞大的代码道歉。我只是不知道如何完整地解释我的问题......

我是JS新手但不是编程。我想做以下事情:

用户输入他的名字,姓氏,年龄并选择他的性别。单击“开始”按钮,将根据构造函数Mitarbeiter创建一个对象。到目前为止,除了我想将值保存到2D数组之外,一切正常。 runningNr用作计数器和ID。之后我想在表格中显示2D数组。

我的问题:显然我的saveToArray()showArray()方法导致我的整个JS代码不再起作用。我通过评论两种方法以及相应的this.saveToArray = saveToArray()this.showArray = showArray()对此进行了测试。

我也不太确定如何实际实现我的showArray()方法,但如果我甚至无法保存这些值,那么就没有必要考虑这个问题。 :/

另外,我只允许用JS完成这项任务。

var runningNr = 0;
var employee = new Array(); // 2D-Array

// Konstruktor
function Mitarbeiter(f, l, a, g) //f = forename, l = lastname, a = age, g = gender
{
    var fname = f;
    var lname = setLName(l);
    var age = a;
    var gender;
    if (g == "Mann")
        gender = false;
    else
        gender = true;
    this.forename = getFName();
    this.lastname = getLName();
    this.age = getAge();
    this.gender = getGender();
    var total = runningNr + 1; // total of objects. runningNr +1 cause runningNr starts at 0
    this.total = getTotalObj();
    var checkboxes = document.forms.meinFormular.elements.gender;
    this.saveToArray = saveToArray();
    /* this.showArray = showArray(); */

    // Getters coming your way


    // Setters coming your way
    function setLName(x)
    {
        lname = x;
    }

    function saveToArray(runningNr, fname, lname, age, gender)
    {
        employee[Id] = new Array();
        employee[Id]["ID"] = runningNr
        employee[Id]["Firstname"] = fname;
        employee[Id]["Lastname"] = lname;
        employee[Id]["Age"] = age;
        employee[Id]["Gender"] = gender;
        runningNumber++; // Increment as this is the ID as well as the row of 2D-Array
    }

    function showArray() // Creating a table to show all informations about employees
    {
        var myTable = "<table>";
        myTable += "<tr>";
        myTable += "<th> ID </th>";
        myTable += "<th> Vorname </th>";
        myTable += "<th> Nachname </th>";
        myTable += "<th> Alter </th>";
        myTable += "<th> IstFrau </th>";
        myTable += "</tr>";

        for (var i = 0; i <= runningNumber; i++)
        {
            for (var j = 0; j <= 5; j++)
            {
                myTable += "<tr>";
                myTable += "<td>"
                employee[i][j]
                "</td>";
            }
            myTable += "</tr>";
        }
        myTable += "</table>";

        document.getElementById("showContent").innerHTML = myTable;
    }
}

function createObject(fname, lname, a, g)
{
    this.g = g[g.selectedIndex].text; // Selected gender (Mann or Frau) is given as a parameter  to Mitarbeiter();
    var obj = new Mitarbeiter(fname, lname, a, this.g);
    obj.saveToArray
}

<input type="text" name="forename" id="forename" value="test">
<input type="text" name="lastname" id="lastname" value="test">
<input type="text" name="age" id="age" value="1"> 
<select id="gender" name="gender" size="2">
<option selected> Mann </option>
<option> Frau </option>
</select>           
<input type="button" value="Start" onclick="createObject(this.form.forename.value, this.form.lastname.value, this.form.age.value, this.form.gender)">
<input type="button" value="Show Obj" onclick="obj.showArray">

<div id="showContent">
</div>

1 个答案:

答案 0 :(得分:1)

所以我发现了几个问题。 (请参阅此fiddle了解工作代码...通常你应该将功能分开,但是它做了一些奇怪的事情所以我把所有内容都扔进了HTML插槽中,因为时间不够。代码显示了员工(s )在您创建了员工并选择显示之后)

您的输入值需要<form>个标记。

您的saveToArray()方法使用的是javascript对象语法employee[Id]["STRING"] = value,我认为只需用索引替换字符串即可。

否则你必须将它更改为一个对象数组,以便employee[Id] = new Array()employee[Id] = {},在showArray()中你必须进行for(var key in employee[i])迭代一个javascript对象的键。

此外,Id永远不会在任何地方定义。你永远不会将参数传递给this.saveToArray

function saveToArray(runningNr, fname, lname, age, gender)
{
    var Id = runningNr; //This works for Id, not sure if it is what you wanted though.
    employee[Id] = new Array();
    employee[Id][0] = runningNr
    employee[Id][1] = fname;
    employee[Id][2] = lname;
    employee[Id][3] = age;
    employee[Id][4] = gender;
    this.runningNr++; // Increment as this is the ID as well as the row of 2D-Array
}

此外,范围也存在一些问题。我移动showArray()所以它是全局的并改变了一些语法。

function showArray() // Creating a table to show all informations about employees
{
    var myTable = "<table>";
    myTable += "<tr>";
    myTable += "<th> ID </th>";
    myTable += "<th> Vorname </th>";
    myTable += "<th> Nachname </th>";
    myTable += "<th> Alter </th>";
    myTable += "<th> IstFrau </th>";
    myTable += "</tr>";

    for (var i = 0; i < runningNr; i++)
    {
        myTable += "<tr>";
        for (var j = 0; j <= employee[i].length; j++)
        {

            myTable += "<td>"+employee[i][j]+"</td>";
        }
        myTable += "</tr>";
    }
    myTable += "</table>";

    document.getElementById("showContent").innerHTML = myTable;
}