JQuery: циклический просмотр таблиц и подсчет строк в каждой - PullRequest
Новая
       24

JQuery: циклический просмотр таблиц и подсчет строк в каждой

0 голосов
/ 30 октября 2018

Я пытаюсь очистить таблицы со страницы Википедии с помощью jQuery. Есть 51 соответствующих таблиц, и я хотел бы посчитать количество строк в каждой. В таблицах не было удостоверений личности, поэтому я дал им несколько. Вот мой код: 

    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

(Я пробовал много вариантов безрезультатно.) Есть идеи? Спасибо !!

Ответы [ 2 ]

0 голосов
/ 30 октября 2018

попробуй var rowCount = $('#' + currentTable + ' tr').length;

Это ошибка, которую я не знаю по результату.

0 голосов
/ 30 октября 2018

DOM HTMLTableElement экземпляры имеют свойство rows , которое представляет собой набор строк в таблице.

Нет необходимости для идентификаторов. Просто: 

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

Live Пример: 

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's map вызывает свой обратный вызов с индексом элемента и элемента. Мы не используем индекс (поэтому я назвал его _), но мы используем элемент.
  • В обратном вызове мы используем свойство rows.
  • Поскольку jQuery map возвращает объект jQuery, мы используем get() для получения необработанного массива.

Или, если вы хотите объединить идентификаторы вашей таблицы, начиная с 4, и количество строк, возможно, как объекты: 

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

Live Пример: 

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