javascript - 使用 jQuery 选择表列中的每个输入字段

Question

我想选择每列中输入字段的值。

<table id="tablo">
     <tr>
         <td><input class="Name" type="text" /></td>
         <td><input class="Age" type="text" /></td>
         <td><input class="No" type="text" /></td>
     </tr>
     <tr>
         <td><input class="Name" type="text" /></td>
         <td><input class="Age" type="text" /></td>
         <td><input class="No" type="text" /></td>
     </tr>
     <tr>
         <td><input class="Name" type="text" /></td>
         <td><input class="Age" type="text" /></td>
         <td><input class="No" type="text" /></td>
     </tr>
     ...
</table>

然后选择每个输入值，我将使用这些值创建一个对象，并通过循环选定的输入将该对象推送到数组中:

var arr= []
var obj = {
    Name: jquery selector will come here,
    Age: jquery selector will come here,
    No: jquery selector will come here
}
arr.push(obj);

我尝试过使用 jQuery 的 $.each() 函数，但我只到达了列。

Answer 1

Id 必须是唯一的，因此请尝试使用类似的类，

var objs=[];
$('#tablo tr').each(function(){
  var inputs = $(this).find('input'),o={};
  inputs.each(function(){
     o[$(this).attr('class')]=this.value;
  });
  objs.push(o);
});

片段，

var objs = [];
$('#tablo tr').each(function() {
  var inputs = $(this).find('input'), o = {};
  inputs.each(function() {
    o[$(this).attr('class')] = this.value;
  });
  objs.push(o);
});
console.log(objs);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="tablo">
  <tr>
    <td><input class="Name" type="text" value="test1"/></td>
    <td><input class="Age" type="text" value="123"/></td>
    <td><input class="No" type="text" value="no1" /></td>
  </tr>
  <tr>
    <td><input class="Name" type="text" /></td>
    <td><input class="Age" type="text" /></td>
    <td><input class="No" type="text" /></td>
  </tr>
  <tr>
    <td><input class="Name" type="text" /></td>
    <td><input class="Age" type="text" /></td>
    <td><input class="No" type="text" /></td>
  </tr>
</table>