Jump to content
ttnaddy16

Creating A Sortable Table With 28 Rows & 18 Columns

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;
    }
  }
}

 

Share this post


Link to post
Share on other sites

These things are normally done best by sorting an internal data table.

There's a fair bit I could say so how about an example instead?

Share this post


Link to post
Share on other sites

I still don't know how to work for a table with 18 columns & 28 rows. If its a table with just 2 rows i can get it to work but for my table it won't work.

Share this post


Link to post
Share on other sites

It doesn't matter how many columns or tables it has, the approach is the same.

Did you see what I did? Understand any of it? Maybe you have a question or two?

Share this post


Link to post
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.  

Share this post


Link to post
Share on other sites

If I take your HTML and my Javascript, it works.

Is any of the code working? I see you put an HTML comment into the Javascript. You know that's not valid, right?

Share this post


Link to post
Share on other sites

I finally got it working the windows onload function wasn't surrounding the function. Thank You Very Much!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

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.