如何将表列转换为数组？

Posted 2023-05-09

【中文标题】如何将表列转换为数组？

【英文标题】：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>

【参考方案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"]]，但感谢您的回答！！！ :)