檢索一個表內行所有輸入字段的值

Question

我有一個表，其中td是輸入字段，我需要檢索一個tr（表示一個導入用戶）內的所有插入值。所以HTML：

<table class="table table-bordered table-hover "> 
    <tbody> 
    <tr> 
     <td>Facebook ID</td> 
     <?php foreach($newArray as $column){?> 
     <?php echo '<td>'.$column.'</td>';}?> 
    </tr> 
    <tr id="firstUser"> 
     <td><input type="text" name="facebook-id1" class="form-control klasa" placeholder=""></td> 
     <?php foreach($newArray as $column){?> 
     <?php echo '<td><input type="text" id="'.$column.'1" onfocus="findName(this)" name="'.$column.'1" class="form-control klasa"></td>';}?> 
    </tr> 

    <tr id="secondUser"> 
     <td><input type="text" name="facebook-id2" class="form-control klasa" placeholder=""></td> 
     <?php foreach($newArray as $column){?> 
     <?php echo '<td><input type="text" id="'.$column.'2" onfocus="findName(this)" name="'.$column.'2" class="form-control klasa"></td>';}?> 
    </tr> 
    <tr id="thirdUser"> 
     <td><input type="text" name="facebook-id3" class="form-control klasa" placeholder=""></td> 
     <?php foreach($newArray as $column){?> 
     <?php echo '<td><input type="text" id="'.$column.'3" onfocus="findName(this)" name="'.$column.'3" class="form-control klasa"></td>';}?> 

    </tr> 
    <tr id="fourthUser"> 
     <td><input type="text" name="facebook-id3" class="form-control klasa" placeholder=""></td> 
     <?php foreach($newArray as $column){?> 
     <?php echo '<td><input type="text" id="'.$column.'4" onfocus="findName(this)" name="'.$column.'4" class="form-control klasa"></td>';}?> 
    </tr> 

    </tbody> 
    </table> 

我想是這樣的：

$(document).ready(function(){ 
    $('#plavoDugme').click(function() { 
     var oneUser = {}; 
     $("#firstUser input").each(function() { 
      var $this = $(this); 
      oneUser.first = $this.val(); 
     }) 

     $("#secondUser input").each(function() { 
      var $this = $(this); 
      oneUser.second = $this.val(); 
     }) 

     $("#thirdUser input").each(function() { 
      var $this = $(this); 
      oneUser.third = $this.val(); 
     }) 

     $("#fourthUser input").each(function() { 
      var $this = $(this); 
      oneUser.fourth = $this.val(); 
     }) 
     console.log(oneUser); 
    }); 
}); 

正如你可以看到我試着一個tr像這樣中選擇所有輸入字段：$("#firstUser input")，但是當我console.log(oneUser)只顯示的值每個表格行中的最後一個輸入字段。請幫助這是簡單的任務，但我卡住了。

Answer 1

檢查下面的解決方案。

var userList = {}; 
$('#plavoDugme').click(function(){ 
    $('.dynamicList').find('tr').not(':first').each(function(){//loop all rows 
     var $this = $(this); 
     var userType = $this[0].id.replace('User', '');//get id without User text 
     userList[userType] = [];//assign array to it 
     $this.find('input').each(function(){//loop all input in single row 
      userList[userType].push(this.value);//push input value in it 
     }); 
    }); 
    console.log(userList); 
}); 

演示鏈接：JSFIDDLE

對象的輸出：

Answer 2

您可以使用map()函數如下。

$('#plavoDugme').click(function() { 
    var oneUser = {}; 
    oneUser.first = $("#firstUser input").map(function() { 
     return this.value; 
    }); 

    oneUser.second = $("#secondUser input").map(function() { 
     return this.value; 
    }); 
    oneUser.third = $("#thirdUser input").map(function() { 
     return this.value; 
    }); 
    oneUser.third = $("#fourthUser input").each(function() { 
     return this.value; 
    }); 

    console.log(oneUser); 
});