获取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 => {

  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 保存您想要的数据。您可以在上述逻辑中添加更多内容。

Answer 2

使用 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);