javascript - 检索一个表行中所有输入字段的值

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")，但是当我控制台时.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

对象的输出: