数组推送更改格式jquery

时间:2015-06-11 02:37:29

标签: javascript jquery arrays

var student = $('#student tr').find('td').find('input[type=\"text\"]');
    student.each(function(index, element) {
      var label = $(element).parent().find('span').text();
      var member = $('#student').attr('name');
      studentnames.push({
        value: $(element).val(),
        label: label,
        member: member

      });
    });

这就是我制作阵列的方法。这是输出

[{
    "value": "jackie",
    "label": "First Name",
    "member": "science club"
}, {
    "value": "chan",
    "label": "Middle Name",
    "member": "science club"
}, {
    "value": "lee",
    "label": "Last Name",
    "member": "science club"
}, {
    "value": "jr",
    "label": "Suffix",
    "member": "science club"
}, {
    "value": "Tokyo",
    "label": "City/Province",
    "member": "science club"
}, {
    "value": "Nanporo",
    "label": "Town/Municipality",
    "member": "science club"
}, {
    "value": "Sorachi",
    "label": "District",
    "member": "science club"
}, {
    "value": "1234",
    "label": "Contact Number",
    "member": "science club"
}]

如何将其更改为

格式
[{
    "First Name": "jackie",
    "Middle Name": "chan",
    "Last Name": "lee",
    "Suffix": "jr",
    "City/Province": "Tokyo",
    "Town/Municipality": "Nanporo",
    "District": "Sorachi",
    "member": "science club"
}]

我的html表是这样的

<table id="student" name="student" class="student">
    <tr>
        <td>
            <center>
                <input type="text" name="fname" class="fname" />
                <br> <span><small><i>First Name</i></small></span> </center>
        </td>
        <td>
            <center>
                <input type="text" name="mname" class="mname" />
                <br> <span><small><i>Middle Name</i></small></span> </center>
        </td>
        <td>
            <center>
                <input type="text" name="lname" class="lname" />
                <br> <span><small><i>Last Name</i></small></span> </center>
        </td>
    </tr>
    <tr>
        <td>
            <center>
                <input type="text" name="suffix" class="suffix" />
                <br> <span><small><i>Suffix</i></small></span> </center>
        </td>
    </tr>
    <tr>
        <td>
            <center>
                <input type="text" name="city" class="city" />
                <br> <span><small><i>City/Province</i></small></span> </center>
        </td>
        <td>
            <center>
                <input type="text" name="town" class="town" />
                <br> <span><small><i>Town/Municipality</i></small></span> </center>
        </td>
        <td>
            <center>
                <input type="text" name="district" class="district" />
                <br> <span><small><i>District</i></small></span> </center>
        </td>
    </tr>
    <tr>
        <td>
            <center>
                <input type="text" name="contact" class="contact" />
                <br> <span><small><i>Contact Number</i></small></span> </center>
        </td>
    </tr>
    <tr>
        <td>
            <input type="button" id="addtable" value="Add" name="" /> </td>
        <td>
            <input type="button" id="removetable" value="Remove" name="" /> </td>
    </tr>
</table>

按钮添加和删除有一个jquery函数,可以添加相同的表或删除,具体取决于用户单击

3 个答案:

答案 0 :(得分:1)

var studentnames = [];
$('#checkConsole').click(function() {
    var student = $('#student tr').find('td').find('input[type=\"text\"]');

    var temp = {};
    student.each(function(index, element) {
        var label = $(element).parent().find('span').text();
        var member = $('#student').attr('name');

        temp[label] = $(element).val();
        temp['member'] = member;
    });
    studentnames.push(temp);
    console.log(studentnames);
});

Jsfiddle

答案 1 :(得分:0)

我们可以使用[]来获取/设置对象属性。

例如:

var obj = {}, key = "property1", value = "testValue";
obj[key] = value;
obj["key with space"] = "the value";
console.log(JSON.stringify(obj)); //{"property1":"testValue","key with space":"the value"}

我修改了您的代码:http://jsfiddle.net/gtkLmgd9/

答案 2 :(得分:0)

这是一个可以尝试的简单示例:

  

HTML5不支持MobileServiceClient标记。改用CSS。

<center>

DEMO