JQuery 返回一个空对象

Question

我正在尝试使用以下函数将表转换为 JSON 对象：

turnTableIntoJSON(table)

  {

    let jquery = require("jquery");

    const $: JQueryStatic = jquery

    let myRows = []

    let headersText = []

    let $headers = $("th")

    var $rows = $("tbody  tr").each(function(index)

    {

      let $cells = $(this).find("th")

      myRows[index] = {};

      $cells.each(function (cellIndex)

      {

        if(headersText[cellIndex] == undefined)

        {

          headersText[cellIndex] = $($headers[cellIndex]).text();

        }

        myRows[index][headersText[cellIndex]] = $(this).text();

      })

    })

    let myObj = {"myRows": myRows}

    console.log(JSON.stringify(myObj))

  }

但由于某种原因，控制台为我记录了一个空对象，我尝试将表作为参数传递，并得到相同的结果，不知道为什么会这样。没有错误输出或任何东西只是一个空对象。

作为参考，这是在 HTML 中配置表的方式：

 <table id="rfqTable" class="table table-bordered table-responsive-md table-striped text-center" border="1">

    <tr align="left">

      <th>Header 1</th>

      <th>Header 2</th>

      <th>Header 3</th>

      <th>Header 4</th>

      <th>header 5</th>

      <th>6</th>

      <th>7</th>

      <th>8</th>

      <th>9 | Price</th>

      <th>10</th>

      <th>11</th>

      <th>12</th>

      <th>13</th>

      <th>14</th>

      <th>15</th>

      <th>16 UoM</th>

      <th>17</th>

      <th>18</th>

      <th>19</th>

    </tr>

Answer 1

当尝试选择一个元素时，jQuery 总是创建一个 jQuery 对象。即使它不在你的 DOM 上 (n.fn.init)我认为$("tbody &nbsp;tr")是一个未定义的目标或格式错误的选择器，可以替换为：$('#rfqTable tr')并且应该可以工作，因为我在代码中没有看到任何 tbody 元素。（如果它是由 Angular 创建的，请提供反馈以供进一步调查）。如果它为您提供了一个非空对象，请同时检查您的表配置，因为您的表配置超过了 tr 级别，#rfqTable并且可能会导致问题。您可能想要为父元素指定一个 ID 和一些定义（例如 data-something）来标记您想要选择的元素（或避免其他不选择的元素）。

Answer 2

随着表的标题行<thead>...</thead>和表的主体被包含<tbody>...</tbody>（因为它们应该是这样），您可能需要考虑：turnTableIntoJSON(table) {&nbsp; &nbsp; let jquery = require('jquery');&nbsp; &nbsp; const $: JQueryStatic = jquery;&nbsp; &nbsp; let headers = $(table).find('thead th').get().map(th => $(th).text());&nbsp; &nbsp; let myRows = $(table).find('tbody tr').get().map(tr => {&nbsp; &nbsp; &nbsp; &nbsp; let obj = {};&nbsp; &nbsp; &nbsp; &nbsp; $(tr).find('th').each(function(index, cell) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; obj[headers[index]] = $(cell).text();&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; return obj;&nbsp; &nbsp; });&nbsp; &nbsp; console.log(JSON.stringify({ myRows }))}