将输入框值放入Javascript / HTML数组中

Question

I'm learning Javascript for a project. 我正在为一个项目学习Javascript。 I'm trying to try and get values from an dynamic number of text inputs into a multi-dimensional array. 我正在尝试从动态数量的文本输入中获取值到多维数组中。 I have tried this with 1 text field and it correctly saves into the array for further manipulation later. 我已经用1个文本字段尝试了此操作，并将其正确保存到数组中以备后用。 However when i added an second text field and another dimension to the array, it broke. 但是，当我向数组添加第二个文本字段和另一个维度时，它坏了。 Eventually i will have a drop down list to give the number of inputs once i figure it out. 最终，一旦我弄清楚了，我将有一个下拉列表提供输入的数量。 Here's my current code, not very efficient really. 这是我当前的代码，实际上效率不是很高。

    <html>
<head>
    <title> JavaScript Array from Input</title>
    <script>

        var array = new Array();

        function insert(val){
            array[0][array.length]=val;
        }

         function insert2(val){
            array[array.length][0]=val;
        }

        function show() {
            var string="<b>All Element of the Array :</b><br>";
            for(i = 0; i < array.length; i++) {
                string =string+array[i][0]+"<br>";
                string =string+array[0][i]+"<br>";
            }
            if(array.length > 0)
                document.getElementById('myDiv').innerHTML = string;
        }
    </script>

</head>

<body>
    <h2>JavaScript Array from Input</h2>
    <form name="form1">
        <table width="407">
            <tr>
                <td width="154" align="right"><b>Name</b>
                <td width="9"><b>&nbsp;:</b>
                <td width="224">
                <input type="integer" name="name"/>
            </tr>
            <tr>
                <td width="154" align="right">
                <td width="9">
                <td width="224">
            </tr>
            <tr>
                <td width="154" align="right">
                <td width="9">
                <td width="224">


                <td width="154" align="right"><b>Name2</b>
                <td width="9"><b>&nbsp;:</b>
                <td width="224">
                <input type="integer" name="name2"/>
            </tr>
            <tr>
                <td width="154" align="right">
                <td width="9">
                <td width="224">
            </tr>
            <tr>
                <td width="154" align="right">
                <td width="9">
                <td width="224">
                <input type="button" Value="Add Into Array" 
                       onclick="insert(this.form.name.value), insert2(this.form.name2.value);"/>

                                        <input type="button" Value="alert" 
                       onclick="alert(array[0][0])"/>
            </tr>
        </table>

    </form>
    <div id="myDiv"></div>
</body>

Answer 1

In case you didn't figured it out yet here is the code: 如果您还没有弄清楚，这里是代码：

<html>

<script>
    var arrayX =5;
    var arrayY =2;
    var array=new Array(arrayX);
    var arrayIndex=0;


    for (x=0; x<array.length; x++)
    {
        array [x] = new Array(arrayY);            
    }

    function insert(val1, val2){
    if (arrayIndex >= arrayX)
    {
    alert("End of array!");
    return false;
    }

        array[arrayIndex][0]=val1;
        array[arrayIndex][1]=val2;
        arrayIndex++;
        document.getElementById('name1').value = '';
        document.getElementById('name2').value = '';
    }

    function show() {
        var string='<b>All Element of the Array :</b><br>';
        for(i = 0; i < array.length; i++)
        {
        string+='array['+i+']:'+array[i][0]+'-'+array[i][1]+'<br>';
        }
        if(array.length > 0)
        document.getElementById('myDiv').innerHTML = string;
    }
</script>

</head>
<body>
    <h2>JavaScript Array from Input</h2>
    <form name="form1">
        <table width="407">
            <tr>
                <td width="154" align="right"><b>Name1</b></td>
                <td width="9"><b>&nbsp;:</b></td>
                <td width="224">
                <input type="integer" name="name" id="name1"/></td>
            </tr>
            <tr>
                <td width="154" align="right"><b>Name2</b></td>
                <td width="9"><b>&nbsp;:</b></td>
                <td width="224">
                <input type="integer" name="name2" id="name2"/></td>
            </tr>


        </table>
        <table width="407">
        <tr>
        <td><input type="button" value="Add Into Array"
                       onclick="insert(this.form.name.value,this.form.name2.value);"/>
</td>
<td>
                <input type="button" value="alert"
                       onclick="show();"/>
</td>
</table>
</form>
<div id="myDiv"></div>

</body>
</html>

Answer 2

Btw, you have to insert ";" 顺便说一句，您必须插入“;” between function calls, not "," 函数调用之间，而不是“，”之间

onclick="insert(this.form.name.value); insert2(this.form.name2.value);

Answer 3

You need to close all the td elements. 您需要关闭所有td元素。
As arunes mentioned, modify the onclick call with ';' 如arunes所述，用';'修改onclick调用 seperator. 分隔符。
As mentioned in my comment, close html tag 如我的评论所述，关闭html标记
Not sure why you are using 2-d array, what you want can be done with 1-d array. 不确定为什么要使用2-d数组，可以使用1-d数组完成所需的操作。

Here's the modified code, just go through- 这是修改后的代码，只需通过-

http://jsfiddle.net/h3r9j/ http://jsfiddle.net/h3r9j/

Its better to make a single function to insert into array rather than 2 seperate functions. 最好是将单个函数插入数组，而不要使用2个单独的函数。

将输入框值放入Javascript / HTML数组中

问题描述

3 个解决方案

解决方案1
1 已采纳 2012-02-24 13:55:41

解决方案2
0 2012-02-24 12:52:00

解决方案3
0 2012-02-24 13:14:00

将输入框值放入Javascript / HTML数组中

问题描述

3 个解决方案

解决方案1 1 已采纳 2012-02-24 13:55:41

解决方案2 0 2012-02-24 12:52:00

解决方案3 0 2012-02-24 13:14:00

解决方案1
1 已采纳 2012-02-24 13:55:41

解决方案2
0 2012-02-24 12:52:00

解决方案3
0 2012-02-24 13:14:00