使用Javascript / HTML将输入框值转换为数组

时间:2012-02-24 12:37:00

标签: javascript html

我正在为一个项目学习Javascript。我正试图从动态数量的文本输入中获取值到多维数组中。我已尝试使用1个文本字段,并将其正确保存到数组中以便稍后进行进一步操作。但是,当我向数组添加第二个文本字段和另一个维度时,它就破了。最终我会有一个下拉列表,一旦我弄明白就给出输入数量。这是我目前的代码,真的不是很有效。

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

3 个答案:

答案 0 :(得分:1)

如果你还没想到它,那么这里是代码:

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

答案 1 :(得分:0)

顺便说一句,你必须插入“;”在函数调用之间,而不是“,”

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

答案 2 :(得分:0)

  1. 您需要关闭所有td元素。
  2. 如上所述arunes,请使用“;”修改onclick调用分隔符。
  3. 正如我的评论中所述,请关闭html标记
  4. 不确定为什么使用二维阵列,你可以用一维阵列完成你的工作。
  5. 这是经过修改的代码,只需通过 -

    http://jsfiddle.net/h3r9j/

    最好将单个函数插入到数组而不是2个单独的函数中。