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");
        var tr = document.createElement("TR");
        for(var i = 0; i < 3; i++){
        alert(list.test[i]);
           tbody.appendChild("TR"); 
           var text = document.createTextNode(list.test[i]);
           tr.appendChild(text);           
        }     
    }
};

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

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