如何将表列转换为数组？

Question

我想表column分离成这样数组格式：

{[A，B，C]，[A，B，C]，[A，B，C]，[A，B，C] }

现在我只知道如何转移表行成字符串：

A，A，A，A，B，B，B，B，C，C，C，C

如何将表column设置为数组？

我这里如下代码：

$(function(){ 
 
    
 
    var letters = $("#selectable td").map(function() { 
 
\t \t \t  return $(this).text(); 
 
\t \t }).get(); 
 
    console.log(letters); 
 
});

#selectable tr .ui-selected{ 
 
    background: #F39814; 
 
    color: white; 
 
} 
 
#selectable{ 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 450px; 
 
} 
 
#selectable td{ 
 
    margin: 3px; 
 
    padding: 1px; 
 
    float: left; 
 
    width: 100px; 
 
    height: 80px; 
 
    font-size: 4em; 
 
    text-align: center; 
 
} 
 
#selectable th{ 
 
    margin: 3px; 
 
    padding: 1px; 
 
    float: left; 
 
    width: 100px; 
 
    height: 20px; 
 
    font-size: 1em; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<table id="selectable"> 
 
<th>1</th> 
 
<th>2</th> 
 
<th>3</th> 
 
<th>4</th> 
 
<tr> 
 
    <td class="ui-state-default">A</td> 
 
    <td class="ui-state-default">A</td> 
 
    <td class="ui-state-default">A</td> 
 
    <td class="ui-state-default">A</td> 
 
</tr> 
 
<tr> 
 
    <td class="ui-state-default">B</td> 
 
    <td class="ui-state-default">B</td> 
 
    <td class="ui-state-default">B</td> 
 
    <td class="ui-state-default">B</td> 
 
</tr> 
 
<tr> 
 
    <td class="ui-state-default">C</td> 
 
    <td class="ui-state-default">C</td> 
 
    <td class="ui-state-default">C</td> 
 
    <td class="ui-state-default">C</td> 
 
</tr> 
 
</table>

Answer 1

$(function(){ 
 
    var letters = [] 
 
    $('#selectable tr').map(function(index_tr, item_tr){ 
 
     $(item_tr).find('td').map(function(index_td, item_td){ 
 
      letters[index_td] = letters[index_td] || [] 
 
      letters[index_td].push($(item_td).text()) 
 
    \t }) 
 
    }) 
 
    alert(JSON.stringify(letters)) 
 
});

#selectable tr .ui-selected{ 
 
    background: #F39814; 
 
    color: white; 
 
} 
 
#selectable{ 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 450px; 
 
} 
 
#selectable td{ 
 
    margin: 3px; 
 
    padding: 1px; 
 
    float: left; 
 
    width: 100px; 
 
    height: 80px; 
 
    font-size: 4em; 
 
    text-align: center; 
 
} 
 
#selectable th{ 
 
    margin: 3px; 
 
    padding: 1px; 
 
    float: left; 
 
    width: 100px; 
 
    height: 20px; 
 
    font-size: 1em; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="selectable"> 
 
<th>1</th> 
 
<th>2</th> 
 
<th>3</th> 
 
<th>4</th> 
 
<tr> 
 
    <td class="ui-state-default">A</td> 
 
    <td class="ui-state-default">A</td> 
 
    <td class="ui-state-default">A</td> 
 
    <td class="ui-state-default">A</td> 
 
</tr> 
 
<tr> 
 
    <td class="ui-state-default">B</td> 
 
    <td class="ui-state-default">B</td> 
 
    <td class="ui-state-default">B</td> 
 
    <td class="ui-state-default">B</td> 
 
</tr> 
 
<tr> 
 
    <td class="ui-state-default">C</td> 
 
    <td class="ui-state-default">C</td> 
 
    <td class="ui-state-default">C</td> 
 
    <td class="ui-state-default">C</td> 
 
</tr> 
 
</table>

Answer 2

试试这个：

$(function(){ 
 
    
 
    var letters = []; 
 
    $("#selectable tr.content").each(function() { 
 
\t letters.push($(this).find('td').map(function() { 
 
     return $(this).text();}).get()); 
 
\t }); 
 
    console.log(JSON.stringify(letters)); 
 
});

#selectable tr .ui-selected{ 
 
    background: #F39814; 
 
    color: white; 
 
} 
 
#selectable{ 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 450px; 
 
} 
 
#selectable td{ 
 
    margin: 3px; 
 
    padding: 1px; 
 
    float: left; 
 
    width: 100px; 
 
    height: 80px; 
 
    font-size: 4em; 
 
    text-align: center; 
 
} 
 
#selectable th{ 
 
    margin: 3px; 
 
    padding: 1px; 
 
    float: left; 
 
    width: 100px; 
 
    height: 20px; 
 
    font-size: 1em; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<table id="selectable"> 
 
<tr> 
 
    <th>1</th> 
 
    <th>2</th> 
 
    <th>3</th> 
 
    <th>4</th> 
 
</tr> 
 
<tr class="content"> 
 
    <td class="ui-state-default">A</td> 
 
    <td class="ui-state-default">A</td> 
 
    <td class="ui-state-default">A</td> 
 
    <td class="ui-state-default">A</td> 
 
</tr> 
 
<tr class="content"> 
 
    <td class="ui-state-default">B</td> 
 
    <td class="ui-state-default">B</td> 
 
    <td class="ui-state-default">B</td> 
 
    <td class="ui-state-default">B</td> 
 
</tr> 
 
<tr class="content"> 
 
    <td class="ui-state-default">C</td> 
 
    <td class="ui-state-default">C</td> 
 
    <td class="ui-state-default">C</td> 
 
    <td class="ui-state-default">C</td> 
 
</tr> 
 
</table>