检索一个表行中所有输入字段的值答案

【问题标题】：Retrieving values of all input fields within one table-row检索一个表行中所有输入字段的值
【发布时间】：2016-06-12 10:57:28
【问题描述】：

我有一张表，其中tds 是输入字段，我需要检索一个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) 时，它仅显示每个表行中最后一个输入字段的值。请帮助这是一个简单的任务，但我被卡住了。

【问题讨论】：

你应该使用一个数组并将值推入其中
在一个 tr 内将 name 属性与文本框相同...然后在 jquery 中您可以使用该名称访问..它将是值数组

标签： javascript jquery html input each

【解决方案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

对象的输出：

【讨论】：

这完美地满足了我的需求，使用几个类调整我的代码以匹配您的过滤器逻辑。

【解决方案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);
});

【讨论】：