制作多维数组jquery

时间:2015-08-28 02:43:41

标签: jquery arrays multidimensional-array

<tr class="" style="display: table-row;">
    <td id="" name="">id</td>
    <td id="" name="">name</td>
    <td id="">hobbies</td>
    <td id="">age</td>
    <td id="">gender</td>
</tr>
<tr class="" style="display: table-row;">
    <td id="" name="">015-08-0003-000-04</td>
    <td id="" name="">john</td>
    <td id=""><span id="sports" class="" title="">basketball</span>,<span id="music" class="" title="">guitar</span></td>
    <td id="">21</td>
    <td id="">male</td>
    <td><a href="#" class="af_arpta_propertybuilding_addlandref">Add</a></td>
</tr>

这是我获取个人信息的表格(动态表格)。 我想用这些数据创建一个数组。 我像这样创建了一个单独的数组

var $rows2 = $('#tableid').find("tr:not(:eq(0))");
$rows2.each(function () {
    var $tds = $(this).find('td');
    var id = $tds.eq(0).text();
    var name = $tds.eq(1).text();
    var hoobies = $tds.eq(2).text();
    var age = $tds.eq(3).text();
    var gender = $tds.eq(4).text();

    perinfo.push({
        id: id,
        name: name,
        age: age,
        gender: gender

    });

我的问题是如何获得业余爱好我想在性别命名爱好后创建另一个条目,但这次它将是多维的,涵盖体育和音乐类别。任何建议从这个阵列中创建该阵列。

我希望它看起来像

[{
    "id": "015-08-0003-000-04",
    "name": "john",
    "age": "21",
    "gender": "male"
    "hobbies": [{
        "sport": "basketball",
        "music": "guitar"
    }]
}]

Fiddle

1 个答案:

答案 0 :(得分:2)

您需要自己创建一系列爱好,text()将返回连接的文本内容字符串。

您可以使用Club GreenSock从给定的元素集创建一个对象数组。

此外,根据给定的标记,我假设可能有多个tr元素,在这种情况下,您不应将id用于业余爱好span元素,作为ID元素必须是唯一的。

var perinfo = $('#tableid tr').slice(1).map(function () {
    var $tds = $(this).find('td');
    var id = $tds.eq(0).text();
    var name = $tds.eq(1).text();
    var hoobies = $tds.eq(2).find('span').map(function () {
        var obj = {};
        obj[$(this).data('id')] = $(this).text();
        return obj;
    }).get();
    var age = $tds.eq(3).text();
    var gender = $tds.eq(4).text();

    return {
        id: id,
        name: name,
        age: age,
        gender: gender,
        hoobies: hoobies
    };
}).get();
snippet.log(JSON.stringify(perinfo));
console.log(perinfo)
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id='tableid'>
    <tr class="" style="display: table-row;">
        <td id="" name="">id</td>
        <td id="" name="">name</td>
        <td id="">hobbies</td>
        <td id="">age</td>
        <td id="">gender</td>
    </tr>
    <tr class="" style="display: table-row;">
        <td id="" name="">015-08-0003-000-04</td>
        <td id="" name="">john</td>
        <td id="">
            <span data-id="sports" class="" title="">basketball</span>,
            <span data-id="music" class="" title="">guitar</span>
        </td>
        <td id="">21</td>
        <td id="">male</td>
    </tr>
</table>