获取HTML表格标签<table><tbody><th><tr><td>之间的所有文本并生成json

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

假设您的 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 => {&nbsp; oKeys.push(item.innerText);&nbsp; return ;});tds.map( item => {&nbsp; oVals.push(item.innerText);&nbsp; return ;});console.log("O keys ", oKeys);console.log("oVals ", oVals);let newObj = {};oKeys.map( (key, i) => {&nbsp; let val = oVals[i];&nbsp; Object.assign(newObj, {[key] : val })});console.log(newObj);<table id="myTable">&nbsp; &nbsp; &nbsp;<tbody>&nbsp; &nbsp; &nbsp;<tr>&nbsp; &nbsp; &nbsp; &nbsp; <th>Role</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Device Name</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>IP Address </th>&nbsp; &nbsp; &nbsp; &nbsp; <th>MAC Address </th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Registered </th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Subscribers </th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Events </th>&nbsp; &nbsp; &nbsp;</tr>&nbsp; &nbsp; &nbsp;<tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; CM&nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; -&nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>192.168.7.110&nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>506182488323&nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>XYZ&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp;Shkdsd30ec1&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Events&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp;</tr>&nbsp; &nbsp; &nbsp;</tbody></table>newObj 保存您想要的数据。您可以在上述逻辑中添加更多内容。

Answer 2

使用 jQuery 进行 dom 选择，这段 JS 代码应该可以工作var myRows = [];var headersText = [];var $headers = $("th");// Loop through grabbing everythingvar $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);