2017-02-07 63 views
-3

如何添加文本框作爲2d數組的輸入?我有文本框作爲表單。將每個學生的輸入分配給座位的最簡單方法是什麼? 編輯:我需要把document.getElementById(seat1).innerhtml放入函數中嗎?javascript - 如何將文本框添加到2d數組

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

你想在電腦自動安排座位和學生,或者你想給學生選擇席位他們自己,他們想要保留? –

+0

我希望它能像座老師一樣制定座位計劃,並且能夠爲每個學生設置座位,而且我將需要在這個東西中放置一些東西,我遺漏了 –

回答

0

嘗試使用document.querySelectorAll(「input [type = text]」)來獲取所有類型爲「text」的輸入的數組。你需要遍歷它們。

/* 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)
<form id="studentForm"> 
 
<input type="text" name="student1" id="myInput1" value="Jon Doe1"> 
 
<input type="text" name="student2" id="myInput2" value="Jon Doe2"> 
 
<input type="text" name="student3" id="myInput3" value="Jon Doe3"><br> 
 
<input type="text" name="student4" id="myInput4" value="Jon Doe4"> 
 
<input type="text" name="student5" id="myInput5" value="Jon Doe5"> 
 
<input type="text" name="student6" id="myInput6" value="Jon Doe6"><br> 
 
<input type="text" name="student7" id="myInput7" value="Jon Doe7"> 
 
<input type="text" name="student8" id="myInput8" value="Jon Doe8"> 
 
<input type="text" name="student9" id="myInput9" value="Jon Doe9"><br> 
 
</form>

+0

因此,var代碼將在函數內部要麼? –

+0

這是我到目前爲止http://pastebin.com/RVSJarc8 –

+0

我修改了腳本,將學生添加到一個座位,24行和10列 –

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>