javascript - 如何将文本框添加到2d数组

时间:2017-02-07 01:08:28

标签: javascript arrays

如何添加文本框作为二维数组的输入?我将文本框作为表单。将每个学生输入分配到座位的最简单方法是什么? 编辑:我需要将document.getElementById(seat1).innerhtml放入函数吗?

<form id="studentForm">
<input type="text" name="student1" id="myInput1">
<input type="text" name="student2" id="myInput2">
<input type="text" name="student3" id="myInput3"><br>
<input type="text" name="student4" id="myInput4">
<input type="text" name="student5" id="myInput5">
<input type="text" name="student6" id="myInput6"><br>
<input type="text" name="student7" id="myInput7">
<input type="text" name="student8" id="myInput8">
<input type="text" name="student9" id="myInput9"><br>
</form>


<script type="text/javascript">
function myFunction() {

var seat = onearray(3)
seat[1] = onearray(3)
seat[1][1]
seat[1][2]
seat[1][3]

seat[2] = onearray(3)
seat[2][1]
seat[2][2]
seat[2][3]

seat[3] = onearray(3)
seat[3][1]
seat[3][2]
seat[3][3] 
}

</script>

<label for="Seat1">Seat 1 </label>

<p id="seat1"></p>

<label for="Seat2">Seat 2 </label>

<p id="seat2"></p>

<label for="Seat3">Seat 3 </label>

<p id="seat3"></p>

<br>
<label for="Seat4">Seat 4 </label>

<p id="seat4"></p>

<label for="Seat5">Seat 5 </label>

<p id="seat5"></p>

<label for="Seat6">Seat 6 </label>

<p id="seat6"></p>

<br>

<label for="Seat7">Seat 7 </label>

<p id="seat7"></p>

<label for="Seat8">Seat 8 </label>

<p id="seat8"></p>

<label for="Seat9">Seat 9 </label>

<p id="seat9"></p>

2 个答案:

答案 0 :(得分:0)

尝试使用document.querySelectorAll(&#34; input [type = text]&#34;)来获取类型为&#34; text&#34;的所有输入的数组。你需要遍历它们。

&#13;
&#13;
Yes
&#13;
/* Select all the inputs wich have the type as a text, this will return an array */
var students = document.querySelectorAll("input[type=text]");
/* Create an empty multidimensional array, for the seats*/
var seats=[[],[]];
/* Initailize student counter to 0*/
var studentCounter=0;
/* Iterate the seats, most of the time the seats are character + number like: B-24 (file B seat 24), but this time in order to simplify the script I lef as a number like 2-24  (file 2 seat 24) */
// 24 files x 10 seats for each file = 240 available seats 
    for (var i =0; i <= 24; i++) {
      for (var x=0; x < 10; x++) {
        //Here we capture the input box content, example name of the student
        if(students[studentCounter]){
          seats[i][x]=students[studentCounter].value;
          studentCounter++;
        }
        
      }
 
    }
  console.log(seats)
&#13;
&#13;
&#13;

答案 1 :(得分:0)

这就是我最后所做的

<html>
<head>

      <title>Two Dimensional Arrays D</title>

  <script type="text/javascript">

      function Input()
                 {
                 var seat = new Array()

                            seat[0] = new Array();
                             seat[0][0] = Form1.txtInput1.value;
                               seat[0][1] = Form1.txtInput2.value;
                                 seat[0][2] = Form1.txtInput3.value;

                           seat[1] = new Array();
                                    seat[1][0] = Form1.txtInput4.value;
                              seat[1][1] = Form1.txtInput5.value;
                                seat[1][2] = Form1.txtInput6.value;

                          seat[2] = new Array();
                                   seat[2][0] = Form1.txtInput7.value;
                             seat[2][1] = Form1.txtInput8.value;
                               seat[2][2] = Form1.txtInput9.value;

                  txtLabel1.value = seat[0][0]
                   txtLabel2.value = seat[0][1]
                    txtLabel3.value = seat[0][2]
             txtLabel4.value = seat[1][0]
              txtLabel5.value = seat[1][1]
               txtLabel6.value = seat[1][2]
                txtLabel7.value = seat[2][0]
                 txtLabel8.value = seat[2][1]
                  txtLabel9.value = seat[2][2]

                   }
</script>

</head>
<form name="Form1">

        <table name="InputTable">
          <tr>
                       <td>
                            Name: <input type="text" name="txtInput1"  id="txtInput1">
                    </td>

                        <td>
                             Name: <input type="text" name="txtInput2" id="txtInput2">
                     </td>

                 <td>
                              Name: <input type="text" name="txtInput3" id="txtInput3">
                      </td>
          </tr>

              <tr>
                   <td>
                                Name: <input type="text" name="txtInput4" id="txtInput4">  
                    </td>

                <td>
                     Name: <input type="text" name="txtInput5" id="txtInput5">
             </td>

                 <td>
                      Name: <input type="text" name="txtInput6" id="txtInput6">
              </td>
          </tr>

      <tr>
                   <td>
                        Name: <input type="text" name="txtInput7" id="txtInput7">
                </td>

                    <td>
                         Name: <input type="text" name="txtInput8" id="txtInput8">
                 </td>

             <td>
                          Name: <input type="text" name="txtInput9" id="txtInput9">
                  </td>
      </tr>
  </table>

    <input type="button" onClick="Input()" value="Submit" name="btnSubmit">

   <br />
        <br />

    <table name="OutputTable">
      <tr>
                   <td>
                        Seat 1: <input type="text" name="txtLabel1" id="txtLabel1">
                </td>

                    <td>
                         Seat 2: <input type="text" name="txtLabel2" id="txtLabel2">
                 </td>

             <td>
                          Seat 3: <input type="text" name="txtLabel3" id="txtLabel3">
                  </td>
      </tr>

          <tr>
               <td>
                            Seat 4: <input type="text" name="txtLabel4" id="txtLabel4">
                    </td>

                <td>
                     Seat 5: <input type="text" name="txtLabel5" id="txtLabel5">
             </td>

                 <td>
                      Seat 6: <input type="text" name="txtLabel6" id="txtLabel6">
              </td>
          </tr>

      <tr>
                   <td>
                        Seat 7: <input type="text" name="txtLabel7" id="txtLabel7">
                </td>

                    <td>
                         Seat 8: <input type="text" name="txtLabel8" id="txtLabel8">
                 </td>

             <td>
                          Seat 9: <input type="text" name="txtLabel9" id="txtLabel9">
                  </td>
          </tr>
      </table>

   <br />
        <br />
            </form>
            </body>
            </html>