如何将 HTML 表转换为 jQuery 键值对数组？
Posted
技术标签:
【中文标题】如何将 HTML 表转换为 jQuery 键值对数组？【英文标题】：How to convert HTML table into jQuery key-value pair array? 【发布时间】：2020-10-12 12:21:45 【问题描述】：我有一些 html 表（没有 tbody 标记），我想在其中将 HTML 数据转换为 jQuery 数组中的键值对（标题数据）。
当你运行代码 sn-p 时，我得到的输出只是最后一行。
************Actual Output************
[
"Company:Swiggy",
"Contact:Gotya",
"Country:Japan"
]
************Needed Output************
[
"Company:Creamy Cola",
"Contact:Atharva",
"Country:Switzerland"
],
[
"Company:Tuty Fruity",
"Contact:Suyog",
"Country:UK"
],
[
"Company:Milky Way",
"Contact:Santosh",
"Country:US"
],
[
"Company:Swiggy",
"Contact:Gotya",
"Country:Japan"
]
我也检查了下面的参考资料，但找不到逻辑。Convert HTML Rows into Name Value Pair in JQueryget values from table as key value pairs with jquery
提前感谢您的帮助。这是我到目前为止所尝试的，请运行 sn-p 以在控制台中获得答案。
/******JQUERY SCRIPT******/
/*Get Header*/
var xKey = [];
$("#xxx th").each(function()
var tempColName = $(this).text();
xKey.push(tempColName);
);
//console.log("Key");
//console.log(xKey);
/*Get Data*/
var xValue = [];
$("#xxx tr").each(function()
var arrayOfThisRow = [];
var tableData = $(this).find('td');
if (tableData.length > 0)
tableData.each(function()
arrayOfThisRow.push($(this).text());
);
xValue.push(arrayOfThisRow);
);
//console.log("Value");
//console.log(xValue);
//My logic below
var xFinalArr = [];
for (var i = 0; i < xKey.length; i++)
var su = "";
for (var j = 0; j < xValue.length; j++)
su = xKey[i] + ":" + xValue[j][i];
xFinalArr.push(su);
console.log("Output");
console.log(xFinalArr);/******CSS STYLE******/
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
td,
th
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
tr:nth-child(even)
background-color: #dddddd;
<!--HTML-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<table id="xxx">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Creamy Cola</td>
<td>Atharva</td>
<td>Switzerland</td>
</tr>
<tr>
<td>Tuty Fruity</td>
<td>Suyog</td>
<td>UK</td>
</tr>
<tr>
<td>Milky Way</td>
<td>Santosh</td>
<td>US</td>
</tr>
<tr>
<td>Swiggy</td>
<td>Gotya</td>
<td>Japan</td>
</tr>
</table>
</body>
</html>【问题讨论】：
【参考方案1】：看起来您要求的是一个二维结果数组，尽管您当前仅将结果存储在一维数组中。也许你应该尝试这样的事情：
var xFinalArr = [];
for (var i = 0; i < xValue.length; i++)
var xRowArr = [];
for (var j = 0; j < xKey.length; j++)
xRowArr.push(xKey[j] + ":" + xValue[i][j]);
xFinalArr.push(xRowArr);
然而，我怀疑你真正想要的是一个对象数组，只是代码略有不同：
var xFinalArr = [];
for (var i = 0; i < xValue.length; i++)
var xRowObj = ;
for (var j = 0; j < xKey.length; j++)
xRowObj[xKey[j]] = xValue[i][j];
xFinalArr.push(xRowObj);
当然，这是基于以下假设：没有单元格跨越多行或多列，每行具有相同数量的列，并且标题值转换为合理的属性名称（尽管从技术上讲，代码仍然可以工作如果他们不这样做）。
【讨论】：
完美！！！。另外，感谢您建议的对象数组，这些对象可以轻松检索数据以进行后期处理。 另外，只是更正了 var xRowObj = ;到 var xRowObj = ;你有一个额外的“”。以上是关于如何将 HTML 表转换为 jQuery 键值对数组？的主要内容，如果未能解决你的问题，请参考以下文章
在 jQuery 中将 HTML 表格数据转换为 JSON 对象