JSFiddle - React, Tailwind, and code Playground

by VaAlina

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">        
  <table class="table">
    <thead>
      <tr>
        <th id="id">Id</th>
        <th id="name">Name</th>
        <th id="price">Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>cake</td>
        <td>23</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

thead{
  font-weight: bold !important;
  color: white;
  background-color: #DC143C;
}

JavaScript

var list = {
    data: [[1, "cake", 23], [2, "coffee", 12], [3, "book", 678]],
    test:[],
    sortByName: function(){
        list.test = list.data.sort(function(a, b){return a[1]-b[1]});
        alert(list.test.join(", "));
    },
    sortByPrice: function(){
        list.test = list.data.sort(function(a, b){return a[2]-b[2]});
        alert(list.test.join(", "));
    },
    sortById: function(){
         list.test = list.data.sort(function(a, b){return a[0]-b[0]});
         alert(list.test.join(", "));
    },
    removeAllElements: function(){
         
    },
    addAllElements: function(){
        var tbody = document.getElementsByTagName("TBODY");        
        for(var i = 0; i < list.test.length; i++){
           var tr = document.createElement("TR");//Create row.          
           for(var j = 0; j < 3; j++){
               var td = document.createElement("TD");//Create cell.             
               var text = document.createTextNode(list.test[i][j]);
               tr.appendChild(text);
               tr.appendChild(td);//Add cell.
               alert(list.test[i][j]);//test
           } 
           tbody.appendChild(tr); //Add row.
        }     
    }
};

/*Adding event listners.*/
document.getElementById("id").addEventListener("click", function(){
    list.sortById();
    list.addAllElements();
});
document.getElementById("name").addEventListener("click", function(){
    list.sortByName();
    list.addAllElements();
});
document.getElementById("price").addEventListener("click", function(){
    list.sortByPrice();
    list.addAllElements();
});

/*Run programm.*/
list.sortByName();
list.addAllElements();