获取 HTML 表标签之间的所有文本（单行和多行）<table><tbody><tr><th></th></tr><tr><td> 并生成 json<div id="text_translate"><p> 我有下面的 HTML 表，我想获取标签之间的数据，这些标签有时是单行，有时是多行。</p><pre> &lt;table&gt; &lt;tbody&gt; &lt;tr&gt; &lt;th&gt;Role&lt;/th&gt; &lt;th&gt;Device Name&lt;/th&gt; &lt;th&gt;IP Address &lt;/th&gt; &lt;th&gt;MAC Address &lt;/th&gt; &lt;th&gt;Registered &lt;/th&gt; &lt;th&gt;Subscribers &lt;/th&gt; &lt;th&gt;Events &lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; CM &lt;/td&gt; &lt;td&gt; - &lt;/td&gt; &lt;td&gt;192.168.7.110&amp;nbsp;&lt;/td&gt; &lt;td&gt;506182488323&amp;nbsp;&lt;/td&gt; &lt;td&gt;XYZ &lt;/td&gt; &lt;td&gt;&amp;nbsp;Shkdsd30ec1 &lt;/td&gt; &lt;td&gt;Events &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt;</pre><p> 我想使用此表生成 JSON，如下面的代码，使用 javascript</p><pre> { "Role": "CM", "Device Name": "-", "IP Address": "192.168.7.110", "MAC Address": "506182488323", "Registered": "XYZ", "Subscribers": "Shkdsd30ec1", "Events": "Events" }</pre><p> 如果有更多带有键的标签应该像 Role-&gt;Role1-&gt;Role2 等一样递增。</p></div></td></tr></tbody></table>

Question

我有下面的 HTML 表，我想获取标签之间的数据，这些标签有时是单行，有时是多行。

<table>
     <tbody>
     <tr>
        <th>Role</th>
        <th>Device Name</th>
        <th>IP Address </th>
        <th>MAC Address </th>
        <th>Registered </th>
        <th>Subscribers </th>
        <th>Events </th>
     </tr>
     <tr>
        <td>
    CM
   </td>
        <td>
    -
   </td>
        <td>192.168.7.110&nbsp;</td>
        <td>506182488323&nbsp;</td>
        <td>XYZ
        </td>
        <td>&nbsp;Shkdsd30ec1
        </td>
        <td>Events
        </td>
     </tr>
     </tbody>
</table>

我想使用此表生成 JSON，如下面的代码，使用 javascript

{
  "Role" : "CM",
  "Device Name" : "-",
  "IP Address" : "192.168.7.110",
  "MAC Address" : "506182488323",
  "Registered" : "XYZ",
  "Subscribers" : "Shkdsd30ec1",
  "Events" : "Events"
}

如果有更多带有键的标签应该像 Role->Role1->Role2 等一样递增。

Answer 1

使用 jQuery 进行 dom 选择，这个 JS 代码应该可以工作

var myRows = [];
var headersText = [];
var $headers = $("th");

// Loop through grabbing everything
var $rows = $("tbody tr").each(function(index) {
  $cells = $(this).find("td");
  myRows[index] = {};

  $cells.each(function(cellIndex) {
    // Set the header text
    if(headersText[cellIndex] === undefined) {
      headersText[cellIndex] = $($headers[cellIndex]).text();
    }
    // Update the row object with the header/cell combo
    myRows[index][headersText[cellIndex]] = $(this).text();
  });
});

// Let's put this in the object like you want and convert to JSON (Note: jQuery will also do this for you on the Ajax request)
var myObj = {
    "myrows": myRows
};
console.log(myRows);

这个代码片段是从这个线程收集的

Answer 2

假设您的 HTML 主体中只有这个表......

 let t = document.getElementsByTagName("table"); let trs = t[0].getElementsByTagName("tr"); let oKeys = [], oVals = []; let ths = trs[0].getElementsByTagName("th"); let tds = trs[1].getElementsByTagName("td"); ths = Array.from(ths); tds = Array.from(tds); ths.map( item => { oKeys.push(item.innerText); return; }); tds.map( item => { oVals.push(item.innerText); return; }); console.log("O keys ", oKeys); console.log("oVals ", oVals); let newObj = {}; oKeys.map( (key, i) => { let val = oVals[i]; Object.assign(newObj, {[key]: val }) }); console.log(newObj);

 <table id="myTable"> <tbody> <tr> <th>Role</th> <th>Device Name</th> <th>IP Address </th> <th>MAC Address </th> <th>Registered </th> <th>Subscribers </th> <th>Events </th> </tr> <tr> <td> CM </td> <td> - </td> <td>192.168.7.110&nbsp;</td> <td>506182488323&nbsp;</td> <td>XYZ </td> <td>&nbsp;Shkdsd30ec1 </td> <td>Events </td> </tr> </tbody> </table>

newObj 保存您想要的数据。 您可以在上述逻辑中添加更多内容..