smt
4/8/2014 - 3:03 PM

jsbin.cacag.css

jsbin.cacag.js
content_copyfile_download
function breakoutRankRows() {
  var table = document.querySelector('table');
  var tbody = table.querySelector('tbody');
  var inputs = table.querySelectorAll('input[type=hidden]');

  //console.log(inputs);

  var rankRows = _(inputs)
    .filter(function (el) {
      return el.value.match(/Rank$/);
    })
    .map(function (el) {
      return el.parentElement.parentElement;
    }).sortBy(function (el) {
      return el.querySelector('input[type=text]').value;
    }).valueOf();

  //console.log(rankRows);

  var newTable = document.createElement('table');
  var oldChild;

  for (var i = 0; i < rankRows.length; i++) {
    oldChild = tbody.removeChild(rankRows[i]);
    newTable.appendChild(oldChild);
  }

  newTable.classList.add('ranks');
  document.body.insertBefore(newTable, table);
}


//breakoutRankRows();
jsbin.cacag.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <table cellspacing="0" width="98%"> 
<tbody><tr class="Titles"><td width="10"><img src="/colors/teal1x1.gif" width="10" height="1"></td>
	<td>Variable</td>
	<td>Value</td>
	<td>Data Type</td>
		<td>Delete</td>
	<td width="10"><img src="/colors/teal1x1.gif" width="10" height="1"></td></tr>
<tr class="Products"><td></td><td>INVENTORYTABLE</td>
		<td>HostInventory2
		</td><td></td>
			<td></td>
		<td></td></tr>
<tr class="CLProducts"><td></td><td>LOGGING</td>
		<td>0
		</td><td></td>
			<td></td>
		<td></td></tr>
<tr class="Products"><td></td><td><input type="hidden" value="AfternoonAlloc" name="Code1">AfternoonAlloc</td>
		<td>
			<input type="text" maxlength="50" size="40" value="Declines and Expedites Only" name="Desc1"></td>
		<td><select name="DT1"><option selected="" value="0">String</option>
<option value="1">Integer</option>
<option value="2">Quantity</option>
<option value="3">Decimal</option>
</select></td>
			<td><input type="checkbox" name="Delete1" value="1"></td>
		<td></td></tr>
<tr class="CLProducts"><td></td><td><input type="hidden" value="AK-HI-PR" name="Code2">AK-HI-PR</td>
		<td>
			<input type="text" maxlength="50" size="40" value="Within state only" name="Desc2"></td>
		<td><select name="DT2"><option selected="" value="0">String</option>
<option value="1">Integer</option>
<option value="2">Quantity</option>
<option value="3">Decimal</option>
</select></td>
			<td><input type="checkbox" name="Delete2" value="1"></td>
		<td></td></tr>
<tr class="Products"><td></td><td><input type="hidden" value="AllocQueueAM" name="Code3">AllocQueueAM</td>
		<td>
			<input type="text" maxlength="50" size="40" value="5A,9A,13A" name="Desc3"></td>
		<td><select name="DT3"><option selected="" value="0">String</option>
<option value="1">Integer</option>
<option value="2">Quantity</option>
<option value="3">Decimal</option>
</select></td>
			<td><input type="checkbox" name="Delete3" value="1"></td>
		<td></td></tr>
<tr class="CLProducts"><td></td><td><input type="hidden" value="AllocQueuePM" name="Code4">AllocQueuePM</td>
		<td>
			<input type="text" maxlength="50" size="40" value="5A,4A" name="Desc4"></td>
		<td><select name="DT4"><option selected="" value="0">String</option>
<option value="1">Integer</option>
<option value="2">Quantity</option>
<option value="3">Decimal</option>
</select></td>
			<td><input type="checkbox" name="Delete4" value="1"></td>
		<td></td></tr>
<tr class="Products"><td></td><td><input type="hidden" value="ATPGroups" name="Code5">ATPGroups</td>
		<td>
			<input type="text" maxlength="50" size="40" value="ALL" name="Desc5"></td>
		<td><select name="DT5"><option selected="" value="0">String</option>
<option value="1">Integer</option>
<option value="2">Quantity</option>
<option value="3">Decimal</option>
</select></td>
			<td><input type="checkbox" name="Delete5" value="1"></td>
		<td></td></tr>
<tr class="CLProducts"><td></td><td><input type="hidden" value="ATPOneGroupPerFile" name="Code6">ATPOneGroupPerFile</td>
		<td>
			<input type="text" maxlength="50" size="40" value="N" name="Desc6"></td>
		<td><select name="DT6"><option selected="" value="0">String</option>
<option value="1">Integer</option>
<option value="2">Quantity</option>
<option value="3">Decimal</option>
</select></td>
			<td><input type="checkbox" name="Delete6" value="1"></td>
		<td></td></tr>
<tr class="Products"><td></td><td><input type="hidden" value="ATPUsesReserveItems" name="Code7">ATPUsesReserveItems</td>
		<td>
			<input type="text" maxlength="50" size="40" value="No" name="Desc7"></td>
		<td><select name="DT7"><option selected="" value="0">String</option>
<option value="1">Integer</option>
<option value="2">Quantity</option>
<option value="3">Decimal</option>
</select></td>
			<td><input type="checkbox" name="Delete7" value="1"></td>
		<td></td></tr>
<tr class="CLProducts"><td></td><td><input type="hidden" value="ExpediteAttempts" name="Code8">ExpediteAttempts</td>
		<td>
			<input type="text" maxlength="50" size="40" value="1" name="Desc8"></td>
		<td><select name="DT8"><option selected="" value="0">String</option>
<option value="1">Integer</option>
<option value="2">Quantity</option>
<option value="3">Decimal</option>
</select></td>
			<td><input type="checkbox" name="Delete8" value="1"></td>
		<td></td></tr>
<tr class="Products"><td></td><td><input type="hidden" value="InventoryExport" name="Code9">InventoryExport</td>
		<td>
			<input type="text" maxlength="50" size="40" value="STANDARD" name="Desc9"></td>
		<td><select name="DT9"><option selected="" value="0">String</option>
<option value="1">Integer</option>
<option value="2">Quantity</option>
<option value="3">Decimal</option>
</select></td>
			<td><input type="checkbox" name="Delete9" value="1"></td>
		<td></td></tr>
<tr class="CLProducts"><td></td><td><input type="hidden" value="InventorySupplyRank" name="Code10">InventorySupplyRank</td>
		<td>
			<input type="text" maxlength="50" size="40" value="3" name="Desc10"></td>
		<td><select name="DT10"><option selected="" value="0">String</option>
<option value="1">Integer</option>
<option value="2">Quantity</option>
<option value="3">Decimal</option>
</select></td>
			<td><input type="checkbox" name="Delete10" value="1"></td>
		<td></td></tr>
<tr class="Products"><td></td><td><input type="hidden" value="MaxAllocAttemps" name="Code11">MaxAllocAttemps</td>
		<td>
			<input type="text" maxlength="50" size="40" value="5" name="Desc11"></td>
		<td><select name="DT11"><option selected="" value="0">String</option>
<option value="1">Integer</option>
<option value="2">Quantity</option>
<option value="3">Decimal</option>
</select></td>
			<td><input type="checkbox" name="Delete11" value="1"></td>
		<td></td></tr>
<tr class="CLProducts"><td></td><td><input type="hidden" value="MaxSplitCount" name="Code12">MaxSplitCount</td>
		<td>
			<input type="text" maxlength="50" size="40" value="2" name="Desc12"></td>
		<td><select name="DT12"><option selected="" value="0">String</option>
<option value="1">Integer</option>
<option value="2">Quantity</option>
<option value="3">Decimal</option>
</select></td>
			<td><input type="checkbox" name="Delete12" value="1"></td>
		<td></td></tr>
<tr class="Products"><td></td><td><input type="hidden" value="ProximityRank" name="Code13">ProximityRank</td>
		<td>
			<input type="text" maxlength="50" size="40" value="1" name="Desc13"></td>
		<td><select name="DT13"><option selected="" value="0">String</option>
<option value="1">Integer</option>
<option value="2">Quantity</option>
<option value="3">Decimal</option>
</select></td>
			<td><input type="checkbox" name="Delete13" value="1"></td>
		<td></td></tr>
<tr class="CLProducts"><td></td><td><input type="hidden" value="Saturday" name="Code14">Saturday</td>
		<td>
			<input type="text" maxlength="50" size="40" value="Y" name="Desc14"></td>
		<td><select name="DT14"><option selected="" value="0">String</option>
<option value="1">Integer</option>
<option value="2">Quantity</option>
<option value="3">Decimal</option>
</select></td>
			<td><input type="checkbox" name="Delete14" value="1"></td>
		<td></td></tr>
<tr class="Products"><td></td><td><input type="hidden" value="StorePreferenceRank" name="Code15">StorePreferenceRank</td>
		<td>
			<input type="text" maxlength="50" size="40" value="2" name="Desc15"></td>
		<td><select name="DT15"><option selected="" value="0">String</option>
<option value="1">Integer</option>
<option value="2">Quantity</option>
<option value="3">Decimal</option>
</select></td>
			<td><input type="checkbox" name="Delete15" value="1"></td>
		<td></td></tr>
<tr class="CLProducts"><td></td><td><input type="hidden" value="Sunday" name="Code16">Sunday</td>
		<td>
			<input type="text" maxlength="50" size="40" value="Y" name="Desc16"></td>
		<td><select name="DT16"><option selected="" value="0">String</option>
<option value="1">Integer</option>
<option value="2">Quantity</option>
<option value="3">Decimal</option>
</select></td>
			<td><input type="checkbox" name="Delete16" value="1"></td>
		<td></td></tr>
<tr class="Products"><td></td><td><input type="text" size="20" maxlength="20" value="" name="Code17"></td>
		<td><input type="text" maxlength="50" size="40" value="" name="Desc17"></td>
		<td><select name="DT17"><option selected="" value="0">String</option>
<option value="1">Integer</option>
<option value="2">Quantity</option>
<option value="3">Decimal</option>
</select></td>
		<td></td>
		<td></td></tr>
<tr class="CLProducts"><td></td><td><input type="text" size="20" maxlength="20" value="" name="Code18"></td>
		<td><input type="text" maxlength="50" size="40" value="" name="Desc18"></td>
		<td><select name="DT18"><option selected="" value="0">String</option>
<option value="1">Integer</option>
<option value="2">Quantity</option>
<option value="3">Decimal</option>
</select></td>
		<td></td>
		<td></td></tr>
<tr class="Products"><td></td><td><input type="text" size="20" maxlength="20" value="" name="Code19"></td>
		<td><input type="text" maxlength="50" size="40" value="" name="Desc19"></td>
		<td><select name="DT19"><option selected="" value="0">String</option>
<option value="1">Integer</option>
<option value="2">Quantity</option>
<option value="3">Decimal</option>
</select></td>
		<td></td>
		<td></td></tr>
<tr class="CLProducts"><td></td><td><input type="text" size="20" maxlength="20" value="" name="Code20"></td>
		<td><input type="text" maxlength="50" size="40" value="" name="Desc20"></td>
		<td><select name="DT20"><option selected="" value="0">String</option>
<option value="1">Integer</option>
<option value="2">Quantity</option>
<option value="3">Decimal</option>
</select></td>
		<td></td>
		<td></td></tr>
</tbody></table>
  
</body>
</html>
jsbin.cacag.css
content_copyfile_download
table.ranks tr {
  background: red;
  color: white;
}