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

时间:2016-02-29 11:58:12

标签: javascript jquery html input each

我有一个表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)时,它只显示每个表格中最后一个输入字段的值 - 行。请帮助这是一项简单的任务,但我已经陷入困境。

2 个答案:

答案 0 :(得分: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

对象输出:

enter image description here

答案 1 :(得分:0)

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