javascript - 访问类 ="input-append"的元素

Question

我正在使用class="input-append"在<tr>所以每一行包含不同的输入，我有一个按钮来 append 新的输入行，

<tr class="input-append">
  <td>
    <span>Person {{$index+1}}</span>
  </td>
  <td align="center">
    Time From: <input type="text" ng-model="person.name"> Age: <input type="text" ng-model="person.age">    
  </td> 
</tr>

例如:ID，姓名，年龄，当我单击按钮时，将添加一个新行。我如何访问 javascript 中的输入？例如我想访问第二行中的年龄。

问候。

Answer 1

使用 document.getElementsByClassName() 和 QuerySelector

trs = document.getElementsByClassName("input-append");

personName = trs[1].querySelector("input[ng-model='person.name']").value;
personAge = trs[1].querySelector("input[ng-model='person.age']").value;

和你的html

<table>  
<tr class="input-append" >
<td>
<span>Person {{$index+1}}</span></td>
<td align="center">Time From: <input type="text"  ng-model="person.name">  Age: <input type="text"  ng-model="person.age">  
</td>   
</td>
</tr>
<tr class="input-append" >
<td>
<span>Person {{$index+1}}</span></td>
<td align="center">Time From: <input type="text"  ng-model="person.name" value="testName">  Age: <input type="text"  ng-model="person.age" value="testAge">  
</td>   
</td>
</tr>
</table>  

查看演示:http://jsbin.com/xemehoxono/edit?html,js,output