User:Amit6/my sortable table pimary 01.xhtml.css

 
 * root {background-color:-moz-dialog;color:-moz-dialogtext;font:message-box;padding-left:2em;padding-right:2em}

body {border:1px solid ThreeDShadow;-moz-border-radius:10px;padding:3em;min-width:30em;max-width:65em;margin:4em auto;background-color:-moz-field;color:-moz-fieldtext} h1 {font-size:160%;margin:0 0 .6em;border-bottom:1px solid ThreeDLightShadow;font-weight:normal} a {text-decoration:none} a:hover {text-decoration:underline} p {font-size:110%} body[dir="rtl"] #UI_goUp {float:right} body[dir="rtl"] #UI_showHidden {float:left} table {clear:both;width:90%;margin:0 auto} thead {font-size:130%} th:last-child {text-align:center} th:hover >a {text-decoration:underline} tbody >tr:hover {outline:1px solid ThreeDLightShadow;-moz-outline-radius:.3em} td:not(:first-child) {width:0} .up {padding:0 .5em;-moz-margin-start:20px} .up::before {-moz-margin-end:4px;-moz-margin-start:-20px;vertical-align:middle;content:url(chrome://global/skin/dirListing/up.png)} .dir::before {content:url(chrome://global/skin/dirListing/folder.png)} <![CDATA[
 * 1) UI_goUp {margin-top:0;float:left}
 * 1) UI_showHidden {margin-top:0;float:right}
 * root {font-family:sans-serif}

img {border:0} th {text-align:start;white-space:nowrap} th >a {color:inherit} table[order] >thead >tr >th {cursor:pointer} table[order] >thead >tr >th::after {display:none;width:.8em;-moz-margin-end:-.8em;text-align:end} table[order="asc"] >thead >tr >th::after {content:"\2191"} table[order="desc"] >thead >tr >th::after {content:"\2193"} table[order][order-by="0"] >thead >tr >th:first-child >a,table[order][order-by="1"] >thead >tr >th:first-child + th >a,table[order][order-by="2"] >thead >tr >th:first-child + th + th >a {text-decoration:underline} table[order][order-by="0"] >thead >tr >th:first-child::after,table[order][order-by="1"] >thead >tr >th:first-child + th::after,table[order][order-by="2"] >thead >tr >th:first-child + th + th::after {display:inline-block} table.remove-hidden >tbody >tr.hidden-object {display:none} td >a {display:inline-block} th:first-child {-moz-padding-end:2em} th:first-child + th {-moz-padding-end:1em} td:first-child + td {text-align:end;-moz-padding-end:1em;white-space:nowrap} td:first-child + td + td {-moz-padding-start:1em;-moz-padding-end:.5em;white-space:nowrap} td:last-child {-moz-padding-start:.5em;white-space:nowrap} @-moz-document url-prefix(gopher://) { td {white-space:pre !important;font-family:monospace} table {direction:ltr} } .symlink {font-style:italic} .dir,.symlink,.file {-moz-margin-start:20px} .dir::before,.file >img {-moz-margin-end:4px;-moz-margin-start:-20px;vertical-align:middle} .dir::before {content:url(resource://gre/res/html/folder.png)} ]]> <![CDATA[ var gTable, gOrderBy, gTBody, gRows, gUI_showHidden; document.addEventListener("DOMContentLoaded", function { gTable = document.getElementsByTagName("table")[0]; gTBody = gTable.tBodies[0]; if (gTBody.rows.length< 2) return; gUI_showHidden = document.getElementById("UI_showHidden"); var headCells = gTable.tHead.rows[0].cells, hiddenObjects = false; function rowAction(i) { return function(event) { event.preventDefault; orderBy(i); } } for (var i = headCells.length - 1; i >= 0; i--) { var anchor = document.createElement("a"); anchor.href = ""; anchor.appendChild(headCells[i].firstChild); headCells[i].appendChild(anchor); headCells[i].addEventListener("click", rowAction(i), true); } if (gUI_showHidden) { gRows = Array.slice(gTBody.rows); hiddenObjects = gRows.some(function (row) row.className == "hidden-object"); } gTable.setAttribute("order", ""); if (hiddenObjects) { gUI_showHidden.style.display = "block"; updateHidden; } }, "false"); function compareRows(rowA, rowB) { var a = rowA.cells[gOrderBy].getAttribute("sortable-data") || ""; var b = rowB.cells[gOrderBy].getAttribute("sortable-data") || ""; var intA = +a; var intB = +b; if (a == intA && b == intB) { a = intA; b = intB; } else { a = a.toLowerCase; b = b.toLowerCase; } if (a< b) return -1; if (a >b) return 1; return 0; } function orderBy(column) { if (!gRows) gRows = Array.slice(gTBody.rows); var order; if (gOrderBy == column) { order = gTable.getAttribute("order") == "asc" ? "desc" : "asc"; } else { order = "asc"; gOrderBy = column; gTable.setAttribute("order-by", column); gRows.sort(compareRows); } gTable.removeChild(gTBody); gTable.setAttribute("order", order); if (order == "asc") for (var i = 0; i< gRows.length; i++) gTBody.appendChild(gRows[i]); else for (var i = gRows.length - 1; i >= 0; i--) gTBody.appendChild(gRows[i]); gTable.appendChild(gTBody); } function updateHidden { gTable.className = gUI_showHidden.getElementsByTagName("input")[0].checked ? "" : "remove-hidden"; } ]]>  Sortable Table  Index of file:///D:/AMIT/SVG Inkscape Up to higher level directory  Show hidden objects