首页 文章

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

提问于
浏览 次
0

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

<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（）函数，但我只是到达了列 .

javascript jquery html

4 回答

  • 0

    首先用相同名称的类替换输入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});
})
    回复于
  • 1

    您应该先解决ids的问题（ids在文档中应该是唯一的），然后使用jquery就像这样简单：

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

    你甚至不需要jquery

    const inputs = document.querySelectorAll('#tablo input');
    回复于
  • 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);
});

    Snippet,

    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>
    回复于
  • 0

    试试这个：你可以先迭代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>
    回复于

相关问题