Html - Sorting Multiple Tables by IDs With a Single Function

SentientOnion
May 3, 2024
243 views
0 votes
2 Answers

I am looking to include tableCompletion-Progress in the sortTable() function alongside timeSpentTable. If I swap out timeSpentTable for tableCompletion-Progress, it works. However, my goal is to include both tables in the sortTable function.

Is there a way to use document.querySelectorAll like:

table = document.querySelectorAll("timeSpentTable, tableCompletion-Progress");

Here is my code:

function openSheet(evt, sheetName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("Time-Spent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tabcontent = document.getElementsByClassName("Completion-Progress");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tabcontent = document.getElementsByClassName("Lesson-Percentage-Correct");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tabcontent = document.getElementsByClassName("Quiz-Percentage-Correct");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tabcontent = document.getElementsByClassName("Dashboard-Key");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(sheetName).style.display = "block";
  evt.currentTarget.className += " active";
}

function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("timeSpentTable");
  switching = true;
  dir = "asc";
  while (switching) {
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount++;
    } else {
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

document.getElementById("defaultOpen").click();

.sort-btn {
  font-size: 10px;
  padding: 3px 6px;
  margin-left: 2px;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.sort-btn:focus {
  outline: 0;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
  margin: 0;
  padding: 0;
  width: 100%;
}

.container {
  max-width: 100%;
  padding: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, .1);
  border-bottom: 4px solid #4caf50;
}

td,
th {
  padding: 15px;
  text-align: center;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  background-color: #fff;
  transition: background-color .5 ease-in;
}

td:hover {
  background-color: #d3d3d3;
}

th {
  border-bottom: 1px solid #000;
  border-radius: 40px;
}

tr:nth-child(even) {
  box-shadow: 0 5px 5px -5px rgba(0, 0, 0, .1);
}

tr:nth-child(odd) {
  box-shadow: 0 5px 5px -5px rgba(0, 0, 0, .1);
}

.tab {
  display: flex;
  flex-wrap: wrap;
  background-color: #4caf50;
  color: #fff;
  border-bottom: 6px solid #357834;
  padding: 10px 0;
  border-radius: 20px;
  overflow-x: auto;
}

.tab button {
  background-color: inherit;
  border: none;
  outline: 0;
  cursor: pointer;
  padding: 5px 1%;
  transition: background-color .3s;
  color: #fff;
  font-size: large;
  border-radius: 20px;
  font-weight: 700;
  flex-grow: 1;
  margin: 10px;
  white-space: nowrap;
}

.tab button.active {
  background-color: #333;
}

<div class="container">
  <div class="tab">
    <button class="tablinks" onclick='openSheet(event,"Time-Spent")'>Participant Performance</button>
    <button class="tablinks" onclick='openSheet(event,"Completion-Progress")'>Lesson Progress</button>
    <button class="tablinks" onclick='openSheet(event,"Lesson-Percentage-Correct")' id="defaultOpen">Lesson Percentage
            Correct
        </button>
    <button class="tablinks" onclick='openSheet(event,"Quiz-Percentage-Correct")'>Quiz Percentage Correct</button>
    <button class="tablinks" onclick='openSheet(event,"Dashboard-Key")'>Dashboard Key</button>
  </div>
  <div id="Dashboard-Key" class="Dashboard-Key" style="display:none">
    <table class="Dashboard-Key">
      <thead>
        <tr>
          <th>Lesson Number</th>
          <th>Lesson Title</th>
        </tr>
      </thead>
      <tr>
        <td>L6</td>
        <td>Example</td>
      </tr>
      <tr>
        <td>L21</td>
        <td>Example</td>
      </tr>
      <tr>
        <td>L23</td>
        <td>Example</td>
      </tr>
      <tr>
        <td>L24</td>
        <td>Example</td>
      </tr>
      <tr>
        <td>L28</td>
        <td>Example</td>
      </tr>
      <tr>
        <td>L29</td>
        <td>Example</td>
      </tr>
    </table>
    <h3>Completion Status Key</h3>
    <table>
      <tr>
        <th>Completion Status</th>
        <th>Meaning</th>
      </tr>
      <tr>
        <td>Completed</td>
        <td>Participants have completed parts 1-3</td>
      </tr>
      <tr>
        <td>Started</td>
        <td>Participants have started at least one part of the lesson</td>
      </tr>
    </table>
    <h3>Session Key</h3>
    <table>
      <tr>
        <th>Session</th>
        <th>Meaning</th>
      </tr>
      <tr>
        <td>Session</td>
        <td>Amount performed from start to finish in one sitting</td>
      </tr>
    </table>
    <h3>Quiz Key</h3>
    <table>
      <tr>
        <th>Quiz Number</th>
        <th>Quiz Name</th>
      </tr>
      <tr>
        <td>Quiz 1</td>
        <td>Cool-Down</td>
      </tr>
      <tr>
        <td>Quiz 2</td>
        <td>Challenge</td>
      </tr>
    </table>
  </div>
  <div id="Time-Spent" class="Time-Spent" style="display:none">
    <table id="timeSpentTable">
      <thead>
        <tr>
          <th>Participant<button class="sort-btn" onclick='sortTable(0,"asc")'>▲</button><button class="sort-btn" onclick='sortTable(0,"desc")'>▼</button>
          </th>
          <th>Lesson<button class="sort-btn" onclick='sortTable(1,"asc")'>▲</button><button class="sort-btn" onclick='sortTable(1,"desc")'>▼</button>
          </th>
          <th>Session<button class="sort-btn" onclick='sortTable(2,"asc")'>▲</button><button class="sort-btn" onclick='sortTable(2,"desc")'>▼</button>
          </th>
          <th>Elapsed Time (Min)<button class="sort-btn" onclick='sortTable(3,"asc")'>▲</button><button class="sort-btn" onclick='sortTable(3,"desc")'>▼</button>
          </th>
          <th>First Start Date<button class="sort-btn" onclick='sortTable(4,"asc")'>▲</button><button class="sort-btn" onclick='sortTable(4,"desc")'>▼</button>
          </th>
          <th>Last Start Date<button class="sort-btn" onclick='sortTable(5,"asc")'>▲</button><button class="sort-btn" onclick='sortTable(5,"desc")'>▼</button>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>6</td>
          <td>1</td>
          <td>17:32</td>
          <td>2024-03-18 07:05 PM</td>
          <td>2024-03-18 06:48 PM</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>6</td>
          <td>2</td>
          <td>09:35</td>
          <td>2024-03-18 07:18 PM</td>
          <td>2024-03-18 07:09 PM</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>6</td>
          <td>1</td>
          <td>14:20</td>
          <td>2024-03-18 07:42 PM</td>
          <td>2024-03-18 07:56 PM</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>6</td>
          <td>1</td>
          <td>11:05</td>
          <td>2024-03-19 08:32 PM</td>
          <td>2024-03-19 08:43 PM</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>6</td>
          <td>1</td>
          <td>19:10</td>
          <td>2024-03-20 09:50 PM</td>
          <td>2024-03-20 10:09 PM</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>6</td>
          <td>1</td>
          <td>08:25</td>
          <td>2024-03-21 10:58 PM</td>
          <td>2024-03-21 11:06 PM</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>6</td>
          <td>1</td>
          <td>13:50</td>
          <td>2024-03-22 11:45 PM</td>
          <td>2024-03-22 11:59 PM</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div id="Completion-Progress" class="Completion-Progress" style="display:none">
    <table id="tableCompletion-Progress">
      <thead>
        <tr>
          <th>Participant
            <button class="sort-btn" onclick='sortTable(0,"asc")'>▲</button>
            <button class="sort-btn" onclick='sortTable(0,"desc")'>▼</button>
          </th>
          <th>L6
            <button class="sort-btn" onclick='sortTable(1,"asc")'>▲</button>
            <button class="sort-btn" onclick='sortTable(1,"desc")'>▼</button>
          </th>
          <th>L21
            <button class="sort-btn" onclick='sortTable(2,"asc")'>▲</button>
            <button class="sort-btn" onclick='sortTable(2,"desc")'>▼</button>
          </th>
          <th>L23
            <button class="sort-btn" onclick='sortTable(3,"asc")'>▲</button>
            <button class="sort-btn" onclick='sortTable(3,"desc"")'>▼</button>
          </th>
          <th>L24
            <button class="sort-btn" onclick='sortTable(4,"asc")'>▲</button>
            <button class="sort-btn" onclick='sortTable(4,"desc")'>▼</button>
          </th>
          <th>L28
            <button class="sort-btn" onclick='sortTable(5,"asc")'>▲</button>
            <button class="sort-btn" onclick='sortTable(5,"desc")'>▼</button>
          </th>
          <th>L29
            <button class="sort-btn" onclick='sortTable(6,"asc")'>▲</button>
            <button class="sort-btn" onclick='sortTable(6,"desc")'>▼</button>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>Completed</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>Completed</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>Completed</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>Completed</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>Completed</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>Completed</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
  <div id="Lesson-Percentage-Correct" class="Lesson-Percentage-Correct">
    <table>
      <thead>
        <tr>
          <th>Participant</th>
          <th>Lesson</th>
          <th>Part</th>
          <th>Time Spent (Min)</th>
          <th>Percentage Correct</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="3"><a href="mailto:[email protected]">[email protected]</a></td>
          <td rowspan="3">L6</td>
          <td>1</td>
          <td>7.9</td>
          <td>20%</td>
        </tr>
        <tr>
          <td>2</td>
          <td>15.7</td>
          <td>25%</td>
        </tr>
        <tr>
          <td>3</td>
          <td>17.3</td>
          <td>0%</td>
        </tr>
        <tr>
          <td colspan="3" style="font-size:large"><b>Total Time Spent:</b></td>
          <td><b>41.9</b></td>
          <td></td>
        </tr>
        <tr>
          <td rowspan="3"><a href="mailto:[email protected]">[email protected]</a></td>
          <td rowspan="3">L6</td>
          <td>1</td>
          <td>7.9</td>
          <td>20%</td>
        </tr>
        <tr>
          <td>2</td>
          <td>15.7</td>
          <td>25%</td>
        </tr>
        <tr>
          <td>3</td>
          <td>17.3</td>
          <td>0%</td>
        </tr>
        <tr>
          <td colspan="3" style="font-size:large"><b>Total Time Spent:</b></td>
          <td><b>41.9</b></td>
          <td></td>
        </tr>
        <tr>
          <td rowspan="3"><a href="mailto:[email protected]">[email protected]</a></td>
          <td rowspan="3">L6</td>
          <td>1</td>
          <td>7.9</td>
          <td>20%</td>
        </tr>
        <tr>
          <td>2</td>
          <td>15.7</td>
          <td>25.0%</td>
        </tr>
        <tr>
          <td>3</td>
          <td>17.3</td>
          <td>0%</td>
        </tr>
        <tr>
          <td colspan="3" style="font-size:large"><b>Total Time Spent:</b></td>
          <td><b>41.9</b></td>
          <td></td>
        </tr>
        <tr>
          <td rowspan="3"><a href="mailto:[email protected]">[email protected]</a></td>
          <td rowspan="3">L6</td>
          <td>1</td>
          <td>7.9</td>
          <td>20%</td>
        </tr>
        <tr>
          <td>2</td>
          <td>15.7</td>
          <td>25%</td>
        </tr>
        <tr>
          <td>3</td>
          <td>17.3</td>
          <td>0%</td>
        </tr>
        <tr>
          <td colspan="3" style="font-size:large"><b>Total Time Spent:</b></td>
          <td><b>41.9</b></td>
          <td></td>
        </tr>
        <tr>
          <td rowspan="3"><a href="mailto:[email protected]">[email protected]</a></td>
          <td rowspan="3">L6</td>
          <td>1</td>
          <td>7.9</td>
          <td>20%</td>
        </tr>
        <tr>
          <td>2</td>
          <td>15.7</td>
          <td>25%</td>
        </tr>
        <tr>
          <td>3</td>
          <td>17.3</td>
          <td>0%</td>
        </tr>
        <tr>
          <td colspan="3" style="font-size:large"><b>Total Time Spent:</b></td>
          <td><b>41.9</b></td>
          <td></td>
        </tr>
        <tr>
          <td rowspan="3"><a href="mailto:[email protected]">[email protected]</a></td>
          <td rowspan="3">L6</td>
          <td>1</td>
          <td>7.9</td>
          <td>20%</td>
        </tr>
        <tr>
          <td>2</td>
          <td>15.7</td>
          <td>25%</td>
        </tr>
        <tr>
          <td>3</td>
          <td>17.3</td>
          <td>0%</td>
        </tr>
        <tr>
          <td colspan="3" style="font-size:large"><b>Total Time Spent:</b></td>
          <td><b>41.9</b></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
  <div id="Quiz-Percentage-Correct" class="Quiz-Percentage-Correct">
    <table>
      <thead>
        <tr>
          <th>Participant</th>
          <th>Lesson Identifier</th>
          <th>Percentage Correct</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>L6 Quiz 2</td>
          <td>10%</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>L6 Quiz 1</td>
          <td>0%</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>L6 Quiz 2</td>
          <td>10%</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>L6 Quiz 1</td>
          <td>0%</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>L6 Quiz 1</td>
          <td>10%</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>L6 Quiz 1</td>
          <td>10%</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>L6 Quiz 1</td>
          <td>10%</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answers

Yes you can use

var tables = document.querySelectorAll("#timeSpentTable, #tableCompletion-Progress");

then loop through table with:

tables.forEach(function (table) {...

Your sortTable should be like this:

function sortTable(n) {
  var tables = document.querySelectorAll("#timeSpentTable, #tableCompletion-Progress");
  tables.forEach(function (table) {
    var rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
    switching = true;
    dir = "asc";
    while (switching) {
      switching = false;
      rows = table.rows;
      for (i = 1; i < (rows.length - 1); i++) {
        shouldSwitch = false;
        x = rows[i].getElementsByTagName("TD")[n];
        y = rows[i + 1].getElementsByTagName("TD")[n];
        if (dir == "asc") {
          if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
            shouldSwitch = true;
            break;
          }
        } else if (dir == "desc") {
          if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
            shouldSwitch = true;
            break;
          }
        }
      }
      if (shouldSwitch) {
        rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
        switching = true;
        switchcount++;
      } else {
        if (switchcount == 0 && dir == "asc") {
          dir = "desc";
          switching = true;
        }
      }
    }
  });
}

Here is the working code:

function openSheet(evt, sheetName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("Time-Spent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tabcontent = document.getElementsByClassName("Completion-Progress");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tabcontent = document.getElementsByClassName("Lesson-Percentage-Correct");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tabcontent = document.getElementsByClassName("Quiz-Percentage-Correct");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tabcontent = document.getElementsByClassName("Dashboard-Key");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(sheetName).style.display = "block";
  evt.currentTarget.className += " active";
}


function sortTable(n) {
  var tables = document.querySelectorAll("#timeSpentTable, #tableCompletion-Progress");
  tables.forEach(function (table) {
    var rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
    switching = true;
    dir = "asc";
    while (switching) {
      switching = false;
      rows = table.rows;
      for (i = 1; i < (rows.length - 1); i++) {
        shouldSwitch = false;
        x = rows[i].getElementsByTagName("TD")[n];
        y = rows[i + 1].getElementsByTagName("TD")[n];
        if (dir == "asc") {
          if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
            shouldSwitch = true;
            break;
          }
        } else if (dir == "desc") {
          if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
            shouldSwitch = true;
            break;
          }
        }
      }
      if (shouldSwitch) {
        rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
        switching = true;
        switchcount++;
      } else {
        if (switchcount == 0 && dir == "asc") {
          dir = "desc";
          switching = true;
        }
      }
    }
  });
}


document.getElementById("defaultOpen").click();

.sort-btn {
  font-size: 10px;
  padding: 3px 6px;
  margin-left: 2px;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.sort-btn:focus {
  outline: 0;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
  margin: 0;
  padding: 0;
  width: 100%;
}

.container {
  max-width: 100%;
  padding: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, .1);
  border-bottom: 4px solid #4caf50;
}

td,
th {
  padding: 15px;
  text-align: center;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  background-color: #fff;
  transition: background-color .5 ease-in;
}

td:hover {
  background-color: #d3d3d3;
}

th {
  border-bottom: 1px solid #000;
  border-radius: 40px;
}

tr:nth-child(even) {
  box-shadow: 0 5px 5px -5px rgba(0, 0, 0, .1);
}

tr:nth-child(odd) {
  box-shadow: 0 5px 5px -5px rgba(0, 0, 0, .1);
}

.tab {
  display: flex;
  flex-wrap: wrap;
  background-color: #4caf50;
  color: #fff;
  border-bottom: 6px solid #357834;
  padding: 10px 0;
  border-radius: 20px;
  overflow-x: auto;
}

.tab button {
  background-color: inherit;
  border: none;
  outline: 0;
  cursor: pointer;
  padding: 5px 1%;
  transition: background-color .3s;
  color: #fff;
  font-size: large;
  border-radius: 20px;
  font-weight: 700;
  flex-grow: 1;
  margin: 10px;
  white-space: nowrap;
}

.tab button.active {
  background-color: #333;
}

<div class="container">
  <div class="tab">
    <button class="tablinks" onclick='openSheet(event,"Time-Spent")'>Participant Performance</button>
    <button class="tablinks" onclick='openSheet(event,"Completion-Progress")'>Lesson Progress</button>
    <button class="tablinks" onclick='openSheet(event,"Lesson-Percentage-Correct")' id="defaultOpen">Lesson Percentage
            Correct
        </button>
    <button class="tablinks" onclick='openSheet(event,"Quiz-Percentage-Correct")'>Quiz Percentage Correct</button>
    <button class="tablinks" onclick='openSheet(event,"Dashboard-Key")'>Dashboard Key</button>
  </div>
  <div id="Dashboard-Key" class="Dashboard-Key" style="display:none">
    <table class="Dashboard-Key">
      <thead>
        <tr>
          <th>Lesson Number</th>
          <th>Lesson Title</th>
        </tr>
      </thead>
      <tr>
        <td>L6</td>
        <td>Example</td>
      </tr>
      <tr>
        <td>L21</td>
        <td>Example</td>
      </tr>
      <tr>
        <td>L23</td>
        <td>Example</td>
      </tr>
      <tr>
        <td>L24</td>
        <td>Example</td>
      </tr>
      <tr>
        <td>L28</td>
        <td>Example</td>
      </tr>
      <tr>
        <td>L29</td>
        <td>Example</td>
      </tr>
    </table>
    <h3>Completion Status Key</h3>
    <table>
      <tr>
        <th>Completion Status</th>
        <th>Meaning</th>
      </tr>
      <tr>
        <td>Completed</td>
        <td>Participants have completed parts 1-3</td>
      </tr>
      <tr>
        <td>Started</td>
        <td>Participants have started at least one part of the lesson</td>
      </tr>
    </table>
    <h3>Session Key</h3>
    <table>
      <tr>
        <th>Session</th>
        <th>Meaning</th>
      </tr>
      <tr>
        <td>Session</td>
        <td>Amount performed from start to finish in one sitting</td>
      </tr>
    </table>
    <h3>Quiz Key</h3>
    <table>
      <tr>
        <th>Quiz Number</th>
        <th>Quiz Name</th>
      </tr>
      <tr>
        <td>Quiz 1</td>
        <td>Cool-Down</td>
      </tr>
      <tr>
        <td>Quiz 2</td>
        <td>Challenge</td>
      </tr>
    </table>
  </div>
  <div id="Time-Spent" class="Time-Spent" style="display:none">
    <table id="timeSpentTable">
      <thead>
        <tr>
          <th>Participant<button class="sort-btn" onclick='sortTable(0,"asc")'>▲</button><button class="sort-btn" onclick='sortTable(0,"desc")'>▼</button>
          </th>
          <th>Lesson<button class="sort-btn" onclick='sortTable(1,"asc")'>▲</button><button class="sort-btn" onclick='sortTable(1,"desc")'>▼</button>
          </th>
          <th>Session<button class="sort-btn" onclick='sortTable(2,"asc")'>▲</button><button class="sort-btn" onclick='sortTable(2,"desc")'>▼</button>
          </th>
          <th>Elapsed Time (Min)<button class="sort-btn" onclick='sortTable(3,"asc")'>▲</button><button class="sort-btn" onclick='sortTable(3,"desc")'>▼</button>
          </th>
          <th>First Start Date<button class="sort-btn" onclick='sortTable(4,"asc")'>▲</button><button class="sort-btn" onclick='sortTable(4,"desc")'>▼</button>
          </th>
          <th>Last Start Date<button class="sort-btn" onclick='sortTable(5,"asc")'>▲</button><button class="sort-btn" onclick='sortTable(5,"desc")'>▼</button>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>6</td>
          <td>1</td>
          <td>17:32</td>
          <td>2024-03-18 07:05 PM</td>
          <td>2024-03-18 06:48 PM</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>6</td>
          <td>2</td>
          <td>09:35</td>
          <td>2024-03-18 07:18 PM</td>
          <td>2024-03-18 07:09 PM</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>6</td>
          <td>1</td>
          <td>14:20</td>
          <td>2024-03-18 07:42 PM</td>
          <td>2024-03-18 07:56 PM</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>6</td>
          <td>1</td>
          <td>11:05</td>
          <td>2024-03-19 08:32 PM</td>
          <td>2024-03-19 08:43 PM</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>6</td>
          <td>1</td>
          <td>19:10</td>
          <td>2024-03-20 09:50 PM</td>
          <td>2024-03-20 10:09 PM</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>6</td>
          <td>1</td>
          <td>08:25</td>
          <td>2024-03-21 10:58 PM</td>
          <td>2024-03-21 11:06 PM</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>6</td>
          <td>1</td>
          <td>13:50</td>
          <td>2024-03-22 11:45 PM</td>
          <td>2024-03-22 11:59 PM</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div id="Completion-Progress" class="Completion-Progress" style="display:none">
    <table id="tableCompletion-Progress">
      <thead>
        <tr>
          <th>Participant
            <button class="sort-btn" onclick='sortTable(0,"asc")'>▲</button>
            <button class="sort-btn" onclick='sortTable(0,"desc")'>▼</button>
          </th>
          <th>L6
            <button class="sort-btn" onclick='sortTable(1,"asc")'>▲</button>
            <button class="sort-btn" onclick='sortTable(1,"desc")'>▼</button>
          </th>
          <th>L21
            <button class="sort-btn" onclick='sortTable(2,"asc")'>▲</button>
            <button class="sort-btn" onclick='sortTable(2,"desc")'>▼</button>
          </th>
          <th>L23
            <button class="sort-btn" onclick='sortTable(3,"asc")'>▲</button>
            <button class="sort-btn" onclick='sortTable(3,"desc")'>▼</button>
          </th>
          <th>L24
            <button class="sort-btn" onclick='sortTable(4,"asc")'>▲</button>
            <button class="sort-btn" onclick='sortTable(4,"desc")'>▼</button>
          </th>
          <th>L28
            <button class="sort-btn" onclick='sortTable(5,"asc")'>▲</button>
            <button class="sort-btn" onclick='sortTable(5,"desc")'>▼</button>
          </th>
          <th>L29
            <button class="sort-btn" onclick='sortTable(6,"asc")'>▲</button>
            <button class="sort-btn" onclick='sortTable(6,"desc")'>▼</button>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>Completed</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>Completed</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>Completed</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>Completed</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>Completed</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>Completed</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
  <div id="Lesson-Percentage-Correct" class="Lesson-Percentage-Correct">
    <table>
      <thead>
        <tr>
          <th>Participant</th>
          <th>Lesson</th>
          <th>Part</th>
          <th>Time Spent (Min)</th>
          <th>Percentage Correct</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="3"><a href="mailto:[email protected]">[email protected]</a></td>
          <td rowspan="3">L6</td>
          <td>1</td>
          <td>7.9</td>
          <td>20%</td>
        </tr>
        <tr>
          <td>2</td>
          <td>15.7</td>
          <td>25%</td>
        </tr>
        <tr>
          <td>3</td>
          <td>17.3</td>
          <td>0%</td>
        </tr>
        <tr>
          <td colspan="3" style="font-size:large"><b>Total Time Spent:</b></td>
          <td><b>41.9</b></td>
          <td></td>
        </tr>
        <tr>
          <td rowspan="3"><a href="mailto:[email protected]">[email protected]</a></td>
          <td rowspan="3">L6</td>
          <td>1</td>
          <td>7.9</td>
          <td>20%</td>
        </tr>
        <tr>
          <td>2</td>
          <td>15.7</td>
          <td>25%</td>
        </tr>
        <tr>
          <td>3</td>
          <td>17.3</td>
          <td>0%</td>
        </tr>
        <tr>
          <td colspan="3" style="font-size:large"><b>Total Time Spent:</b></td>
          <td><b>41.9</b></td>
          <td></td>
        </tr>
        <tr>
          <td rowspan="3"><a href="mailto:[email protected]">[email protected]</a></td>
          <td rowspan="3">L6</td>
          <td>1</td>
          <td>7.9</td>
          <td>20%</td>
        </tr>
        <tr>
          <td>2</td>
          <td>15.7</td>
          <td>25.0%</td>
        </tr>
        <tr>
          <td>3</td>
          <td>17.3</td>
          <td>0%</td>
        </tr>
        <tr>
          <td colspan="3" style="font-size:large"><b>Total Time Spent:</b></td>
          <td><b>41.9</b></td>
          <td></td>
        </tr>
        <tr>
          <td rowspan="3"><a href="mailto:[email protected]">[email protected]</a></td>
          <td rowspan="3">L6</td>
          <td>1</td>
          <td>7.9</td>
          <td>20%</td>
        </tr>
        <tr>
          <td>2</td>
          <td>15.7</td>
          <td>25%</td>
        </tr>
        <tr>
          <td>3</td>
          <td>17.3</td>
          <td>0%</td>
        </tr>
        <tr>
          <td colspan="3" style="font-size:large"><b>Total Time Spent:</b></td>
          <td><b>41.9</b></td>
          <td></td>
        </tr>
        <tr>
          <td rowspan="3"><a href="mailto:[email protected]">[email protected]</a></td>
          <td rowspan="3">L6</td>
          <td>1</td>
          <td>7.9</td>
          <td>20%</td>
        </tr>
        <tr>
          <td>2</td>
          <td>15.7</td>
          <td>25%</td>
        </tr>
        <tr>
          <td>3</td>
          <td>17.3</td>
          <td>0%</td>
        </tr>
        <tr>
          <td colspan="3" style="font-size:large"><b>Total Time Spent:</b></td>
          <td><b>41.9</b></td>
          <td></td>
        </tr>
        <tr>
          <td rowspan="3"><a href="mailto:[email protected]">[email protected]</a></td>
          <td rowspan="3">L6</td>
          <td>1</td>
          <td>7.9</td>
          <td>20%</td>
        </tr>
        <tr>
          <td>2</td>
          <td>15.7</td>
          <td>25%</td>
        </tr>
        <tr>
          <td>3</td>
          <td>17.3</td>
          <td>0%</td>
        </tr>
        <tr>
          <td colspan="3" style="font-size:large"><b>Total Time Spent:</b></td>
          <td><b>41.9</b></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
  <div id="Quiz-Percentage-Correct" class="Quiz-Percentage-Correct">
    <table>
      <thead>
        <tr>
          <th>Participant</th>
          <th>Lesson Identifier</th>
          <th>Percentage Correct</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>L6 Quiz 2</td>
          <td>10%</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>L6 Quiz 1</td>
          <td>0%</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>L6 Quiz 2</td>
          <td>10%</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>L6 Quiz 1</td>
          <td>0%</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>L6 Quiz 1</td>
          <td>10%</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>L6 Quiz 1</td>
          <td>10%</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>L6 Quiz 1</td>
          <td>10%</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

To answer the question you can use multiple selectors but # prefix is for an id.
var sortableTables = document.body.querySelectorAll("#timeSpentTable, #tableCompletion-Progress");

Now you don’t really need that if you use a class like sortable-table or some such.

Note I attach the button listener to the tab-container to simplify and only have ONE listener not one for each button; then I can use the event to see which one was clicked AND use that to get the container it is attached to. ("event delegation" – search for that)

Here I also reduced the actual need for the id’s by using classes and some data attributes on the buttons for the targets. I used the id selector for the target but it might be a class with an index also using an nth-child CSS selector also ref: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

I removed all the event click from the HTML and used a listener to simplify things.

See how I toggle the hidden class I put in the CSS to avoid the more complex none and block values.

This is still quite verbose and can be reduced but I did this for clarity in learning.

var sortableTables = document.body.querySelectorAll("#timeSpentTable, #tableCompletion-Progress");
[...sortableTables].forEach((el) => {
  el.addEventListener('click', sortTable);
});
var toggleViews = document.querySelector(".tab-container");
toggleViews.addEventListener('click', openSheet);

function openSheet(event) {
  let me = event.target;
  let parentContainer = me.closest('.container');
  let tabContainer = event.currentTarget; // me.closest(".tab-container"); also works to get the tab container since that is where we attached our event handler.
  let tables = parentContainer.querySelectorAll('.table-container');
  [...tabContainer.querySelectorAll('.tablinks')].forEach((tab) => {
    tab
      .classList.toggle("active", false);
  });
  me.classList.toggle("active", true);
  let targetTable = document.querySelector(me.dataset.target);
  targetTable.classList.toggle('hidden', false);
  let siblings = [...tables]
    .filter(c => c.nodeType == 1 && c != targetTable);
  [...siblings].forEach((el) => {
    el.classList.toggle('hidden', true);
  });
}

function sortTable(event) {
  let table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  const index = [...event.target.parentElement.closest('tr').children].indexOf(event.target.parentElement);
  table = event.target.parentElement.closest('table'); //document.getElementById("timeSpentTable");
  switching = true;
  dir = "asc";
  while (switching) {
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("TD")[index];
      y = rows[i + 1].getElementsByTagName("TD")[index];
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount++;
    } else {
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

document.getElementById("defaultOpen").click();

.sort-btn {
  font-size: 10px;
  padding: 3px 6px;
  margin-left: 2px;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.sort-btn:focus {
  outline: 0;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
  margin: 0;
  padding: 0;
  width: 100%;
}

.container {
  max-width: 100%;
  padding: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, .1);
  border-bottom: 4px solid #4caf50;
}

td,
th {
  padding: 15px;
  text-align: center;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  background-color: #fff;
  transition: background-color .5 ease-in;
}

td:hover {
  background-color: #d3d3d3;
}

th {
  border-bottom: 1px solid #000;
  border-radius: 40px;
}

tr:nth-child(even) {
  box-shadow: 0 5px 5px -5px rgba(0, 0, 0, .1);
}

tr:nth-child(odd) {
  box-shadow: 0 5px 5px -5px rgba(0, 0, 0, .1);
}

.tab {
  display: flex;
  flex-wrap: wrap;
  background-color: #4caf50;
  color: #fff;
  border-bottom: 6px solid #357834;
  padding: 10px 0;
  border-radius: 20px;
  overflow-x: auto;
}

.tab button {
  background-color: inherit;
  border: none;
  outline: 0;
  cursor: pointer;
  padding: 5px 1%;
  transition: background-color .3s;
  color: #fff;
  font-size: large;
  border-radius: 20px;
  font-weight: 700;
  flex-grow: 1;
  margin: 10px;
  white-space: nowrap;
}

.tab button.active {
  background-color: #333;
}

.hidden {
  display: none;
}

<div class="container">
  <div class="tab tab-container">
    <button class="tablinks" data-target="#Time-Spent">Participant Performance</button>
    <button class="tablinks" data-target="#Completion-Progress">Lesson Progress</button>
    <button class="tablinks" data-target="#Lesson-Percentage-Correct" id="defaultOpen">Lesson Percentage Correct</button>
    <button class="tablinks" data-target="#Quiz-Percentage-Correct">Quiz Percentage Correct</button>
    <button class="tablinks" data-target="#Dashboard-Key">Dashboard Key</button>
  </div>
  <div id="Dashboard-Key" class="table-container Dashboard-Key hidden">
    <table class="Dashboard-Key">
      <thead>
        <tr>
          <th>Lesson Number</th>
          <th>Lesson Title</th>
        </tr>
      </thead>
      <tr>
        <td>L6</td>
        <td>Example</td>
      </tr>
      <tr>
        <td>L21</td>
        <td>Example</td>
      </tr>
      <tr>
        <td>L23</td>
        <td>Example</td>
      </tr>
      <tr>
        <td>L24</td>
        <td>Example</td>
      </tr>
      <tr>
        <td>L28</td>
        <td>Example</td>
      </tr>
      <tr>
        <td>L29</td>
        <td>Example</td>
      </tr>
    </table>
    <h3>Completion Status Key</h3>
    <table>
      <tr>
        <th>Completion Status</th>
        <th>Meaning</th>
      </tr>
      <tr>
        <td>Completed</td>
        <td>Participants have completed parts 1-3</td>
      </tr>
      <tr>
        <td>Started</td>
        <td>Participants have started at least one part of the lesson</td>
      </tr>
    </table>
    <h3>Session Key</h3>
    <table>
      <tr>
        <th>Session</th>
        <th>Meaning</th>
      </tr>
      <tr>
        <td>Session</td>
        <td>Amount performed from start to finish in one sitting</td>
      </tr>
    </table>
    <h3>Quiz Key</h3>
    <table>
      <tr>
        <th>Quiz Number</th>
        <th>Quiz Name</th>
      </tr>
      <tr>
        <td>Quiz 1</td>
        <td>Cool-Down</td>
      </tr>
      <tr>
        <td>Quiz 2</td>
        <td>Challenge</td>
      </tr>
    </table>
  </div>
  <div id="Time-Spent" class="table-container Time-Spent hidden">
    <table id="timeSpentTable">
      <thead>
        <tr>
          <th>Participant<button class="sort-btn sort-asc">▲</button><button class="sort-btn sort-desc">▼</button>
          </th>
          <th>Lesson<button class="sort-btn sort-asc">▲</button><button class="sort-btn sort-desc">▼</button>
          </th>
          <th>Session<button class="sort-btn sort-asc">▲</button><button class="sort-btn sort-desc">▼</button>
          </th>
          <th>Elapsed Time (Min)<button class="sort-btn sort-asc">▲</button><button class="sort-btn sort-desc">▼</button>
          </th>
          <th>First Start Date<button class="sort-btn sort-asc">▲</button><button class="sort-btn sort-desc">▼</button>
          </th>
          <th>Last Start Date<button class="sort-btn sort-asc">▲</button><button class="sort-btn sort-desc">▼</button>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>6</td>
          <td>1</td>
          <td>17:32</td>
          <td>2024-03-18 07:05 PM</td>
          <td>2024-03-18 06:48 PM</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>6</td>
          <td>2</td>
          <td>09:35</td>
          <td>2024-03-18 07:18 PM</td>
          <td>2024-03-18 07:09 PM</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>6</td>
          <td>1</td>
          <td>14:20</td>
          <td>2024-03-18 07:42 PM</td>
          <td>2024-03-18 07:56 PM</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>6</td>
          <td>1</td>
          <td>11:05</td>
          <td>2024-03-19 08:32 PM</td>
          <td>2024-03-19 08:43 PM</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>6</td>
          <td>1</td>
          <td>19:10</td>
          <td>2024-03-20 09:50 PM</td>
          <td>2024-03-20 10:09 PM</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>6</td>
          <td>1</td>
          <td>08:25</td>
          <td>2024-03-21 10:58 PM</td>
          <td>2024-03-21 11:06 PM</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>6</td>
          <td>1</td>
          <td>13:50</td>
          <td>2024-03-22 11:45 PM</td>
          <td>2024-03-22 11:59 PM</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div id="Completion-Progress" class="table-container Completion-Progress hidden">
    <table id="tableCompletion-Progress">
      <thead>
        <tr>
          <th>Participant
            <button class="sort-btn sort-asc">▲</button><button class="sort-btn sort-desc">▼</button>
          </th>
          <th>L6
            <button class="sort-btn sort-asc">▲</button><button class="sort-btn sort-desc">▼</button>
          </th>
          <th>L21
            <button class="sort-btn sort-asc">▲</button><button class="sort-btn sort-desc">▼</button>
          </th>
          <th>L23
            <button class="sort-btn sort-asc">▲</button><button class="sort-btn sort-desc">▼</button>
          </th>
          <th>L24
            <button class="sort-btn sort-asc">▲</button><button class="sort-btn sort-desc">▼</button>
          </th>
          <th>L28
            <button class="sort-btn sort-asc">▲</button><button class="sort-btn sort-desc">▼</button>
          </th>
          <th>L29
            <button class="sort-btn sort-asc">▲</button><button class="sort-btn sort-desc">▼</button>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>Completed</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>Completed</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>Completed</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>Completed</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>Completed</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>Completed</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
  <div id="Lesson-Percentage-Correct" class="table-container Lesson-Percentage-Correct hidden">
    <table>
      <thead>
        <tr>
          <th>Participant</th>
          <th>Lesson</th>
          <th>Part</th>
          <th>Time Spent (Min)</th>
          <th>Percentage Correct</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="3"><a href="mailto:[email protected]">[email protected]</a></td>
          <td rowspan="3">L6</td>
          <td>1</td>
          <td>7.9</td>
          <td>20%</td>
        </tr>
        <tr>
          <td>2</td>
          <td>15.7</td>
          <td>25%</td>
        </tr>
        <tr>
          <td>3</td>
          <td>17.3</td>
          <td>0%</td>
        </tr>
        <tr>
          <td colspan="3" style="font-size:large"><b>Total Time Spent:</b></td>
          <td><b>41.9</b></td>
          <td></td>
        </tr>
        <tr>
          <td rowspan="3"><a href="mailto:[email protected]">[email protected]</a></td>
          <td rowspan="3">L6</td>
          <td>1</td>
          <td>7.9</td>
          <td>20%</td>
        </tr>
        <tr>
          <td>2</td>
          <td>15.7</td>
          <td>25%</td>
        </tr>
        <tr>
          <td>3</td>
          <td>17.3</td>
          <td>0%</td>
        </tr>
        <tr>
          <td colspan="3" style="font-size:large"><b>Total Time Spent:</b></td>
          <td><b>41.9</b></td>
          <td></td>
        </tr>
        <tr>
          <td rowspan="3"><a href="mailto:[email protected]">[email protected]</a></td>
          <td rowspan="3">L6</td>
          <td>1</td>
          <td>7.9</td>
          <td>20%</td>
        </tr>
        <tr>
          <td>2</td>
          <td>15.7</td>
          <td>25.0%</td>
        </tr>
        <tr>
          <td>3</td>
          <td>17.3</td>
          <td>0%</td>
        </tr>
        <tr>
          <td colspan="3" style="font-size:large"><b>Total Time Spent:</b></td>
          <td><b>41.9</b></td>
          <td></td>
        </tr>
        <tr>
          <td rowspan="3"><a href="mailto:[email protected]">[email protected]</a></td>
          <td rowspan="3">L6</td>
          <td>1</td>
          <td>7.9</td>
          <td>20%</td>
        </tr>
        <tr>
          <td>2</td>
          <td>15.7</td>
          <td>25%</td>
        </tr>
        <tr>
          <td>3</td>
          <td>17.3</td>
          <td>0%</td>
        </tr>
        <tr>
          <td colspan="3" style="font-size:large"><b>Total Time Spent:</b></td>
          <td><b>41.9</b></td>
          <td></td>
        </tr>
        <tr>
          <td rowspan="3"><a href="mailto:[email protected]">[email protected]</a></td>
          <td rowspan="3">L6</td>
          <td>1</td>
          <td>7.9</td>
          <td>20%</td>
        </tr>
        <tr>
          <td>2</td>
          <td>15.7</td>
          <td>25%</td>
        </tr>
        <tr>
          <td>3</td>
          <td>17.3</td>
          <td>0%</td>
        </tr>
        <tr>
          <td colspan="3" style="font-size:large"><b>Total Time Spent:</b></td>
          <td><b>41.9</b></td>
          <td></td>
        </tr>
        <tr>
          <td rowspan="3"><a href="mailto:[email protected]">[email protected]</a></td>
          <td rowspan="3">L6</td>
          <td>1</td>
          <td>7.9</td>
          <td>20%</td>
        </tr>
        <tr>
          <td>2</td>
          <td>15.7</td>
          <td>25%</td>
        </tr>
        <tr>
          <td>3</td>
          <td>17.3</td>
          <td>0%</td>
        </tr>
        <tr>
          <td colspan="3" style="font-size:large"><b>Total Time Spent:</b></td>
          <td><b>41.9</b></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
  <div id="Quiz-Percentage-Correct" class="table-container Quiz-Percentage-Correct hidden">
    <table>
      <thead>
        <tr>
          <th>Participant</th>
          <th>Lesson Identifier</th>
          <th>Percentage Correct</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>L6 Quiz 2</td>
          <td>10%</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>L6 Quiz 1</td>
          <td>0%</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>L6 Quiz 2</td>
          <td>10%</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>L6 Quiz 1</td>
          <td>0%</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>L6 Quiz 1</td>
          <td>10%</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>L6 Quiz 1</td>
          <td>10%</td>
        </tr>
        <tr>
          <td><a href="mailto:[email protected]">[email protected]</a></td>
          <td>L6 Quiz 1</td>
          <td>10%</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Sorting Multiple Tables by IDs With a Single Function

Answers