HTML 表格的 JSON 格式

Posted 2023-03-05

【中文标题】HTML 表格的 JSON 格式

【英文标题】：JSON formattation of an HTML table

【发布时间】：2016-09-05 01:11:03

【问题描述】：

我正在使用 lightswitch 的脚本将 html 表格编码为 JSON 字符串 (https://github.com/lightswitch05/table-to-json)。问题是，当我警告结果字符串（使用 JSON.stringify(data)）时，JSON 记录从第 13 列开始，然后一直持续到最后，然后从第 1 列继续到第 12 列。我不明白为什么，这个脚本似乎在每张桌子上都能正常工作，但在我的桌子上却不行：

<div contenteditable>

<table id="input">
<tr id="start">
  <th contenteditable="false">00</th>
  <th contenteditable="false">00</th>
  <th contenteditable="false">00</th>
  <th contenteditable="false">01</th>
  <th contenteditable="false">02</th>
  <th contenteditable="false">03</th>
  <th contenteditable="false">04</th>
  <th contenteditable="false">05</th>
  <th contenteditable="false">06</th>
  <th contenteditable="false">07</th>
  <th contenteditable="false">08</th>
  <th contenteditable="false">09</th>
  <th contenteditable="false">10</th>
  <th contenteditable="false">11</th>
  <th contenteditable="false">12</th>
  <th contenteditable="false">13</th>
  <th contenteditable="false">14</th>
  <th contenteditable="false">15</th>
  <th contenteditable="false">16</th>
  <th contenteditable="false">17</th>
  <th contenteditable="false">18</th>
  <th contenteditable="false">19</th>
  <th contenteditable="false">20</th>
  <th contenteditable="false">21</th>
  <th contenteditable="false">22</th>
  <th contenteditable="false">23</th>
  <th contenteditable="false">24</th>
  <th contenteditable="false">25</th>
  <th contenteditable="false">26</th>
  <th contenteditable="false">27</th>
  <th contenteditable="false">28</th>
  <th contenteditable="false">29</th>
  <th contenteditable="false">30</th>
  <th contenteditable="false">31</th>
  <th contenteditable="false">32</th>
  <th contenteditable="false">33</th>
  <th contenteditable="false">34</th>
  <th contenteditable="false">35</th>
  <th contenteditable="false">36</th>
  <th contenteditable="false">37</th>
  <th contenteditable="false">38</th>
  <th contenteditable="false">39</th>
  <th contenteditable="false">40</th>
  <th contenteditable="false">41</th>
  <th contenteditable="false">42</th>
  <th contenteditable="false">43</th>
  <th contenteditable="false">44</th>
  <th contenteditable="false">45</th>
  <th contenteditable="false">46</th>
  <th contenteditable="false">47</th>
  <th contenteditable="false">48</th>
  <th contenteditable="false">49</th>
  <th contenteditable="false">50</th>
  <th contenteditable="false">51</th>
  <th contenteditable="false">52</th>
</tr>


<tr>
  <td contenteditable="false">2nd row</td>
  <td contenteditable="false">false data</td>
  <td>2</td>
  <td></td>
  <td></td>
  <td></td>
  <td>8</td>
  <td></td>
  <td>7</td>
  <td></td>
  <td>8</td>
  <td></td>
  <td>8</td>
  <td></td>
  <td>8</td>
  <td></td>
  <td>8</td>
  <td>8</td>
  <td></td>
  <td>8</td>
  <td></td>
  <td>8</td>
  <td></td>
  <td></td>
  <td>8</td>
  <td></td>
  <td>8</td>
  <td></td>
  <td>6</td>
  <td></td>
  <td>8</td>
  <td></td>
  <td>8</td>
  <td></td>
  <td>8</td>
  <td>8</td>
  <td></td>
  <td>8</td>
  <td>8</td>
  <td></td>
  <td>8</td>
  <td></td>
  <td>1</td>
  <td></td>
  <td></td>
  <td></td>
  <td>8</td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
 </tr>

对所有其他行以此类推。 我需要将此表保存为 JSON 格式，以便将 JSON 存储在数据库中并保存修改后的数据。那么，如何从 JSON 中取回表呢？

【参考方案1】：

您使用的是JSON.stringify，因此您需要考虑以下几点：

不保证非数组对象的属性被字符串化 以任何特定的顺序。不要依赖于内部属性的排序 字符串化中的同一个对象。

但这真的有问题吗？将数据发送到服务器后，您可以随意订购。

【讨论】：

可能不会。无论如何，如何让桌子回来？我有这个巨大的 JSON 字符串。如何改造？

JSON.parse() 将其转换回Object

这里有一些想法如何从 json 创建 html 表：***.com/questions/5180382/…

我对如何使用JSON.parse()有点困惑，我要不要table.innerHTML=JSON.parse(object)？

【参考方案2】：

首先，您需要正确编写HTML（关闭表格和div标签等）。然后我建议您将 HTML 视为 XML，也许这会有所帮助： Convert XML to JSON (and back) using javascript

【讨论】：

对不起，我只发布了代码的第一部分，所以我忘了写结束标签。我要检查这个链接，也许使用 XML 的问题更少。