如何使用javascript从许多表中获取所有td单元格的内容值？

Question

我正在使用javaScript，我想获取所有TD Cell的所有Tbodies的内容，以便我将它们转换为JSON。

我对HTML DOM操纵并不熟悉，所以我有一个问题创建通缉的JSON格式。

我使用getElementsById，getElementsbytagname等。但是我获得了单个单元格

我想创建一个更具动态的范围来读取HTML表并创建以下JSON格式

     [   Counties: {
          England: {
             Authors: {
               Author A: {
                 Books: [
                   {name: Book A, price: 10 ...},
                   {name: Book B, price: 12 ...},
                   {name: Book C, price: 15 ...}
                 ]
               },
               Author B : {
                 Books: [
                   {name: Book AA, price: 15 ...}, {name: Book BB, price: 13 ...]
                 },
               }
             }
          }
        Spain: {
          Authors: {
            Author C: {
               Books: {
                 {name: Book AAAA, price: 9 ...},
                 {name: Book BBBB, price: 11 ...}
               }
            }
          }
        }
     }
  ]

let table = document.getElementByClassName("table-data");
let ths = table.getElementsByTagName("thead");
let tbodies = table.getElementsByTagName("tbody");
let trdsArr = [];
let td = null
let data = {
  counties: {
    Authors: {}
  }
};
ths.forEach(th => {
  let country = th.getElementsByTagName("td").title;
  let name = th.getElementByClassName("author-name").innerText;
  tbodies.forEach(tbody => {
    let trs = tbody.getElementByTag('tr');
    let trs.map(tr => {
      let book = null;
      let bookPrice = null;
      bookName = tr.getElemenetByClassName('book name').innerText;
      bookPrice = tr.getElemenetByClassName('book price').innerText;
      trdsArr.push({
        name: bookName,
        price: bookPrice
      });
      data.counties[country]['Authors'][name] = trdsArr
    });
  });
});

<div class="table-data">
  <table class='author'>
    <thead>
      <tr>`enter code here`
        <td title="England">
          <span class="author-name">Author A</span>
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="book name "> Book A </td>
        <td class="book price "><span class="price"> 10 </span></td>
        <td class="issue date "><span class="date"> 23/2/2016 </span></td>
      </tr>
      <tr>
        <td class="book name "> Book B </td>
        <td class="book price "><span class="price"> 12 </span></td>
        <td class="issue date "><span class="date"> 18/1/2013 </span></td>
      </tr>
      <tr>
        <td class="book name "> Book C </td>
        <td class="book price "><span class="price"> 15 </span></td>
        <td class="issue date "><span class="date"> 06/5/2012 </span></td>
      </tr>
    </tbody>
  </table>
  <table class='author'>
    <thead>
      <tr>
        <td title="England">
          <span class="author-name">Author B</span>
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="book name "> Book AA </td>
        <td class="book price "><span class="price"> 15 </span></td>
        <td class="issue date "><span class="date"> 17/5/2015 </span></td>
      </tr>
      <tr>
        <td class="book name "> Book BB </td>
        <td class="book price "><span class="price"> 13 </span></td>
        <td class="issue date "><span class="date"> 28/3/2012 </span></td>
      </tr>
    </tbody>
  </table>
  <table class='author'>
    <thead>
      <tr>
        <td title="Spain">
          <span class="author-name">Author C</span>
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="book name "> Book AAA </td>
        <td class="book price "><span class="price"> 9 </span></td>
        <td class="issue date "><span class="date"> 04/6/2014 </span></td>
      </tr>
      <tr>
        <td class="book name "> Book BBB </td>
        <td class="book price "><span class="price"> 11 </span></td>
        <td class="issue date "><span class="date"> 11/2/2010 </span></td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

您可以尝试这样的事情：

let output = {};
document.querySelectorAll('table').forEach(table => {
  let thead = table.querySelector('thead tr td');
  let country = thead.getAttribute('title');
  let author = thead.innerText;
  let names = table.querySelectorAll('tbody tr td.name');
  let prices = table.querySelectorAll('tbody tr td.price');
  let dates = table.querySelectorAll('tbody tr td.date');
  
  for(let i=0; i<names.length; i++) {
    output.countries = output.countries || {};
    output.countries[country] = output.countries[country] || {};
    output.countries[country][author] = output.countries[country][author] || {};  
    output.countries[country][author].name = names[i].innerText;
    output.countries[country][author].price = prices[i].innerText;
    output.countries[country][author].date = dates[i].innerText;
  }
});
console.log(output);

<div class="table-data">
  <table class='author'>
    <thead>
      <tr>`enter code here`
        <td title="England">
          <span class="author-name">Author A</span>
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="book name "> Book A </td>
        <td class="book price "><span class="price"> 10 </span></td>
        <td class="issue date "><span class="date"> 23/2/2016 </span></td>
      </tr>
      <tr>
        <td class="book name "> Book B </td>
        <td class="book price "><span class="price"> 12 </span></td>
        <td class="issue date "><span class="date"> 18/1/2013 </span></td>
      </tr>
      <tr>
        <td class="book name "> Book C </td>
        <td class="book price "><span class="price"> 15 </span></td>
        <td class="issue date "><span class="date"> 06/5/2012 </span></td>
      </tr>
    </tbody>
  </table>
  <table class='author'>
    <thead>
      <tr>
        <td title="England">
          <span class="author-name">Author B</span>
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="book name "> Book AA </td>
        <td class="book price "><span class="price"> 15 </span></td>
        <td class="issue date "><span class="date"> 17/5/2015 </span></td>
      </tr>
      <tr>
        <td class="book name "> Book BB </td>
        <td class="book price "><span class="price"> 13 </span></td>
        <td class="issue date "><span class="date"> 28/3/2012 </span></td>
      </tr>
    </tbody>
  </table>
  <table class='author'>
    <thead>
      <tr>
        <td title="Spain">
          <span class="author-name">Author C</span>
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="book name "> Book AAA </td>
        <td class="book price "><span class="price"> 9 </span></td>
        <td class="issue date "><span class="date"> 04/6/2014 </span></td>
      </tr>
      <tr>
        <td class="book name "> Book BBB </td>
        <td class="book price "><span class="price"> 11 </span></td>
        <td class="issue date "><span class="date"> 11/2/2010 </span></td>
      </tr>
    </tbody>
  </table>
</div>