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

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();

Answer 2

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

这是由于我不知道结果的错误。

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

2 个答案: