獲取用戶輸入的列的值

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

但它並沒有返回任何東西。

Answer 1

您可以使用querySelectorAll()，如：

document.querySelectorAll('#ResultSheet input'); 

環路通過如下所示的代碼片段的結果。

希望這會有所幫助。

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/