is there a function to manipulate table data in javascript

Question

so I'm creating a defi app and there are 3 main 'divs'(volume,balance,amount traded). the idea is that anytime I click on a div the able should change contents. right now I haven't worked out the blockchain aspect so all I want the divs to do is show just odd or just even column numbers. please help with a Javascript function. table code below.

<table class="table table-hover table-bordered rounded">
          <thead>
            <tr>
              <th scope="col">Name</th>
              <th scope="col">Chain</th>
              <th scope="col">Sector</th>
              <th scope="col">USD</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry the Bird</td>
              <td>what what?</td>
              <td>@twitter</td>
            </tr>
            <tr>
              <th scope="row">4</th>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <th scope="row">5</th>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <th scope="row">6</th>
              <td>Larry the Bird</td>
              <td>what what?</td>
              <td>@twitter</td>
            </tr>
            <tr>
              <th scope="row">7</th>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <th scope="row">8</th>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <th scope="row">9</th>
              <td>Larry the Bird</td>
              <td>what what?</td>
              <td>@twitter</td>
            </tr>
            <tr>
              <th scope="row">10</th>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <th scope="row">11</th>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <th scope="row">12</th>
              <td>Larry the Bird</td>
              <td>what what?</td>
              <td>@twitter</td>
            </tr>
          </tbody>
        </table>