0

I have a table of values that shows the people in a room and the capacity I have two buttons when hit I want to show the least crowded or most crowded room. Here is my code and I use Boostrap for my buttons. Is there a way to use JavaScript or something use to get the buttons to do what I want to do.

 <a 

       href=/top5> <!--When this button is pressed shows least crowed rooms-->

       Least Crowded Rooms <!--Name of Button-->
            </a>    
        </button>

                  
        <button type="button" class="btn btn-default"> <!--Creates a button for a webpage-->
            <a 
                href=/worst5> <!--When this button is pressed shows most crowed rooms-->
                Most Crowded Rooms <!--Name of Button-->
            </a>    
        </button>
        
                          
        <button type="button" class="btn btn-default"> <!--Creates a button for a webpage-->
            <a 
                href=https://studyspacemap.herokuapp.com/>
                Map <!--Name of Button-->
            </a>    
        </button>

    
         <div class="col-lg"> <!--Creates a large columum for the webpage-->
            <form class="input-group" method="GET" action="search" > <!--Creates a Basic Input Group with text input and submit button. -->
              <input type="text" class="form-control" name="query" id="myInput" onkeyup="myFunction()" placeholder="Search for...">
              <span class="input-group-btn">
                <button class="btn btn-default" type="submit">Search</button> <!-- Creates search button -->
              </span>
            </form><!-- /input-group -->
        </div><!-- /.col-lg-6 -->
  <head>
    <base target="_top">
  </head>
  <body>
    <table class="table table-bordered table-condensed table-striped" id="myTable">
      <tr>

      <!-- <th scope="col">#</th> -->

    <th scope="col" style="color: goldenrod">Room</th> <!-- Specifies that the cell is a header for a column and names the  colum -->

    <th scope="col" style="color: goldenrod">Students</th>
                    <th scope="col" style="color: goldenrod">Capacity</th>
                    <th scope="col" style="color: goldenrod">Temperature</th>

    <th scope="col" style="color: goldenrod">Percent Of Occupancy % </th>
     
     </tr>

    <?var tableData = getSheetData();?> 
    <?for(var i = 0; i < tableData.length; i++) { ?>

      <?if(i == 0) { ?>
        <tr>

     <?for(var j = 0; j < tableData[i].length; j++) { ?>
  
     <th><?= tableData[i][j] ?></th>
       
       <? } ?>
                            
      <? } else { ?>
        <tr>
        <?for(var j = 0; j < tableData[i].length; j++) { ?>
        <td><?= tableData[i][j] ?></td>
        <? } ?>
      <? } ?>
    <? } ?>
    </table>
    </body>
Rubén
  • 34,714
  • 9
  • 70
  • 166
Duck1999
  • 1
  • 1
  • Do u mean u want to hide all other rooms and show only the most or least crowded room?? – Archit Gargi Apr 13 '22 at 17:01
  • Welcome to [so]. Please checkout the referred question. If you need further help, please [edit] this question including a [mcve], showing what you have tried and a brief description of what you have learned or is hard adapt to your code from previous questions from this site. – Rubén Apr 13 '22 at 17:19

0 Answers0