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

试试这个：你可以先迭代earch行然后读取每个输入。注意：id在整个DOM中必须是唯一的，因此替换为类

$(function(){
  var array = [];
  $('#tablo tr').each(function(){
     var obj = {};
     //obj['name']=$(this).find('td input:eq(0)').val();
     //obj['age']=$(this).find('td input:eq(1)').val();
     //obj['no']=$(this).find('td input:eq(2)').val();

     //for dynamic build of object
     $(this).find('input').each(function(){
         obj[$(this).attr('class')]=$(this).val();
      });
     array.push(obj);
  });
  
  console.log(array);
});

<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="name1"/></td>
         <td><input class="Age" type="text" value="name1"/></td>
         <td><input class="No" type="text" value="name1"/></td>
     </tr>
     <tr>
         <td><input class="Name" type="text" value="name2"/></td>
         <td><input class="Age" type="text" value="age2"/></td>
         <td><input class="No" type="text" value="no2"/></td>
     </tr>
     <tr>
         <td><input class="Name" type="text" value="name3"/></td>
         <td><input class="Age" type="text" value="age3"/></td>
         <td><input class="No" type="text" value="no3"/></td>
     </tr>
     ...
</table>

Answer 2

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

<强>代码段，

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

首先用相同名称的类替换输入id。然后循环遍历这样的行：

var arr = [];
$('#table tr').each(function(tr, index) {
  var name = $(tr).find('.Name').val()
  var age = $(tr).find('.Age').val()
  var no = $(tr).find('.No').val()
  arr.push({name:name, age:age, no:no});
})

Answer 4

您应该先解决ids的问题（ids在文档中应该是唯一的）然后使用jquery将如此简单：

const inputs = $('#tablo').find('input');

你甚至不需要jquery

const inputs = document.querySelectorAll('#tablo input');

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

4 个答案: