如何将表列转换为数组？答案

【问题标题】：How to transfer table column into array?如何将表列转换为数组？
【发布时间】：2017-11-26 17:01:01
【问题描述】：

我想将表格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() {
			    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>

【问题讨论】：

标签： jquery arrays html-table

【解决方案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>

【讨论】：

感谢您的回答！！是否可以转移 [["A","B","C"],["A","B","C"],["A","B","C"],[" A","B","C"]] 变成 {[A,B,C],[A,B,C],[A,B,C],[A,B,C]} ??跨度>
@S.P. {[A,B,C],[A,B,C],[A,B,C],[A,B,C]} 不是 JSON 格式，如果需要可以用字符串方法加入跨度>
好的，我明白了！再次感谢！！ :)

【解决方案2】：

试试这个：

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

【讨论】：

我想让它看起来像列数据而不是像这样的行数据：{[A,B,C],[A,B,C],[A,B,C], [A,B,C]} 不是行 [["A","A","A","A"],["B","B","B","B"],[" C","C","C","C"]]，但感谢您的回答！！！ :)