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を同じ名前のクラスに置き換えます。 そして、このような行をループ：

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

：

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

（IDは文書で一意である必要があります）には、事前にIDを持つ問題を修正する必要があり は、jQueryを使って同じように簡単になりますjqueryは不要です。

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