Jump to content

Creating A Sortable Table With 28 Rows & 18 Columns


ttnaddy16

Recommended Posts

I have a table With 28 Rows & 18 Columns and I want every column header to be sortable When you click it and sort the column numerically Except for the first column which is the name column which I want to sort alphabetically. I am using a template off W3.CSS So I'm using there W3.CSS Javascript code to sort tables but I can't seem to get it to work. I will include my table code and the code that I tried to use to sort the table. Any help would be appreciated. Here is my html code 

<!DOCTYPE html>
<html lang="en-us">
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="naddymyscript.js"></script>
</head>
<body>
<div class="w3-container">
  <hr>
  <div class="w3-center">
    <h2>Individual Stats 2016-2017</h2>
    </div>
<div class="w3-responsive w3-card-4">
<table class="w3-table w3-striped w3-bordered" id="otcindividualstatsTable">
<thead>
<tr class="w3-theme">
  <th onclick="sortTable">Name</th>
  <th onclick="sortTable">Grade</th>
  <th onclick="sortTable">Wins</th>
  <th onclick="sortTable">Losses</th>
  <th onclick="sortTable">Win %</th>
  <th onclick="sortTable">TD</th>
  <th onclick="sortTable">OP TD</th>
  <th onclick="sortTable">TD%</th>
  <th onclick="sortTable">3 Pt. NF</th>
  <th onclick="sortTable">2 Pt. NF</th>
  <th onclick="sortTable">Reversals</th>
  <th onclick="sortTable">Escapes</th>
  <th onclick="sortTable">OP Escapes</th>
  <th onclick="sortTable">Escape %</th>
  <th onclick="sortTable">Pen. Hm.</th>
  <th onclick="sortTable">Pen. Opp.</th>
  <th onclick="sortTable">Pins</th>
  <th onclick="sortTable">Team Pts.</th>
</tr>
</thead>
<tbody>
<tr class="w3-white">
  <td>Laredo Bugbee</td>
  <td>9</td>
  <td>7</td>
  <td>14</td>
  <td>33.33333</td>
  <td>9</td>
  <td>24</td>
  <td>27.27273</td>
  <td>2</td>
  <td>0</td>
  <td>1</td>
  <td>6</td>
  <td>4</td>
  <td>60</td>
  <td>0</td>
  <td>0</td>
  <td>2</td>
  <td>39</td>
</tr>
<tr class="w3-gray">
  <td>Ben Naddy</td>
  <td>11</td>
  <td>38</td>
  <td>4</td>
  <td>90.4762</td>
  <td>23</td>
  <td>6</td>
  <td>79.3103</td>
  <td>8</td>
  <td>4</td>
  <td>12</td>
  <td>10</td>
  <td>36</td>
  <td>21.7391</td>
  <td>1</td>
  <td>0</td>
  <td>21</td>
  <td>255</td>
</tr>
<tr class="w3-white">
  <td>Marc Hendricks</td>
  <td>11</td>
  <td>28</td>
  <td>13</td>
  <td>68.2927</td>
  <td>96</td>
  <td>48</td>
  <td>66.6667</td>
  <td>13</td>
  <td>3</td>
  <td>7</td>
  <td>41</td>
  <td>88</td>
  <td>31.7829</td>
  <td>1</td>
  <td>2</td>
  <td>4</td>
  <td>133</td>
</tr>
<tr class="w3-gray">
  <td>Nate Hart</td>
  <td>11</td>
  <td>38</td>
  <td>4</td>
  <td>90.4762</td>
  <td>75</td>
  <td>25</td>
  <td>75</td>
  <td>15</td>
  <td>7</td>
  <td>11</td>
  <td>30</td>
  <td>50</td>
  <td>37.5</td>
  <td>1</td>
  <td>0</td>
  <td>21</td>
  <td>239</td>
</tr>
<tr class="w3-white">
  <td>Max Naddy</td>
  <td>10</td>
  <td>24</td>
  <td>16</td>
  <td>60</td>
  <td>87</td>
  <td>22</td>
  <td>79.8165</td>
  <td>11</td>
  <td>3</td>
  <td>5</td>
  <td>15</td>
  <td>62</td>
  <td>19.4805</td>
  <td>4</td>
  <td>1</td>
  <td>8</td>
  <td>135</td>
</tr>
<tr class="w3-gray">
  <td>Zane Swanson</td>
  <td>9</td>
  <td>21</td>
  <td>15</td>
  <td>58.3333</td>
  <td>22</td>
  <td>31</td>
  <td>41.5094</td>
  <td>3</td>
  <td>8</td>
  <td>11</td>
  <td>16</td>
  <td>1</td>
  <td>94.1176</td>
  <td>0</td>
  <td>7</td>
  <td>6</td>
  <td>112</td>
</tr>
<tr class="w3-white">
  <td>James Holen</td>
  <td>12</td>
  <td>15</td>
  <td>10</td>
  <td>60</td>
  <td>34</td>
  <td>21</td>
  <td>61.8182</td>
  <td>7</td>
  <td>1</td>
  <td>6</td>
  <td>21</td>
  <td>24</td>
  <td>46.6667</td>
  <td>2</td>
  <td>1</td>
  <td>3</td>
  <td>74</td>
</tr>
<tr class="w3-gray">
  <td>Alex Erlandson</td>
  <td>11</td>
  <td>18</td>
  <td>13</td>
  <td>58.0645</td>
  <td>32</td>
  <td>33</td>
  <td>49.2308</td>
  <td>6</td>
  <td>3</td>
  <td>16</td>
  <td>20</td>
  <td>18</td>
  <td>52.6316</td>
  <td>0</td>
  <td>1</td>
  <td>7</td>
  <td>107</td>
</tr>
<tr class="w3-white">
  <td>Noah Schleske</td>
  <td>9</td>
  <td>2</td>
  <td>2</td>
  <td>50</td>
  <td>3</td>
  <td>7</td>
  <td>30</td>
  <td>2</td>
  <td>0</td>
  <td>3</td>
  <td>3</td>
  <td>5</td>
  <td>37.5</td>
  <td>0</td>
  <td>0</td>
  <td>1</td>
  <td>9</td>
</tr>
<tr class="w3-gray">
  <td>Jace Leabo</td>
  <td>11</td>
  <td>20</td>
  <td>23</td>
  <td>46.5116</td>
  <td>43</td>
  <td>41</td>
  <td>51.1905</td>
  <td>6</td>
  <td>4</td>
  <td>14</td>
  <td>32</td>
  <td>45</td>
  <td>41.5584</td>
  <td>2</td>
  <td>1</td>
  <td>4</td>
  <td>70</td>
</tr>
<tr class="w3-white">
  <td>Wyatt Thorson</td>
  <td>9</td>
  <td>12</td>
  <td>22</td>
  <td>35.2941</td>
  <td>22</td>
  <td>46</td>
  <td>32.3529</td>
  <td>2</td>
  <td>4</td>
  <td>13</td>
  <td>7</td>
  <td>21</td>
  <td>25</td>
  <td>1</td>
  <td>1</td>
  <td>3</td>
  <td>53</td>
</tr>
<tr class="w3-gray">
  <td>Nathan Stavas</td>
  <td>10</td>
  <td>2</td>
  <td>2</td>
  <td>50</td>
  <td>1</td>
  <td>3</td>
  <td>25</td>
  <td>0</td>
  <td>0</td>
  <td>1</td>
  <td>1</td>
  <td>3</td>
  <td>25</td>
  <td>0</td>
  <td>0</td>
  <td>2</td>
  <td>10</td>
</tr>
<tr class="w3-white">
  <td>Ramon Lopez</td>
  <td>11</td>
  <td>17</td>
  <td>18</td>
  <td>48.5714</td>
  <td>34</td>
  <td>35</td>
  <td>49.2754</td>
  <td>5</td>
  <td>2</td>
  <td>3</td>
  <td>23</td>
  <td>23</td>
  <td>50</td>
  <td>0</td>
  <td>0</td>
  <td>10</td>
  <td>100</td>
</tr>
<tr class="w3-gray">
  <td>Nick Haugen</td>
  <td>12</td>
  <td>19</td>
  <td>25</td>
  <td>43.1818</td>
  <td>27</td>
  <td>34</td>
  <td>44.2623</td>
  <td>2</td>
  <td>2</td>
  <td>10</td>
  <td>23</td>
  <td>16</td>
  <td>58.9744</td>
  <td>0</td>
  <td>1</td>
  <td>14</td>
  <td>95</td>
</tr>
<tr class="w3-white">
  <td>RJ Ehlert</td>
  <td>11</td>
  <td>13</td>
  <td>11</td>
  <td>54.1667</td>
  <td>11</td>
  <td>5</td>
  <td>68.75</td>
  <td>0</td>
  <td>0</td>
  <td>5</td>
  <td>7</td>
  <td>6</td>
  <td>53.8462</td>
  <td>2</td>
  <td>0</td>
  <td>10</td>
  <td>81</td>
</tr>
<tr class="w3-gray">
  <td>Ben Cole</td>
  <td>12</td>
  <td>0</td>
  <td>3</td>
  <td>0</td>
  <td>0</td>
  <td>5</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>1</td>
  <td>1</td>
  <td>50</td>
  <td>0</td>
  <td>0</td>
  <td>1</td>
  <td>0</td>
</tr>
<tr class="w3-white">
  <td>Michael Fielding</td>
  <td>11</td>
  <td>5</td>
  <td>14</td>
  <td>26.3158</td>
  <td>6</td>
  <td>21</td>
  <td>22.2222</td>
  <td>0</td>
  <td>0</td>
  <td>3</td>
  <td>7</td>
  <td>12</td>
  <td>36.8421</td>
  <td>0</td>
  <td>1</td>
  <td>0</td>
  <td>24</td>
</tr>
<tr class="w3-gray">
  <td>Jacob Thompson</td>
  <td>12</td>
  <td>2</td>
  <td>5</td>
  <td>28.5714</td>
  <td>3</td>
  <td>9</td>
  <td>25</td>
  <td>3</td>
  <td>1</td>
  <td>1</td>
  <td>7</td>
  <td>2</td>
  <td>77.7778</td>
  <td>1</td>
  <td>0</td>
  <td>1</td>
  <td>16</td>
</tr>
<tr class="w3-white">
  <td>Hunter Doll</td>
  <td>10</td>
  <td>6</td>
  <td>10</td>
  <td>37.5</td>
  <td>10</td>
  <td>17</td>
  <td>37.037</td>
  <td>2</td>
  <td>0</td>
  <td>6</td>
  <td>4</td>
  <td>11</td>
  <td>26.6667</td>
  <td>1</td>
  <td>0</td>
  <td>0</td>
  <td>21</td>
</tr>
<tr class="w3-gray">
  <td>Christopher Kenyon</td>
  <td>12</td>
  <td>1</td>
  <td>2</td>
  <td>33.3333</td>
  <td>3</td>
  <td>3</td>
  <td>50</td>
  <td>0</td>
  <td>0</td>
  <td>2</td>
  <td>2</td>
  <td>3</td>
  <td>40</td>
  <td>1</td>
  <td>0</td>
  <td>1</td>
  <td>3</td>
</tr>
<tr class="w3-white">
  <td>Jackson Boyum</td>
  <td>10</td>
  <td>0</td>
  <td>1</td>
  <td>0</td>
  <td>0</td>
  <td>3</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>1</td>
  <td>3</td>
  <td>25</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
</tr>
<tr class="w3-gray">
  <td>Matt Hendricks</td>
  <td>9</td>
  <td>4</td>
  <td>7</td>
  <td>36.3636</td>
  <td>10</td>
  <td>11</td>
  <td>47.619</td>
  <td>2</td>
  <td>0</td>
  <td>1</td>
  <td>3</td>
  <td>9</td>
  <td>25</td>
  <td>2</td>
  <td>0</td>
  <td>2</td>
  <td>21</td>
</tr>
<tr class="w3-white">
  <td>Kevin Tierney</td>
  <td>11</td>
  <td>7</td>
  <td>15</td>
  <td>31.8182</td>
  <td>5</td>
  <td>24</td>
  <td>17.2414</td>
  <td>5</td>
  <td>0</td>
  <td>3</td>
  <td>7</td>
  <td>2</td>
  <td>77.7778</td>
  <td>0</td>
  <td>0</td>
  <td>1</td>
  <td>36</td>
</tr>
<tr class="w3-gray">
  <td>Cian Buehler</td>
  <td>8</td>
  <td>3</td>
  <td>6</td>
  <td>33.3333</td>
  <td>3</td>
  <td>5</td>
  <td>37.5</td>
  <td>2</td>
  <td>0</td>
  <td>4</td>
  <td>2</td>
  <td>2</td>
  <td>50</td>
  <td>0</td>
  <td>0</td>
  <td>5</td>
  <td>15</td>
</tr>
<tr class="w3-white">
  <td>Hayden Hart</td>
  <td>9</td>
  <td>12</td>
  <td>10</td>
  <td>54.5455</td>
  <td>16</td>
  <td>13</td>
  <td>55.1724</td>
  <td>2</td>
  <td>1</td>
  <td>5</td>
  <td>14</td>
  <td>13</td>
  <td>51.8519</td>
  <td>4</td>
  <td>1</td>
  <td>2</td>
  <td>48</td>
</tr>
<tr class="w3-gray">
  <td>Reed Leabo</td>
  <td>8</td>
  <td>1</td>
  <td>2</td>
  <td>33.3333</td>
  <td>1</td>
  <td>5</td>
  <td>16.6667</td>
  <td>0</td>
  <td>1</td>
  <td>0</td>
  <td>1</td>
  <td>2</td>
  <td>33.3333</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>6</td>
</tr>
<tr class="w3-white">
  <td>Daniel Ukkelberg</td>
  <td>12</td>
  <td>1</td>
  <td>0</td>
  <td>100</td>
  <td>0</td>
  <td>0</td>
  <td>100</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>6</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
</body>

Here is my javascript code 

//Sort Table Numerically
function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("otcindividualstatsTable");
  switching = true;
  /*Make a loop that will continue until
  no switching has been done:*/
  while (switching) {
    //start by saying: no switching is done:
    switching = false;
    rows = table.rows;
    /*Loop through all table rows (except the
    first, which contains table headers):*/
    for (i = 1; i < (rows.length - 1); i++) {
      //start by saying there should be no switching:
      shouldSwitch = false;
      /*Get the two elements you want to compare,
      one from current row and one from the next:*/
      x = rows[i].getElementsByTagName("TD")[0];
      y = rows[i + 1].getElementsByTagName("TD")[0];
      //check if the two rows should switch place:
      if (Number(x.innerHTML) > Number(y.innerHTML)) {
        //if so, mark as a switch and break the loop:
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /*If a switch has been marked, make the switch
      and mark that a switch has been done:*/
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

 

Link to comment
Share on other sites

I added the javascript code at the end Of my existing javascript code that is linked to my index page but For some reason it will not execute that javascript code Do I have to modify the javascript code you sent me Because I'm linking it to an external Javascript file. Here's my website code 

<!DOCTYPE html>
<html lang="en-us">
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="naddymyscript.js"></script>
</head>
<body>
<div class="w3-container">
  <hr>
  <div class="w3-center">
    <h2>Individual Stats 2016-2017</h2>
    </div>
<div class="w3-responsive w3-card-4">
<table class="w3-table w3-striped w3-bordered" id="otcindividualstatsTable">
<thead>
<tr class="w3-theme">
  <th data-type="String">Name</th>
  <th data-type="Number">Grade</th>
  <th data-type="Number">Wins</th>
  <th data-type="Number">Losses</th>
  <th data-type="Number">Win %</th>
  <th data-type="Number">TD</th>
  <th data-type="Number">OP TD</th>
  <th data-type="Number">TD%</th>
  <th data-type="Number">3 Pt. NF</th>
  <th data-type="Number">2 Pt. NF</th>
  <th data-type="Number">Reversals</th>
  <th data-type="Number">Escapes</th>
  <th data-type="Number">OP Escapes</th>
  <th data-type="Number">Escape %</th>
  <th data-type="Number">Pen. Hm.</th>
  <th data-type="Number">Pen. Opp.</th>
  <th data-type="Number">Pins</th>
  <th data-type="Number">Team Pts.</th>
</tr>
</thead>
<tbody>
<tr class="w3-white">
  <td>Laredo Bugbee</td>
  <td>9</td>
  <td>7</td>
  <td>14</td>
  <td>33.33333</td>
  <td>9</td>
  <td>24</td>
  <td>27.27273</td>
  <td>2</td>
  <td>0</td>
  <td>1</td>
  <td>6</td>
  <td>4</td>
  <td>60</td>
  <td>0</td>
  <td>0</td>
  <td>2</td>
  <td>39</td>
</tr>
<tr class="w3-gray">
  <td>Ben Naddy</td>
  <td>11</td>
  <td>38</td>
  <td>4</td>
  <td>90.4762</td>
  <td>23</td>
  <td>6</td>
  <td>79.3103</td>
  <td>8</td>
  <td>4</td>
  <td>12</td>
  <td>10</td>
  <td>36</td>
  <td>21.7391</td>
  <td>1</td>
  <td>0</td>
  <td>21</td>
  <td>255</td>
</tr>
<tr class="w3-white">
  <td>Marc Hendricks</td>
  <td>11</td>
  <td>28</td>
  <td>13</td>
  <td>68.2927</td>
  <td>96</td>
  <td>48</td>
  <td>66.6667</td>
  <td>13</td>
  <td>3</td>
  <td>7</td>
  <td>41</td>
  <td>88</td>
  <td>31.7829</td>
  <td>1</td>
  <td>2</td>
  <td>4</td>
  <td>133</td>
</tr>
<tr class="w3-gray">
  <td>Nate Hart</td>
  <td>11</td>
  <td>38</td>
  <td>4</td>
  <td>90.4762</td>
  <td>75</td>
  <td>25</td>
  <td>75</td>
  <td>15</td>
  <td>7</td>
  <td>11</td>
  <td>30</td>
  <td>50</td>
  <td>37.5</td>
  <td>1</td>
  <td>0</td>
  <td>21</td>
  <td>239</td>
</tr>
<tr class="w3-white">
  <td>Max Naddy</td>
  <td>10</td>
  <td>24</td>
  <td>16</td>
  <td>60</td>
  <td>87</td>
  <td>22</td>
  <td>79.8165</td>
  <td>11</td>
  <td>3</td>
  <td>5</td>
  <td>15</td>
  <td>62</td>
  <td>19.4805</td>
  <td>4</td>
  <td>1</td>
  <td>8</td>
  <td>135</td>
</tr>
<tr class="w3-gray">
  <td>Zane Swanson</td>
  <td>9</td>
  <td>21</td>
  <td>15</td>
  <td>58.3333</td>
  <td>22</td>
  <td>31</td>
  <td>41.5094</td>
  <td>3</td>
  <td>8</td>
  <td>11</td>
  <td>16</td>
  <td>1</td>
  <td>94.1176</td>
  <td>0</td>
  <td>7</td>
  <td>6</td>
  <td>112</td>
</tr>
<tr class="w3-white">
  <td>James Holen</td>
  <td>12</td>
  <td>15</td>
  <td>10</td>
  <td>60</td>
  <td>34</td>
  <td>21</td>
  <td>61.8182</td>
  <td>7</td>
  <td>1</td>
  <td>6</td>
  <td>21</td>
  <td>24</td>
  <td>46.6667</td>
  <td>2</td>
  <td>1</td>
  <td>3</td>
  <td>74</td>
</tr>
<tr class="w3-gray">
  <td>Alex Erlandson</td>
  <td>11</td>
  <td>18</td>
  <td>13</td>
  <td>58.0645</td>
  <td>32</td>
  <td>33</td>
  <td>49.2308</td>
  <td>6</td>
  <td>3</td>
  <td>16</td>
  <td>20</td>
  <td>18</td>
  <td>52.6316</td>
  <td>0</td>
  <td>1</td>
  <td>7</td>
  <td>107</td>
</tr>
<tr class="w3-white">
  <td>Noah Schleske</td>
  <td>9</td>
  <td>2</td>
  <td>2</td>
  <td>50</td>
  <td>3</td>
  <td>7</td>
  <td>30</td>
  <td>2</td>
  <td>0</td>
  <td>3</td>
  <td>3</td>
  <td>5</td>
  <td>37.5</td>
  <td>0</td>
  <td>0</td>
  <td>1</td>
  <td>9</td>
</tr>
<tr class="w3-gray">
  <td>Jace Leabo</td>
  <td>11</td>
  <td>20</td>
  <td>23</td>
  <td>46.5116</td>
  <td>43</td>
  <td>41</td>
  <td>51.1905</td>
  <td>6</td>
  <td>4</td>
  <td>14</td>
  <td>32</td>
  <td>45</td>
  <td>41.5584</td>
  <td>2</td>
  <td>1</td>
  <td>4</td>
  <td>70</td>
</tr>
<tr class="w3-white">
  <td>Wyatt Thorson</td>
  <td>9</td>
  <td>12</td>
  <td>22</td>
  <td>35.2941</td>
  <td>22</td>
  <td>46</td>
  <td>32.3529</td>
  <td>2</td>
  <td>4</td>
  <td>13</td>
  <td>7</td>
  <td>21</td>
  <td>25</td>
  <td>1</td>
  <td>1</td>
  <td>3</td>
  <td>53</td>
</tr>
<tr class="w3-gray">
  <td>Nathan Stavas</td>
  <td>10</td>
  <td>2</td>
  <td>2</td>
  <td>50</td>
  <td>1</td>
  <td>3</td>
  <td>25</td>
  <td>0</td>
  <td>0</td>
  <td>1</td>
  <td>1</td>
  <td>3</td>
  <td>25</td>
  <td>0</td>
  <td>0</td>
  <td>2</td>
  <td>10</td>
</tr>
<tr class="w3-white">
  <td>Ramon Lopez</td>
  <td>11</td>
  <td>17</td>
  <td>18</td>
  <td>48.5714</td>
  <td>34</td>
  <td>35</td>
  <td>49.2754</td>
  <td>5</td>
  <td>2</td>
  <td>3</td>
  <td>23</td>
  <td>23</td>
  <td>50</td>
  <td>0</td>
  <td>0</td>
  <td>10</td>
  <td>100</td>
</tr>
<tr class="w3-gray">
  <td>Nick Haugen</td>
  <td>12</td>
  <td>19</td>
  <td>25</td>
  <td>43.1818</td>
  <td>27</td>
  <td>34</td>
  <td>44.2623</td>
  <td>2</td>
  <td>2</td>
  <td>10</td>
  <td>23</td>
  <td>16</td>
  <td>58.9744</td>
  <td>0</td>
  <td>1</td>
  <td>14</td>
  <td>95</td>
</tr>
<tr class="w3-white">
  <td>RJ Ehlert</td>
  <td>11</td>
  <td>13</td>
  <td>11</td>
  <td>54.1667</td>
  <td>11</td>
  <td>5</td>
  <td>68.75</td>
  <td>0</td>
  <td>0</td>
  <td>5</td>
  <td>7</td>
  <td>6</td>
  <td>53.8462</td>
  <td>2</td>
  <td>0</td>
  <td>10</td>
  <td>81</td>
</tr>
<tr class="w3-gray">
  <td>Ben Cole</td>
  <td>12</td>
  <td>0</td>
  <td>3</td>
  <td>0</td>
  <td>0</td>
  <td>5</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>1</td>
  <td>1</td>
  <td>50</td>
  <td>0</td>
  <td>0</td>
  <td>1</td>
  <td>0</td>
</tr>
<tr class="w3-white">
  <td>Michael Fielding</td>
  <td>11</td>
  <td>5</td>
  <td>14</td>
  <td>26.3158</td>
  <td>6</td>
  <td>21</td>
  <td>22.2222</td>
  <td>0</td>
  <td>0</td>
  <td>3</td>
  <td>7</td>
  <td>12</td>
  <td>36.8421</td>
  <td>0</td>
  <td>1</td>
  <td>0</td>
  <td>24</td>
</tr>
<tr class="w3-gray">
  <td>Jacob Thompson</td>
  <td>12</td>
  <td>2</td>
  <td>5</td>
  <td>28.5714</td>
  <td>3</td>
  <td>9</td>
  <td>25</td>
  <td>3</td>
  <td>1</td>
  <td>1</td>
  <td>7</td>
  <td>2</td>
  <td>77.7778</td>
  <td>1</td>
  <td>0</td>
  <td>1</td>
  <td>16</td>
</tr>
<tr class="w3-white">
  <td>Hunter Doll</td>
  <td>10</td>
  <td>6</td>
  <td>10</td>
  <td>37.5</td>
  <td>10</td>
  <td>17</td>
  <td>37.037</td>
  <td>2</td>
  <td>0</td>
  <td>6</td>
  <td>4</td>
  <td>11</td>
  <td>26.6667</td>
  <td>1</td>
  <td>0</td>
  <td>0</td>
  <td>21</td>
</tr>
<tr class="w3-gray">
  <td>Christopher Kenyon</td>
  <td>12</td>
  <td>1</td>
  <td>2</td>
  <td>33.3333</td>
  <td>3</td>
  <td>3</td>
  <td>50</td>
  <td>0</td>
  <td>0</td>
  <td>2</td>
  <td>2</td>
  <td>3</td>
  <td>40</td>
  <td>1</td>
  <td>0</td>
  <td>1</td>
  <td>3</td>
</tr>
<tr class="w3-white">
  <td>Jackson Boyum</td>
  <td>10</td>
  <td>0</td>
  <td>1</td>
  <td>0</td>
  <td>0</td>
  <td>3</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>1</td>
  <td>3</td>
  <td>25</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
</tr>
<tr class="w3-gray">
  <td>Matt Hendricks</td>
  <td>9</td>
  <td>4</td>
  <td>7</td>
  <td>36.3636</td>
  <td>10</td>
  <td>11</td>
  <td>47.619</td>
  <td>2</td>
  <td>0</td>
  <td>1</td>
  <td>3</td>
  <td>9</td>
  <td>25</td>
  <td>2</td>
  <td>0</td>
  <td>2</td>
  <td>21</td>
</tr>
<tr class="w3-white">
  <td>Kevin Tierney</td>
  <td>11</td>
  <td>7</td>
  <td>15</td>
  <td>31.8182</td>
  <td>5</td>
  <td>24</td>
  <td>17.2414</td>
  <td>5</td>
  <td>0</td>
  <td>3</td>
  <td>7</td>
  <td>2</td>
  <td>77.7778</td>
  <td>0</td>
  <td>0</td>
  <td>1</td>
  <td>36</td>
</tr>
<tr class="w3-gray">
  <td>Cian Buehler</td>
  <td>8</td>
  <td>3</td>
  <td>6</td>
  <td>33.3333</td>
  <td>3</td>
  <td>5</td>
  <td>37.5</td>
  <td>2</td>
  <td>0</td>
  <td>4</td>
  <td>2</td>
  <td>2</td>
  <td>50</td>
  <td>0</td>
  <td>0</td>
  <td>5</td>
  <td>15</td>
</tr>
<tr class="w3-white">
  <td>Hayden Hart</td>
  <td>9</td>
  <td>12</td>
  <td>10</td>
  <td>54.5455</td>
  <td>16</td>
  <td>13</td>
  <td>55.1724</td>
  <td>2</td>
  <td>1</td>
  <td>5</td>
  <td>14</td>
  <td>13</td>
  <td>51.8519</td>
  <td>4</td>
  <td>1</td>
  <td>2</td>
  <td>48</td>
</tr>
<tr class="w3-gray">
  <td>Reed Leabo</td>
  <td>8</td>
  <td>1</td>
  <td>2</td>
  <td>33.3333</td>
  <td>1</td>
  <td>5</td>
  <td>16.6667</td>
  <td>0</td>
  <td>1</td>
  <td>0</td>
  <td>1</td>
  <td>2</td>
  <td>33.3333</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>6</td>
</tr>
<tr class="w3-white">
  <td>Daniel Ukkelberg</td>
  <td>12</td>
  <td>1</td>
  <td>0</td>
  <td>100</td>
  <td>0</td>
  <td>0</td>
  <td>100</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>6</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
</body>

And here's my javascript code That I'm linking to 

//Tyler Naddy
//1/18/17
<!-- Script for Sidenav, Tabs, Accordions, Progress bars and slideshows -->
// Side navigation
function w3_open() {
    var x = document.getElementById("mySidenav");
    x.style.width = "100%";
    x.style.textAlign = "center";
    x.style.fontSize = "50px";
    x.style.paddingTop = "10%";
    x.style.display = "block";
}
function w3_close() {
    document.getElementById("mySidenav").style.display = "none";
}

// Tabs
function openTab(evt, tabName) {
    var i, x, tablinks;
    x = document.getElementsByClassName("tab");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablink");
    for (i = 0; i < x.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " w3-red";
}

var mybtn = document.getElementsByClassName("testbtn")[0];
mybtn.click();

// Accordions
function myAccFunc(id) {
    var x = document.getElementById(id);
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
        x.previousElementSibling.className += " w3-dark-grey";
    } else {
        x.className = x.className.replace(" w3-show", "");
        x.previousElementSibling.className =
        x.previousElementSibling.className.replace(" w3-dark-grey", "");
    }
}

// Slideshows
var slideIndex = 1;

function plusDivs(n) {
slideIndex = slideIndex + n;
showDivs(slideIndex);
}

function showDivs(n) {
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length} ;
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}

showDivs(1);
// Progress Bars
function move() {
  var elem = document.getElementById("myBar");
  var width = 1;
  var id = setInterval(frame, 10);
  function frame() {
    if (width == 100) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + '%';
      document.getElementById("demoprgr").innerHTML = width * 1  + '%';
    }
  }
}

function openImg(imgName) {
  var i, x;
  x = document.getElementsByClassName("picture");
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  document.getElementById(imgName).style.display = "block";
}

(function() {
  // Javascript can only sort by string value so set up comparison functions for other types
  var comparators = { };
  comparators[typeof "string"] = function(a, b) { return a.localeCompare(b); };
  comparators[typeof 123] = function(a, b) { return a - b; };
  
  var table = document.querySelector("table");
  var tbody = table.querySelector("tbody");
  var types, data;
  
  // array of column data types. adds the click handler with sorting too
  types = Array.from(table.querySelectorAll("thead th")).map(function(th, i) {
    // basic toggle for sort order on this column
    var sorting = 0;
    // click handler
    th.addEventListener("click", function() {
      // toggle sort order
      sorting = (sorting > 0 ? -1 : +1);
      // perform the sort
    	data.sort(function(a, b) {
        // compares using whichever of the comparator functions matches the value type
      	return sorting * comparators[typeof a.cells[i]](a.cells[i], b.cells[i]);
      // and rearrange in the table
      }).forEach(function(row) {
      	tbody.appendChild(row.row);
      });
    });
    return th.attributes["data-type"].value;
  });
  // the data table itself
  data = Array.from(tbody.querySelectorAll("tr"), function(row) {
    // each entry is { row: the original <tr>, cells: [ array of values in a native form ] }
    return { row: row, cells: Array.from(row.querySelectorAll("td")).map(function(cell, i) {
      // converts the value according to the type/function from the header row
      return window[types[i]](cell.innerHTML);
    }) };
	});
})();

Now on my end my javascript file that I am linking to is located in a folder called js And the file itself is called naddymyscript.js. I have tried putting that javascript code right in a script Tag on my website and I've tried linking to it externally and both methods have not worked any help on your end would be appreciated otherwise I modified the code in JS fiddlle and it was working I just can't get it working locally on my computer.  

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.