在 JQuery 中将 HTML 行转换为名称值对

Question

我正在尝试使用 Jquery 将 HTML 表转换为 JSON 格式的名称-值对。

 <table class="table">
        <thead class="thead-light">
           <tr>
                  <th>MobileNumber</th>
                   <th>Amount</th>
                   <th>Fuel</th>
            </tr>
          </thead>
          <tbody>
              <tr>
                  <td>1223445</td>
                  <td>12.49</td>
                  <td>1223</td>
              </tr>
              <tr>
                  <td>99999</td>
                  <td>11.39</td>
                  <td>1277745</td> 
              </tr>
          </tbody>
      </table>

上表应转换为 JSON 格式的名称值对，如下所示

[{
       "Customer":{ 
          "MobileNumber":"1223445"
        },
        "TemplateFieds": [{
           "Name": "Amount",
           "value": "12.49"
         },
         {
            "Name":"Fuel",
             "value": "1223"
         }]
  },
  {
       "Customer":{ 
          "MobileNumber":"99999"
        },
        "TemplateFieds": [{
           "Name": "Amount",
           "value": "11.39"
         },
         {
            "Name":"Fuel",
             "value": "1277745"
         }]
  }]

我正在尝试从 (get values from table as key value pairs with jquery) 修改此功能，但我无法正确操作。

  var result = $('myTable tbody').children().map(function () {
               var children = $(this).children();
                return {
                    name: children.eq(0).text(),
                    value: children.eq(1).text()
                };
               }).get();

有人知道将 HTML 表格转换为上述 JSON 格式吗？

-艾伦-

Answer 1

您也可以简单地从<th> 元素中选择列名，并通过列索引匹配它们。我还修正了您的“TemplateFieds”错字，应该是“TemplateFields”。 （缺少“l”）

var colNames = $('.table thead th').get().map(el => el.textContent);
var result = $('.table tbody').children().map(function() {
  var children = $(this).children().get();
  var resultObj = {Customer: {}, TemplateFields: []};
  children.forEach((cell, index) => {
    if (index === 0) {
      resultObj['Customer'][colNames[index]] = cell.innerText;
    } else {
      resultObj['TemplateFields'].push({
        name: colNames[index],
        value: cell.innerText
      });
    }
  });
  return resultObj;
}).get();
console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <thead class="thead-light">
    <tr>
      <th>MobileNumber</th>
      <th>Amount</th>
      <th>Fuel</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1223445</td>
      <td>12.49</td>
      <td>1223</td>
    </tr>
    <tr>
      <td>99999</td>
      <td>11.39</td>
      <td>1277745</td>
    </tr>
  </tbody>
</table>

Answer 2

首先，遍历thead 以获取Name 属性：

var cols = $("table>thead>tr>th").map(function() {
  return $(this).text()
});

然后循环遍历每一行 $('table>tbody>tr') 创建一个条目以添加到您的结果数组中，并在每一行中遍历除第一个单元格之外的每个单元格以生成名称/值对。

var cols = $("table>thead>tr>th").map(function() {
  return $(this).text()
});

var result = [];

$('table>tbody>tr').each(function() {
  var cells = $(this).find("td");
  var row = {
    Customer: { MobileNumber: cells.first().text() },
    TemplateFieds: []
  };
  cells.each(function(i, e) {
    if (i == 0) return; // skip first col
    row.TemplateFieds.push({
      "Name": cols[i],
      "value": $(this).text()
    })
  });
  result.push(row);
});

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <thead class="thead-light">
    <tr>
      <th>MobileNumber</th>
      <th>Amount</th>
      <th>Fuel</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1223445</td>
      <td>12.49</td>
      <td>1223</td>
    </tr>
    <tr>
      <td>99999</td>
      <td>11.39</td>
      <td>1277745</td>
    </tr>
  </tbody>
</table>

---

几个笔记：

• 可能需要名称/值或名称/值而不是名称/值
• 可能需要 TemplateFields

Answer 3

你在这里：

let tab = document.getElementById("tab");
let names = tab.querySelectorAll("th");
let values = tab.querySelector("tbody").children;

let arr = [];

for(let i =0; i < values.length;i++){
  let obj = {};
  for(let j = 0;j < names.length;j++){
    obj[names[j].innerHTML] = values[i].children[j].innerHTML;
  }
  arr.push(obj);
}

console.log(JSON.stringify(arr));

但这不是很好的解决方案