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  tr")是一个未定义的目标或格式错误的选择器，可以替换为：$('#rfqTable tr')并且应该可以工作，因为我在代码中没有看到任何 tbody 元素。（如果它是由 Angular 创建的，请提供反馈以供进一步调查）。

如果它为您提供了一个非空对象，请同时检查您的表配置，因为您的表配置超过了 tr 级别，#rfqTable并且可能会导致问题。您可能想要为父元素指定一个 ID 和一些定义（例如 data-something）来标记您想要选择的元素（或避免其他不选择的元素）。

Answer 2

随着表的标题行<thead>...</thead>和表的主体被包含<tbody>...</tbody>（因为它们应该是这样），您可能需要考虑：

turnTableIntoJSON(table) {

    let jquery = require('jquery');

    const $: JQueryStatic = jquery;

    let headers = $(table).find('thead th').get().map(th => $(th).text());

    let myRows = $(table).find('tbody tr').get().map(tr => {

        let obj = {};

        $(tr).find('th').each(function(index, cell) {

            obj[headers[index]] = $(cell).text();

        });

        return obj;

    });

    console.log(JSON.stringify({ myRows }))

}