2017-02-07 11 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(「入力[タイプ=テキスト]」)を使用してみてください。あなたはそれらを繰り返す必要があります。

/* 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> 
関連する問題