Запустите функцию Jquery для каждой таблицы на странице

Question

У меня есть несколько таблиц, которые сгенерированы из цикла в wp и написали jquery для удаления столбцов с пустыми значениями td, который работает для первой таблицы, а затем добавляет те же столбцы для всех других таблиц. Я пытался использовать «каждый» с jquery для запуска для каждой таблицы, но это не так.

Пример:

Каждая таблица имеет 1 строку и имеет одинаковое количество столбцов (7). Пустые столбцы скрыты, это работает с одной таблицей. Допустим, в таблице 1 есть 2 видимых столбца, а в таблице 2 - 3 видимых столбца. 3-й столбец (из таблицы 2) добавляется в таблицу 1, даже если он пуст.

Вот мой jquery

    $(document).ready(function() {

    $('.man-table').each(function (table) {
        //count # of columns
        var numCols = $("th", table).length;
        for ( var i=1; i<=numCols; i++ ) {
            var empty = true;
            //grab all the <td>'s of the column at i
            $("td:nth-child(" + i + ")", table).each(function(index, el) {
                //check if the <span> of this <td> is empty
                if ( $("span", el).text() != "" ) {
                    empty = false;
                    return false; //break out of each() early
                }
            });
            if ( empty ) {
                $("td:nth-child(" + i + ")", table).hide(); //hide <td>'s
                $("th:nth-child(" + i + ")", table).hide(); //hide header <th>
            }
        }
    })
});

Вот моя таблица, сгенерированная для каждого цикла

        <table class='man-table'>
        <thead>
        <tr>
            <th class='numeric'><span>inductance (r)</span></th>
            <th class='numeric'><span>mount</span></th>
            <th class='numeric'><span>dim (mm)</span></th>
            <th class='numeric'><span>r current</span></th>
            <th class='numeric'><span>impedance</span></th>
            <th class='numeric'><span>capacitance</span></th>
            <th class='numeric'><span>resistance</span></th>
            <th class='numeric'><span>spec</span></th>
        </tr>
        </thead>
        <tr>
            <td data-title='inductance (r)' class='numeric'><span>{$ind}</span></td>
            <td data-title='mount type' class='numeric'><span>{$mnt}</span></td>
            <td data-title='dimensions' class='numeric'><span>{$dim}</span></td>
            <td data-title='rated current' class='numeric'><span>{$rat}</span></td>
            <td data-title='impedance' class='numeric'><span>{$imp}</span></td>
            <td data-title='capacitance' class='numeric'><span>{$cap}</span></td>
            <td data-title='resistance' class='numeric'><span>{$res}</span></td>
            <td data-title='spec sheet' class='numeric'><span><a href='{$site_url}/product-spec/{$prod_pdf}' target='_blank;'><div id='spec-btn'>DOWNLOAD</div></a></span></td>
        </tr>
    </table>

Answer 1

Вот базовый пример, который может обрабатывать несколько таблиц и идентифицировать «пустой» столбец. Это предполагает, что таблица имеет только 1 строку.

$(function() {

  function findEmptyCol(t) {
    var cols = [];
    $("tbody td", t).each(function(i, c) {
      if ($(c).text().trim() == "") {
        cols.push($(c).index());
      }
    });
    return cols;
  }

  function hideEmptyCol(tables) {
    tables.each(function(i, t) {
      var e = findEmptyCol(t);
      if (e.length) {
        $.each(e, function(k, v) {
          $("th", t).eq(v).hide();
          $("td", t).eq(v).hide();
        });
      }
    });
  }

  hideEmptyCol($(".man-table"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Table 1</h3>
<table class='man-table' id="table-1">
  <thead>
    <tr>
      <th class='numeric'><span>Col 1</span></th>
      <th class='numeric'><span>Col 2</span></th>
      <th class='numeric'><span>Col 3</span></th>
      <th class='numeric'><span>Col 4</span></th>
      <th class='numeric'><span>Col 5</span></th>
      <th class='numeric'><span>Col 6</span></th>
      <th class='numeric'><span>Col 7</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class='numeric'><span>1</span></td>
      <td class='numeric'><span>2</span></td>
      <td class='numeric'><span>3</span></td>
      <td class='numeric'><span>4</span></td>
      <td class='numeric'><span>5</span></td>
      <td class='numeric'><span>6</span></td>
      <td class='numeric'><span>7</span></td>
    </tr>
  </tbody>
</table>
<h3>Table 2</h3>
<table class='man-table' id="table-2">
  <thead>
    <tr>
      <th class='numeric'><span>Col 1</span></th>
      <th class='numeric'><span>Col 2</span></th>
      <th class='numeric'><span>Col 3</span></th>
      <th class='numeric'><span>Col 4</span></th>
      <th class='numeric'><span>Col 5</span></th>
      <th class='numeric'><span>Col 6</span></th>
      <th class='numeric'><span>Col 7</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class='numeric'><span>1</span></td>
      <td class='numeric'><span></span></td>
      <td class='numeric'><span>3</span></td>
      <td class='numeric'><span>4</span></td>
      <td class='numeric'><span> </span></td>
      <td class='numeric'><span>6</span></td>
      <td class='numeric'><span>7</span></td>
    </tr>
  </tbody>
</table>

<h3>Table 3</h3>
<table class='man-table' id="table-3">
  <thead>
    <tr>
      <th class='numeric'><span>Col 1</span></th>
      <th class='numeric'><span>Col 2</span></th>
      <th class='numeric'><span>Col 3</span></th>
      <th class='numeric'><span>Col 4</span></th>
      <th class='numeric'><span>Col 5</span></th>
      <th class='numeric'><span>Col 6</span></th>
      <th class='numeric'><span>Col 7</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class='numeric'><span>1</span></td>
      <td class='numeric'><span>2</span></td>
      <td class='numeric'><span>3</span></td>
      <td class='numeric'><span>4</span></td>
      <td class='numeric'><span>5</span></td>
      <td class='numeric'><span>&nbsp;</span></td>
      <td class='numeric'><span>7</span></td>
    </tr>
  </tbody>
</table>