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