获取 HTML 表格标签 <table><tbody><th><tr><td> 之间的所有文本（单行和多行）并生成 json答案

【问题标题】：Get the all the text (single and multi-line) between HTML table tags <table><tbody><th><tr><td> and generate json获取 HTML 表格标签 <table><tbody><th><tr><td> 之间的所有文本（单行和多行）并生成 json
【发布时间】：2020-04-03 13:27:10
【问题描述】：

我有下面的 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 等一样递增。

【问题讨论】：

标签： javascript html json

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

【讨论】：

【解决方案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);

这个代码sn-p是从这个thread收集的

【讨论】：