Question

这里是活跃的学习者，试图弄清楚如何从HTML表中创建JSON对象。我只想要一个特定TD的值，并想给每个值一个递增的数字作为键。我想要类似下面的输出。我的桌子上有一个城市名称的TD，但它没有一个数字递增的值，因此我需要用另一种方式添加。

{
  "mycities" : [
    {
      "Seattle" : "1",
      "Chicago" : "2",
      "New York" : "3"
      "Pitt" : "4",
      "LA" : "5",
      "Fresno" : "6"
    },
  ]
}

这是我的桌子的样子：

<table>
    <thead>
        <tr>
            <th>city name</th>
            <th>other city info</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Seattle</td>
            <td>Lots of rain</td>
        </tr>
        etc,etc,etc
    </tbody>
</table>

我尝试使用替代函数，但经过大量谷歌搜索后仍未弄清。任何帮助表示赞赏！

$(document).ready(function(){   
    $("body").on("click",".submitButtonPri",function(){ 
        count= 1;
        function replacer(key, value) {
          if (typeof value === 'string') {
            return count;
          }
          return value;
        }

        var myRows = [];
        var $headers = $(".rightDash > table thead th");

        var $rows = $(".rightDash > table tbody tr").each(function(index) {
          $cells = $(this).find("td.titlePri");
          myRows[index] = {};
          $cells.each(function(cellIndex) {
            myRows[index][$($cells[cellIndex]).text()] = $(this).text();
          });
          count++;    
        });
        var myObj = {};
        myObj.myrows = myRows;
        console.log(JSON.stringify(myObj,replacer));
    }); 
});

Answer 1

使用reduce遍历正文中的tr，将td中第一个tr的文本内容用作城市名称。提供给reduce的函数的第三个参数表示迭代索引：

const cityData = [...document.querySelectorAll('tbody > tr')]
  .reduce((a, tr, i) => {
    a[tr.children[0].textContent] = i + 1;
    return a;
  }, {});
console.log(
  { mycities: [
    cityData
  ]}
);

<table>
  <thead>
    <tr>
      <th>city name</th>
      <th>other city info</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Seattle</td>
      <td>Lots of rain</td>
    </tr>
    <tr>
      <td>Chicago</td>
      <td>Lots of rain</td>
    </tr>
    <tr>
      <td>New York</td>
      <td>Lots of rain</td>
    </tr>
  </tbody>
</table>

Answer 2

您可以从以下简单脚本开始：

$('td').each(function(index, obj) {console.log(index, $(this).html())});

它返回您需要的所有内容，而您只需要以任何方式组装JSON

我想从HTML表中创建JSON对象。我希望将最终产品用于汇总多个用户的输入

2 个答案: