使用javascript按具有高，中，低值的列对html表进行排序

Question

I am trying to sort a table using javascript but not in the traditional numerical or alphabetical sort method. Each Table row has 3 TD's. The first is the name second is a level (high, medium, low or blank) and the third is also a level (high, medium, low or blank). I am trying to sort the table based on the levels value , high, medium or low, and sending the empty TD's to the bottom.

I normally work with PHP so I am a little weak when it comes to javascript. Basics of what I am trying to do:

Count the number of tr's exclude the first one (Because its the header) for each tr get the innerHTML of the second td. Compare each tds innerHTML and arrange them from High to low putting the empty ones last. If the header is clicked again reverse.

I think i pretty much have it worked out but I get stuck when it comes to switching the elements order.

<table id="myTable2">
<tr>
   <th>Food/Beverage</th> 
   <th onclick="sortTable(1)">Alkalizing Level</th>
   <th onclick="sortTable(2)">Acidic Level</th>
</tr>
<tr>
    <td>Ale (Dark)</td>
    <td></td>
    <td>High</td>
</tr>
<tr>
    <td>Ale (Pale)</td>
    <td></td>
    <td>High</td>
</tr>
<tr>
   <td>Alkaline, Ionized Water</td>
    <td>High</td>
   <td></td>
</tr>
<tr>
   <td>Almond Butter</td>
   <td>Medium</td>
   <td></td>
</tr>
<tr>
   <td>Almond Milk (unsweetened)</td>
   <td>Low</td>
   <td></td>
</tr>
<tr>
  <td>Almonds</td>
  <td>Medium</td>
  <td></td>
</tr>
<tr>
  <td>Amaranth Seeds</td>
  <td>Low</td>
  <td></td>
</tr>
<tr>
   <td>Apple Cider Vinegar</td>
   <td></td>
   <td>Low</td>
</tr>
<tr>
  <td>Apple Juice</td>
  <td></td>
  <td>High</td>
</tr>
<tr>
  <td>Apple Pie</td>
  <td></td>
  <td>High</td>
 </tr>
<tr>
  <td>Apples</td>
  <td></td>
  <td>Medium</td>
</tr>
<tr>
  <td>Apricots</td>
  <td></td>
  <td>Medium</td>
</tr>
<tr>
  <td>Apricots (Dried)</td>
  <td></td>
  <td>High</td>
  </tr>
</table>

JS

<script>
table = document.getElementById("myTable2");    
rows = table.rows;
i = 1;
count = 0;
while(i < rows.length){
alkLevel = rows[i].getElementsByTagName("TD")[1].innerHTML;
alkLevelNext = rows[i+1].getElementsByTagName("TD")[1].innerHTML;
var alkLevelPosition = 0;

i++;
if(alkLevel === "High"){
    alkLevelPosition += 1;

}
if (alkLevel === "Medium"){
    alkLevelPosition += 2;

    }
if(alkLevel === "Low"){
    alkLevelPosition += 3;

   }
if(alkLevel === ""){
    alkLevelPosition += 4;

   }



    if (alkLevelPosition > alkLevelNext) {

      //shouldSwitch = true;

      //break;
    }

 }
</script>

Answer 1

Here is an approach to getting the table sort you are looking for.

Added click event listeners to the table headers (rather than the inline onclick approach), then determined which column controls the sort using cellIndex , and included a sort function that handles the high, medium, low scoring properly.

Each time a header is clicked, all the table rows (except the header row) are removed, sorted, and then appended in the new order (added thead and tbody elements to simplify the selections) - in addition a class indicating the direction of the sort is added to the corresponding header element so that the next sort can be reversed.

Also, added alpha sort to the first table column as a bonus (just to simplify element selection and attaching the event listeners).

 const headings = document.querySelectorAll('#myTable th'); const tbody = document.querySelector('#myTable tbody'); const sortRows = (order, i) => { const rows = document.querySelectorAll('#myTable tbody tr'); if (i === 0) { if (order === 'asc') { return Array.from(rows).sort(); } else { return Array.from(rows).sort().reverse(); } } else { return Array.from(rows).sort((a, b) => { const aval = a.cells[i].textContent; const bval = b.cells[i].textContent; let s = 0; if (aval === bval) { s = 0; } else if (aval === 'High') { s = 1; } else if (bval === 'High') { s = -1; } else if (aval === 'Medium') { s = 1; } else if (bval === 'Medium') { s = -1; } else if (aval === 'Low') { s = 1; } else if (bval === 'Low') { s = -1; } if (order === 'desc') { s *= -1; } return s; }); } }; for (const heading of headings) { heading.addEventListener('click', (event) => { const fragment = document.createDocumentFragment(); const elem = event.currentTarget; let order = 'asc'; if (elem.classList.contains('asc')) { order = 'desc'; elem.classList.remove('asc'); elem.classList.add('desc'); } else { elem.classList.remove('desc'); elem.classList.add('asc'); } for (const s of sortRows(order, elem.cellIndex)) { fragment.appendChild(s); } while (tbody.firstChild) { tbody.removeChild(tbody.firstChild); } tbody.appendChild(fragment); }); }

 th:hover { cursor: pointer; }

 <table id="myTable"> <thead> <tr> <th>Food/Beverage</th> <th>Alkalizing Level</th> <th>Acidic Level</th> </tr> </thead> <tbody> <tr> <td>Ale (Dark)</td> <td></td> <td>High</td> </tr> <tr> <td>Ale (Pale)</td> <td></td> <td>High</td> </tr> <tr> <td>Alkaline, Ionized Water</td> <td>High</td> <td></td> </tr> <tr> <td>Almond Butter</td> <td>Medium</td> <td></td> </tr> <tr> <td>Almond Milk (unsweetened)</td> <td>Low</td> <td></td> </tr> <tr> <td>Almonds</td> <td>Medium</td> <td></td> </tr> <tr> <td>Amaranth Seeds</td> <td>Low</td> <td></td> </tr> <tr> <td>Apple Cider Vinegar</td> <td></td> <td>Low</td> </tr> <tr> <td>Apple Juice</td> <td></td> <td>High</td> </tr> <tr> <td>Apple Pie</td> <td></td> <td>High</td> </tr> <tr> <td>Apples</td> <td></td> <td>Medium</td> </tr> <tr> <td>Apricots</td> <td></td> <td>Medium</td> </tr> <tr> <td>Apricots (Dried)</td> <td></td> <td>High</td> </tr> </tbody> </table>

Answer 2

So it sounds like you just need some help interacting with the DOM (Document Object Model). Looking at what you've written, it looks good so far, but you haven't done anything to actually change the order in which the tags are rendered.

There are numerous libraries that can do this for you, but I'll recommend doing a little bit of research into JavaScript yourself to learn how to actually manipulate the DOM (considering it's fundamental to what JavaScript does in the browser). As a hint, I'll suggest to break the task down into steps that the browser will need to perform:

1. Isolate the row object (everything between <tr></tr> ) in memory from the DOM.
2. Remove the row object from the DOM.
3. Re-insert the row object into the DOM at the right place.

This link from W3Schools provides a good example of how to do exactly that: https://www.w3schools.com/howto/howto_js_sort_table.asp

They also have a number of tutorials and stuff that will help you build more proficiency in both HTML and JavaScript, and also CSS (which is really important for front-end stuff). Best of luck! Let us know if you have any questions!