I want to show the user only 3 columns in UI, But want to Export all table data to excel, So how can I hide the column based on the header text?

This is My Table, I want to show only First 3 columns to User but i want to export All data to Excel. First how Can I hide the Columns based on the Header text ?

<table id="ibms" class="table table-bordered">

                              <thead>    
                                <tr>                      
                                  <th>IBMS Code</th>
                                  <th>Location Description</th>
                                  <th>FMS Location Code</th>
                                  <th>FMS Location Description</th>
                                  <th>Site</th>
                                  <th>Level</th>
                                  <th>Area</th>
                                  <th>Zone</th>
                                  <th>Unit</th>
                                  <th>Location</th>
                              </tr>
                          </thead> 
           
                             <tbody>
    
                            <tr><td>IB-0078</td>
                                  <td>Hello</td>
                                  <td>542</td>
                                  <td>Description here</td>
                                  <td>Industry</td>
                                  <td>1</td>
                                  <td>Arizona</td>
                                  <td>five</td>
                                  <td>2</td>
                                  <td>USA</td>
                               </tr>
                               <tr>
                               <td>IB-552</td>
                                  <td>World</td>
                                  <td>576</td>
                                  <td>Description here</td>
                                  <td>Textile</td>
                                  <td>2</td>
                                  <td>Texas</td>
                                  <td>one</td>
                                  <td>10</td>
                                  <td>USA</td>
                             </tr>
                             </tbody>
                            </table>
    
    
             

JS code:
var hidecolumns = $("#ibms").DataTable();

        function locationhie(hidecolumns){       
                    
                            var u = $("th:contains(FMS Location Description)").index();
                            hidecolumns.column(u).visible( false );
                        }
        function locationhieSite(hidecolumns){       
                    
                            var a = $("th:contains(Site)").index();
                            hidecolumns.column(a).visible( false );
                        }
        function locationhielevel(hidecolumns){       
                    
                            var b = $("th:contains(Level)").index();
                            hidecolumns.column(b).visible( false );
                        }
        function locationhieArea(hidecolumns){       
                    
                            var c = $("th:contains(Area)").index();
                            hidecolumns.column(c).visible( false );
                        }
        function locationhieZone(hidecolumns){       
                    
                            var d = $("th:contains(Zone)").index();
                            hidecolumns.column(d).visible( false );
                        }
        function locationhieUnit(hidecolumns){       
                    
                            var e = $("th:contains(Unit)").index();
                            hidecolumns.column(e).visible( false );
                        }
        function locationhieLocation(hidecolumns){       
                    
                            var f = $("th:contains(Location)").index();
                            hidecolumns.column(f).visible( false );
                        }

Can Anyone help me how to Achieve this ? Is there any alternative solutions available to do this in a single function?

>Solution :

You can use CSS :nth-child pseudo-class selector to hide some columns, no JS needed:

.locations td:nth-child(n+4),
.locations th:nth-child(n+4) {
  display: none;
}

<table id="ibms" class="table table-bordered locations">
  <thead>
    <tr>
      <th>IBMS Code</th>
      <th>Location Description</th>
      <th>FMS Location Code</th>
      <th>FMS Location Description</th>
      <th>Site</th>
      <th>Level</th>
      <th>Area</th>
      <th>Zone</th>
      <th>Unit</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>IB-0078</td>
      <td>Hello</td>
      <td>542</td>
      <td>Description here</td>
      <td>Industry</td>
      <td>1</td>
      <td>Arizona</td>
      <td>five</td>
      <td>2</td>
      <td>USA</td>
    </tr>
    <tr>
      <td>IB-552</td>
      <td>World</td>
      <td>576</td>
      <td>Description here</td>
      <td>Textile</td>
      <td>2</td>
      <td>Texas</td>
      <td>one</td>
      <td>10</td>
      <td>USA</td>
    </tr>
  </tbody>
</table>

.locations td:nth-child(n+4) selects any td element within an element of .locations class starting from the index of 4. Indices are calculated from the first occurence of td in its parent, and the first index is 1.