make multidimensional array jquery

Question

<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

Answer 1

你需要自己创建的爱好数组，text()将返回文本内容的连接字符串。

您可以使用.map()从给定的一组元素中创建一个对象数组。此外，从给定的标记中，我假设可以有多个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>