如何将表列转换为数组？

I want to separate table column into array format like this:

我想将表列分成像这样的数组格式:

{[A,B,C],[A,B,C],[A,B,C],[A,B,C]}

Now I only know how to transfer table row into string:

现在我只知道如何将表行转换为字符串:

A,A,A,A,B,B,B,B,C,C,C,C

How to set table column into array?

如何将表列设置为数组?

My code below here:

我的代码如下:

$(function(){
    
    var letters = $("#selectable td").map(function() {
			    return $(this).text();
		}).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>

2 个解决方案

#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())
    	})
    })
    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>

#2

Try this:

$(function(){
    
    var letters = [];
    $("#selectable tr.content").each(function() {
	 letters.push($(this).find('td').map(function() {
       return $(this).text();}).get());
	});
    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>