Saya memiliki beberapa tabel yang dihasilkan dari loop di wp dan telah menulis jquery untuk menghapus kolom dengan td kosong, yang berfungsi untuk tabel pertama dan kemudian menambahkan kolom yang sama pada semua tabel lainnya. Saya telah mencoba menggunakan 'setiap' dengan jquery untuk dijalankan untuk setiap tabel, tetapi tidak.

Contoh:

Setiap tabel memiliki 1 baris dan memiliki jumlah kolom yang sama (7). Kolom kosong disembunyikan ini berfungsi dengan satu tabel. Katakanlah tabel 1 memiliki 2 kolom yang terlihat dan tabel 2 memiliki 3 kolom yang terlihat.. kolom ke-3 (dari tabel 2) ditambahkan ke tabel 1 meskipun kosong.

Ini jquery saya

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

Ini tabel saya yang dibuat untuk setiap loop

        <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>
0
jasone 26 Oktober 2019, 03:20

1 menjawab

Jawaban Terbaik

Berikut adalah contoh dasar yang dapat menangani sejumlah tabel dan akan mengidentifikasi kolom "kosong". Ini mengasumsikan tabel hanya memiliki 1 baris.

$(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>
1
Twisty 26 Oktober 2019, 01:48