Except for the last country column, hide all columns whose header name begins with country using Jav-CodePudding

This is a table where I need to delete duplicate columns of Country. I want to do this dynamically. Like if I have more than three columns of country, for example, it will automatically hide when there are more than one column of country. T

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Contact</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Maria Anders</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Francisco Chang</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Roland Mendel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>Helen Bennett</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Yoshi Tannamuri</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Giovanni Rovelli</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

Output should be like this:

Can anybody help me with this I am new to coding?

CodePudding user response：

This hide them:

      let col = [];
      let res = [];
      let ind = [];
      $("th").each(function () {
        col.push($(this).text());
      });

      res = [...new Set(col)];
      for (let i = 0; i < col.length; i  ) {
        if (col.indexOf(res[i]) !== -1) {
          ind.push(col.indexOf(res[i])   1);
        }
      }

      let diff = Array.from({ length: col.length }, (_, i) => i   1).filter((x) => !ind.includes(x));

      $(".hide").on("click", function () {
        for (let i = 0; i < diff.length; i  ) {
          $("th:nth-child("   diff[i]   ")").hide();
          $("td:nth-child("   diff[i]   ")").hide();
        }
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Contact</th>
        <th>Contact</th>
        <th>Country</th>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Maria Anders</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Francisco Chang</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
      <tr>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Roland Mendel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
      </tr>
      <tr>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>Helen Bennett</td>
        <td>Helen Bennett</td>
        <td>UK</td>
      </tr>
      <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Yoshi Tannamuri</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
      </tr>
      <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Giovanni Rovelli</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
    </table>
    <button >Hide</button>

CodePudding user response：

There you go, here is a solution using only css. Note: This is not a global solution, it should work just for your case. Otherwise it needs to be tweeked a little bit for more flexibility.

body {
  font-family: system-ui, sans-serif;
}

table {
  border: 1px solid gray;
  width: 100%;
  table-layout: fixed;
}

table th,
table td {
  padding: .5em .75em;
  text-align: left;
  cursor: default;
}

table th {
  background-color: #c4c4c4;
}

table tr:nth-child(2n 3) td {
  background-color: #eee;
}

table tr th:nth-child(2),
table tr td:nth-child(2),
table tr th:nth-child(3),
table tr td:nth-child(3){
  display: none;
}

<table cellspacing="0" cellpadding="0" border="0">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Contact</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Maria Anders</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Francisco Chang</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Roland Mendel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>Helen Bennett</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Yoshi Tannamuri</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Giovanni Rovelli</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>