为页面上的每个表运行Jquery Function

debugcn 发表于 Dev

茉莉花

我有多个表是从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>

曲折的

这是一个基本示例，可以处理许多表并标识“空”列。假设表只有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>