如何将表列转换为数组？

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设置为数组？

我的代码如下：

＆＃13;

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

试试这个：

＆＃13;

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

import java.util.ArrayList;
import java.util.List;

public class TestTenElement {

public static void main(String[] args) {
    // Getting all the element list from DB -- Here Creating Sample List
    List<Long> myList = new ArrayList<Long>();

    // Dummy element list
    for (long i = 0; i < 51; i++) {
        myList.add(i);
    }

    // Calling function may be from different class
    System.out.println(getFiveElement(myList, 0)); // First Ten Element from StartIndex 0
    System.out.println(getFiveElement(myList, 10)); // Second Ten Element from StartIndex 5
    // .......
    System.out.println(getFiveElement(myList, 50)); // If Last Iteration Gives remaining elements
}

// print ten element from list from the start index specified
public static List<Long> getFiveElement(List<Long> myList, int startIndex) {
    List<Long> sub = new ArrayList<Long>();

    sub = myList.subList(startIndex, Math.min(myList.size(), startIndex + 10));
    return sub;

}
}

＆＃13;

$(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))
});

＆＃13;

#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;
}

＆＃13;

＆＃13;

＆＃13;