如何将 HTML table 转换成 jQuery key-value 对数组？

Question

我有一些 HTML table（没有 tbody 标签），我想将 HTML 数据转换成 key-value pair(header-data) jQuery数组。

当你运行代码片段时，我得到的输出只是最后一行。

************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"
]

我也检查了以下参考资料，但找不到逻辑。

get values from table as key value pairs with jquery

在此先感谢您的帮助。
这是我到目前为止所尝试的方法，请运行代码片段在控制台中获得答案。

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

Answer 1

看起来您要的是一个二维结果数组，尽管您目前仅将结果存储在 single-dimensional 数组中。也许你应该尝试这样的事情：

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

然而，我怀疑你真正想要的是一个 objects 的数组，只是代码略有不同：

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

当然，这是基于以下假设：没有单元格跨越多行或多列，每行的列数相同，并且 header 值转换为合理的属性名称（尽管从技术上讲，如果不这样做，代码仍然有效）。

如何将 HTML table 转换成 jQuery key-value 对数组？

How to convert HTML table into jQuery key-value pair array?

html

arrays

jquery

html-table

key-value