JQuery：遍历表并计算每个表中的行数

Question

我正在尝试使用 jQuery 从 Wikipedia 页面中抓取表格。有 51 个相关表，我想计算每个表中的行数。这些桌子没有ID，所以我给了他们一些。这是我的代码：

    const curl = require("/Users/ericknowles/node_modules/curl");
    const jsdom = require("/Users/ericknowles/node_modules/jsdom");

    const url = "https://en.wikipedia.org/wiki/United_States_House_of_Representatives_elections,_2016";
    curl.get(url, null, (err,resp,body)=>{
      if(resp.statusCode == 200){
         parseData(body);
      }
      else{
         //some error handling
         console.log("error while fetching url");
      }
    });

    function parseData(html){
        const {JSDOM} = jsdom;
        const dom = new JSDOM(html);
        const $ = (require('/Users/ericknowles/node_modules/jquery'))(dom.window);

        // extract all tables from the page
        var tables = $(".wikitable");

        // the relevant tables don't have IDs, so let's give them some
        for(var id = 4; id < 54; id++){
            $(tables[id]).attr('id', 'table_'+id);
        }

        for(var id = 4; id < 54; id++){
            currentTable = 'table_' + id;
            var rowCount = $('#' + currentTable 'tr').length;
            console.log(currentTable + " " + rowCount);
        }
    }

最后一个循环给我带来了麻烦。如果只有一个表需要计算其行数，我会使用var rowCounty = $('#myTable tr').length;，但我需要循环遍历带有下标的表列表 (table_4, table_5, ... table_53)。我似乎无法正确使用语法。例如，上面的代码给了我：

    var rowCount = $('#' + currentTable 'tr').length;
                           ^^^^^^^^^^^^

    SyntaxError: missing ) after argument list

（我尝试了很多变化都无济于事。）有什么想法吗？谢谢！！

Answer 1

试试var rowCount = $('#' + currentTable + ' tr').length;

这是针对我不知道结果的错误。

Answer 2

DOM HTMLTableElement 实例有一个 rows property，它是表中行的集合。

不需要 ID。只是：

const tables = $(".wikitable");
const rowsPerTable = tables.map((_, table) => table.rows.length).get();

现场示例：

const tables = $(".wikitable");
const rowsPerTable = tables.map((_, table) => table.rows.length).get();
console.log(rowsPerTable);

.wikitable {
  border: 1px solid #ddd;
  margin-bottom: 4px;
}

<table class="wikitable">
  <tbody>
    <tr><td>Just one row</td></tr>
  </tbody>
</table>

<table class="wikitable">
  <tbody>
    <tr><td>Two rows...</td></tr>
    <tr><td>...in this one</td></tr>
  </tbody>
</table>

<table class="wikitable">
  <tbody>
    <tr><td>Five</td></tr>
    <tr><td>rows</td></tr>
    <tr><td>in</td></tr>
    <tr><td>this</td></tr>
    <tr><td>one</td></tr>
  </tbody>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

返回一个数字数组，其中每个数字是tables 中等效表中的行数。以下是它的工作原理：

• jQuery 的map 使用元素的索引和元素调用它的回调。我们不使用索引（所以我称之为_），但我们使用元素。
• 在回调中，我们使用rows 属性。
• 由于 jQuery 的 map 返回一个 jQuery 对象，我们使用 get() 来获取原始数组。

或者，如果您想组合以 4 开头的表 ID 和行数，可能作为对象：

const tables = $(".wikitable");
const rowsPerTable = tables.map((index, table) => ({id: index + 4, count: table.rows.length})).get();

现场示例：

const tables = $(".wikitable");
const rowsPerTable = tables.map((index, table) => ({id: index + 4, count: table.rows.length})).get();
console.log(rowsPerTable);

.wikitable {
  border: 1px solid #ddd;
  margin-bottom: 4px;
}

<table class="wikitable">
  <tbody>
    <tr><td>Just one row</td></tr>
  </tbody>
</table>

<table class="wikitable">
  <tbody>
    <tr><td>Two rows...</td></tr>
    <tr><td>...in this one</td></tr>
  </tbody>
</table>

<table class="wikitable">
  <tbody>
    <tr><td>Five</td></tr>
    <tr><td>rows</td></tr>
    <tr><td>in</td></tr>
    <tr><td>this</td></tr>
    <tr><td>one</td></tr>
  </tbody>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

---

有些人不喜欢依赖该属性，尽管它得到了普遍支持并且是标准的一部分。如果你不这样做，你可以在桌子上使用querySelectorAll：

const tables = $(".wikitable");
const rowsPerTable = tables.map((_, table) => table.querySelectorAll("tr").length).get();