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

Answer 2

试试这个：你可以迭代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 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');