Array Sorter 1.0

http://stackoverflow.com/questions/37058963/dynamic-table-insert-items-in-cells-sorted-corresponding-to-thead/37125050#37125050

by dixalex

HTML

<table id="tblGrid">
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
  </tr>
</table>

CSS

td,
th {
  border: 1px solid #111;
  padding: 6px;
}

th {
  font-weight: 700;
}

span.pull-right {
  float: right;
  text-align: right;
}

.a,
.A {
  background-color: #ACE;
}

.b,
.B {
  background-color: #FAF;
}

.c,
.C {
  background-color: #BAB;
}

.d,
.D {
  background-color: #ECA;
}

.targetFound {
  border: solid 2px red;
}

JavaScript

var ingredients = [];

function addIngredToList(id, name, price, categ) {
  var item = [];
  item.push(id);
  item.push(name);
  item.push(price);
  item.push(categ);
  ingredients.push(item);
}

addIngredToList(1, "Ooo", 8, "a");
addIngredToList(7, "Pppp", 10, "b");
addIngredToList(12, "Kkkk", 6, "c");
addIngredToList(2, "Ffff", 8, "a");
addIngredToList(4, "Ssss", 10, "b");
addIngredToList(15, "Vvvv", 6, "c");
addIngredToList(5, "Iiii", 10, "b");
addIngredToList(21, "Llll", 6, "c");
addIngredToList(22, "Mmmm", 9, "a");
addIngredToList(7, "Bbbb", 12, "b");
addIngredToList(8, "Eeee", 8, "b");
addIngredToList(9, "Gggg", 6, "c");
addIngredToList(10, "Cccc", 6, "c");
addIngredToList(11, "Aaaa", 6, "c");
addIngredToList(6, "Nnnn", 10, "b");
addIngredToList(3, "Zzzz", 8, "a");
addIngredToList(13, "Mmmm", 6, "c");
addIngredToList(14, "Rrrr", 6, "c");
addIngredToList(17, "Hhhh", 5, "d");
addIngredToList(18, "Uuuu", 5, "d");
addIngredToList(19, "Qqqq", 5, "d");
addIngredToList(20, "Xxxx", 5, "d");

//Create Rows Empty Rows and TDs with appropiate classes in each column
for (i = 0, z = ingredients.length; i < z; i++) {
  var emptyRow = "<tr class='emptyRow'></tr>";
  $('table#tblGrid').append(emptyRow);
  emptyRowSelector = $('tr.emptyRow');
  for (c = 0, b = ingredients[i].length; c < b; c++) {
    var columnID = " " + $('table#tblGrid').find('th').eq(c).text().toLowerCase().toString();
    var emptyTD = "<td colspan='2' class='emptyTD" + columnID + "'></td>";
    emptyRowSelector.eq(i).append(emptyTD);
  }
}

//Create a TD  with ingredient array attributes.
var $rowScanner = $('table#tblGrid').find('tr').not($('tr:eq(0)'));
var $headerScanner = $('table#tblGrid').find('tr:eq(0) th');

for (g = 0, e = $rowScanner.length; g < e; g++) {
  var idCol = ingredients[g][0];
  var nameCol = ingredients[g][1];
  var priceCol = ingredients[g][2];
  var categCol = ingredients[g][3];

  var tdCell = "<td colspan='2' data-id='" + idCol + "' data-catg='" + categCol + "' class='" +...