检索一个 table 行中所有输入字段的值

Question

我有一个 table，其中 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);
    });
});

如您所见，我尝试 select 一个 tr 中的所有输入字段，如下所示：$("#firstUser input")，但是当我 console.log(oneUser) 它仅显示最后一个值每个 table 行中的输入字段。请帮助这是一个简单的任务，但我被卡住了。

Answer 1

您可以像下面这样使用 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);
});

Answer 2

检查以下解决方案。

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);
});

演示 Link：JSFIDDLE

对象的输出：

检索一个 table 行中所有输入字段的值

Retrieving values of all input fields within one table-row

html

javascript

each

jquery

input