ユーザーが入力した列の値を取得します

Question

<form id="form1" runat="server"> 

    <table border="1" id="ResultSheet"> 
     <tr id ="Name"> 
      <td> Student Name</td> 
      <td><input type="text" /></td> 
     </tr> 
     <tr> 
      <td>Subject Name</td> 
     </tr> 
     <tr> 
      <td>Maths</td> 
      <td><input type="text" /></td> 
     </tr> 
     <tr> 
      <td>Science</td> 
      <td><input type ="text" /></td> 
     </tr> 
     <tr> 
      <td>English</td> 
      <td><input type ="text" /></td> 
     </tr> 
    </table> 
</form> 

私はこのテーブルを持っていますが、今度はそれぞれの入力タイプの値を取得したいと思います。どうすれば入手できますか？

私が試してみた：

document.getElementById("ResultSheet").rows[2].cells.item(0).innerHTML); 

をしかし、それは何も返しませんでした。次に示すスニペットのような結果を通じて

document.querySelectorAll('#ResultSheet input'); 

ループ：

Answer 1

あなたのようなquerySelectorAll()を使用することができます。

これが役に立ちます。

var inputs = document.querySelectorAll('#ResultSheet input'); 
 

 
for(var i=0;i<inputs.length;i++){ 
 
    console.log(inputs[i].value); 
 
}

<form id="form1" runat="server"> 
 
    <table border="1" id="ResultSheet"> 
 
     <tr id ="Name"> 
 
      <td> Student Name</td> 
 
      <td><input type="text" value="1"/></td> 
 
     </tr> 
 
     <tr> 
 
      <td>Subject Name</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Maths</td> 
 
      <td><input type="text" value="2"/></td> 
 
     </tr> 
 
     <tr> 
 
      <td>Science</td> 
 
      <td><input type ="text" value="3"/></td> 
 
     </tr> 
 
     <tr> 
 
      <td>English</td> 
 
      <td><input type ="text" value="4"/></td> 
 
     </tr> 
 
    </table> 
 
</form>

Answer 2

<form>プロパティelements用途：https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements

例：https://jsfiddle.net/8co9v0ye/