Develop Reference

jquery excel like filter plugin

I am trying to make excel like filtering for my dynamic table. I am using this jquery plugin https://github.com/chestercharles/excel-bootstrap-table-filter. I'm using it because it resembles excel filters.
I tried it on non dynamic table coded in html everything worked good. But when I tried to implement the loading from database (php, MSSQL) it gives me this.
tds[selectedLists[j].column] is undefined
Error is in this particular function:
FilterCollection.prototype.updateRowVisibility = function (filterMenus, rows, ths) {
var showRows = rows;
var hideRows = [];
var selectedLists = filterMenus.map(function (filterMenu) {
return {
column: filterMenu.column,
selected: filterMenu.inputs.filter(function (input) {
return input.checked;
}).map(function (input) {
return input.value.trim().replace(/ +(?= )/g, '');
})
};
});
for (var i = 0; i < rows.length; i++) {
var tds = rows[i].children;
for (var j = 0; j < selectedLists.length; j++) {
var content = tds[selectedLists[j].column].innerText.trim().replace(/ +(?= )/g, '');
if (selectedLists[j].selected.indexOf(content) === -1) {
$(rows[i]).hide();
break;
}
$(rows[i]).show();
}
}
};
Does anyone have an idea why is this happening and how to correct it.

You don't require jquery to filter here is an example:
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
#myInput {
background-image: url('/css/searchicon.png');
/* Add a search icon to input */
background-position: 10px 12px;
/* Position the search icon */
background-repeat: no-repeat;
/* Do not repeat the icon image */
width: 100%;
/* Full-width */
font-size: 16px;
/* Increase font-size */
padding: 12px 20px 12px 40px;
/* Add some padding */
border: 1px solid #ddd;
/* Add a grey border */
margin-bottom: 12px;
/* Add some space below the input */
}
#myTable {
border-collapse: collapse;
/* Collapse borders */
width: 100%;
/* Full-width */
border: 1px solid #ddd;
/* Add a grey border */
font-size: 18px;
/* Increase font-size */
}
#myTable th,
#myTable td {
text-align: left;
/* Left-align text */
padding: 12px;
/* Add padding */
}
#myTable tr {
/* Add a bottom border to all table rows */
border-bottom: 1px solid #ddd;
}
#myTable tr.header,
#myTable tr:hover {
/* Add a grey background color to the table header and on hover */
background-color: #f1f1f1;
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
</table>

Crosshair highlight for table on hover

I have the code below that works perfect for crosshair function. This is fine, however wondering if there is a way to stop the highlight beyond the cursor (hover).
For example, instead of a "cross" shape highlight you end up with a backward "L" shape highlight. So instead of highlighting the whole row & column it only highlights column 3 down to row 2 and row 2 only to column 3. No extended highlight. Hope that makes sense?
Here is my css code:
table {
border-collapse: collapse;
overflow: hidden;
z-index: 1;
}
.permissions table,
th,
td {
border: 2px solid #ccc;
width:90px;
height:90px;
text-align:center;
vertical-align:middle;
font-size:13px;
}
td, th, .row, .col, .ff-fix {
cursor: pointer;
position: relative;
}
tr, col {
border: 1px solid black;
}
td:hover {
background-color:red;
}
td:hover:first-child {
background-color:red;
}
td:hover:nth-child(3n) {
background-color:red;
}
tr:last-child td:hover {
background-color:red;
}
td:hover::before,
.row:hover::before,
.ff-fix:hover::before {
background-color: #ffa;
content: '\00a0';
height: 100%;
left: -5000px;
position: absolute;
top: 0;
width: 10000px;
z-index: -1;
}
td:hover::after,
.col:hover::after,
.ff-fix:hover::after {
background-color: #ffa;
content: '\00a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
z-index: -1;
}
Here is my html code:
<table>
<col /><col /><col />
<tr>
<th class="col">First Name</th>
<th class="col">Middle Name</th>
<th class="col">Last Name</th>
</tr>
<tr>
<td>Peter</td>
<td>Jeffery</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Marie</td>
<td>Griffin</td>
</tr>
<tr>
<td>Margie</td>
<td>Ann</td>
<td>Thatcher</td>
</tr>
</table>

Following the logic of your CSS, you apply a full-width ::before and a full-height ::after which are displayed over the table. To adjust how these are displayed (a cross vs a "backward L"), adjust the corresponding horizontal and vertical positioning.
Try replacing your td:hover::before and td:hover::after selectors with the following to display the highlighting as a "backward L". Note the positioning is set using right and bottom rule sets, as opposed to your original positioning using left and top.
td:hover::before,
.row:hover::before,
.ff-fix:hover::before {
background-color: #ffa;
content: '\00a0';
height: 100%;
right: 90px;
position: absolute;
top: 0;
width: 10000px;
z-index: -1;
}
td:hover::after,
.col:hover::after,
.ff-fix:hover::after {
background-color: #ffa;
content: '\00a0';
height: 10000px;
left: 0;
position: absolute;
bottom: 90px;
width: 100%;
z-index: -1;
}
See how it looks in this JSFiddle.

I know this is old, but here's a method using Javascript. I prefer this method because it allows for custom backgrounds, and doesn't require CSS workarounds.
HTML:
<table id="hoverTable">
<thead>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</thead>
<tbody>
<tr>
<td>Item</td>
<td>Item</td>
<td>Item</td>
<td>Item</td>
</tr>
<tr>
<td>Item</td>
<td>Item</td>
<td>Item</td>
<td>Item</td>
</tr>
<tr>
<td>Item</td>
<td>Item</td>
<td>Item</td>
<td>Item</td>
</tr>
<tr>
<td>Item</td>
<td>Item</td>
<td>Item</td>
<td>Item</td>
</tr>
</tbody>
</table>
SCSS:
body {
background:grey;
}
.hoverHighlight {
background-color:yellow !important;
cursor:default;
}
#hoverTable {
font-family:arial;
border-spacing:0;
border-collapse: collapse;
th, td {
border:2px solid black;
text-align:center;
padding:5px;
margin:0;
}
th {
background:#1167b1;
color:white;
}
td {
text-align:center;
background:#d0efff;
}
}
Javascript:
window.addEventListener('load', function () {
addHoverEventsAndClasses();
})
function toggleHighlight(element, trueOrFalse) {
const currentRow = returnCurRow(element);
const index = element.currentTarget.cellIndex;
const table = document.getElementById('hoverTable').rows;
for (var i = 0; i < table.length; i++) {
const data = table[i];
const cells = data.querySelectorAll(".cell");
if(data.rowIndex === currentRow) {
cells.forEach((td) => {
trueOrFalse ? td.classList.add("hoverHighlight") : td.classList.remove("hoverHighlight");
});
}
cells.forEach((cell) => {
if(cell.cellIndex === index) {
trueOrFalse ? cell.classList.add("hoverHighlight") : cell.classList.remove("hoverHighlight");
}
});
}
};
function addHoverEventsAndClasses() {
const mainTableTDs = document.querySelectorAll("#hoverTable td");
const mainTableTRs = document.querySelectorAll("#hoverTable tr");
//Dynamically add class names to each row and cell to target
addClass(mainTableTDs, "cell");
addClass(mainTableTRs, "row");
mainTableTDs.forEach((td) => {
td.addEventListener("mouseenter", highlightCol);
td.addEventListener("mouseleave", removeHighlightCol);
});
}
//Helper function for adding highlight classes
function addClass(el, cl) {
el.forEach((child) => {
child.classList.add(cl);
});
};
//Toggle highlight functions. Did it this way so multiple arguments could be passed
function highlightCol(e) {
toggleHighlight(e, true);
}
function removeHighlightCol(e) {
toggleHighlight(e, false);
}
//Grab the current row
const returnCurRow = (e) => {
return e.currentTarget.parentElement.rowIndex;
}

Trying to Fix the (Auto Search & Auto Sort ) Code with my current HTML code

I need some help, actually I am stuck with this school project. I am trying to use the attached code, creating an auto-search website. Initially i have trouble with sorting out the tables, but eventually was fixed. However, i still have the Auto Sort issue. If i search for something, e.g. i search for "1", a list of "1" will appear. However, i wanted the page to auto sort based on the highest value to the lowest (descending). Here are the edited codes: http://plnkr.co/edit/HeFy7mONHCJDweqi03Zp?p=preview
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL ll a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL li a.header {
background-color: #e2e2e2;
cursor: default;
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
</style>
</head>
<body>
<h2>My Phonebook</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
<table border="0">
<tr>
<td><li>2000</li></td>
<td><ll>Hotmail</ll></td>
</tr>
<tr>
<td><li>3000</td>
<td><ll>Hotmail</ll></td>
</tr>
<tr>
<td><li>1000</li></td>
<td><ll>Hotmail</ll></td>
</tr>
<tr>
<td><li>1500</li></td>
<td><ll>Hotmail</ll></td>
</tr>
<tr>
<td><li>1400</li></td>
<td><ll>Hotmail</ll></td>
</tr>
<tr>
<td><li>2500</li></td>
<td><ll>Hotmail</ll></td>
</tr>
</table>
</ul>
<script>
function myFunction() {
var input, filter, ul, li, ll, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
ll = ul.getElementsByTagName("ll");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
</body>
</html>

So am I right that you want to search for a Number (e.g. 2000) and the result should be: 2000 / Hotmail (matching your number)?
Edit: I saw u re not setting the display style for your 'll' elements.
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
ll[i].style.display = ""; // <- this is new
} else {
li[i].style.display = "none";
ll[i].style.display = "none"; // <- this is new
}}
Here is the live result: http://plnkr.co/edit/HeFy7mONHCJDweqi03Zp?p=info

Jquery/TinySort Shifting Entire DIV Container

I am trying to setup a very simple way to sort content. I found TinySort and it seems to be able to do the job, however I need the sorting to move the entire container div not just rearrange the content.
Essentially, I have set up links to activate the sorting function and they are working to sort the spans I have it looking for, however it moves the spans around within the divs containing them.
I built a simply JSFIDDLE to display my struggle.
https://jsfiddle.net/og6jfLjf/
When you sort by Price the prices move and are in order, however they didn't pull the containers with them. They just moved within each container.
$(document).ready(function() {
$(".price-sort").click(function () {
tinysort("span.price");
});
$(".title-sort").click(function () {
tinysort("span.title");
});
});
div{
width: 100px;
height:100px;
background-color: #000;
color: #fff;
margin:10px;
}
#div1{
background-color:#666;
}
#div4{
background-color:#aaa;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.2.2/tinysort.js"></script>
<div id="div4"><span class="title">Title 1</span> - $<span class="price">5</span></div>
<div id="div1"><span class="title">Title 3</span> - $<span class="price">4</span></div>
<div id="div2"><span class="title">Title 2</span> - $<span class="price">6</span></div>
Sort By Price |
Sort By Title |

Solved the problem. I wasn't telling the function to include the div. So I adjusted the script to sort the divs based on the span within them. Here is a working JSFIDDLE to show it.
https://jsfiddle.net/oym96zL5/
$(document).ready(function() {
$(".price-sort").click(function () {
tinysort('div','span.price');
});
$(".title-sort").click(function () {
tinysort('div','span.title');
});
});

You can make a table, it's easier if you have a lot of data. Click the "Item" header and the "Price" header to sort the rows.
$(document).ready(function() {
var table = document.getElementById('xtable'),
tableHead = table.querySelector('thead'),
tableHeaders = tableHead.querySelectorAll('th'),
tableBody = table.querySelector('tbody');
tableHead.addEventListener('click', function(e) {
var tableHeader = e.target,
textContent = tableHeader.textContent,
tableHeaderIndex, isAscending, order;
if (textContent !== 'add row') {
while (tableHeader.nodeName !== 'TH') {
tableHeader = tableHeader.parentNode;
}
tableHeaderIndex = Array.prototype.indexOf.call(tableHeaders, tableHeader);
isAscending = tableHeader.getAttribute('data-order') === 'asc';
order = isAscending ? 'desc' : 'asc';
tableHeader.setAttribute('data-order', order);
tinysort(tableBody.querySelectorAll('tr'), {
selector: 'td:nth-child(' + (tableHeaderIndex + 1) + ')',
order: order
});
}
});
});
table.blue {
padding: 0;
box-shadow: 0 1px 9px 1px #ccc;
border-radius: 6px;
margin: 20px auto;
}
.blue th {
color: #FFF;
background: #2C7EDB;
padding: 10px;
text-align: center;
vertical-align: middle;
}
.blue tr:nth-child(odd) {
background-color: #333;
color: #FFF;
}
.blue tr:nth-child(even) {
background-color: #D3E9FF;
color: #333;
}
.blue td {
border-style: solid;
border-width: 1px;
border-color: #264D73;
padding: 5px;
text-align: left;
vertical-align: top;
}
.blue thead th:first-child {
border-top-left-radius: 6px;
}
.blue thead th:last-child {
border-top-right-radius: 6px;
}
.blue tbody tr:last-child th:first-child {
border-bottom-left-radius: 6px;
}
.blue tbody tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
.blue tbody tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.2.2/tinysort.js"></script>
<table class="blue" id="xtable">
<thead>
<tr>
<th data-order="asc">
<a>Item
</a>
</th>
<th>Qty
</th>
<th data-order="asc"><a>Price</a> </th>
<th>Desc</th>
</tr>
</thead>
<tbody>
<tr> <td> Porche </td><td>1</td> <td> $100, 000.00 </td><td>Sports car</td> </tr>
<tr><td>Toilet Paper</td> <td> 5 </td><td>$50.00</td> <td> 8 rolls </td></tr>
<tr> <td> Laptop </td><td>1</td> <td> $600.00 </td><td>HP i7 12GB 1TB</td> </tr>
</tbody>
</table>

Main row heading colours when odd/even CSS in place

I have an expand/collapse table that automatically adjusts the odd/even row colours (dark grey and light grey) when expanding/collapsing..
What I am trying to achieve is that for some particular rows, I need to apply a background-colour (the class I used for this is mainRow).. However, because of my Javascript functions, I believe this is making the CSS to not perform as expected.
Here is my fiddle: http://jsfiddle.net/oampz/JNQx4/1/
HTML:
<table class="tbl tbl--highlight stripes half-mb">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Height</th>
<th>Weight</th>
</tr>
</thead>
<tbody>
<tr class="mainRow">
<td class="ShowMe">+ 0000111</td>
<td>0000111</td>
<td>0000111</td>
<td>0000111</td>
</tr>
<tr id="itsHidden" class="visuallyhidden">
<td>0000222</td>
<td>0000222</td>
<td>0000222</td>
<td>0000222</td>
</tr>
<tr>
<td>0000333</td>
<td>0000333</td>
<td>0000333</td>
<td>0000333</td>
</tr>
<tr>
<td>0000444</td>
<td>0000444</td>
<td>0000444</td>
<td>0000444</td>
</tr>
<tr class="mainRow">
<td class="ShowMe">+ 0000555</td>
<td>0000555</td>
<td>0000555</td>
<td>0000555</td>
</tr>
<tr id="itsHidden2" class="visuallyhidden">
<td>0000666</td>
<td>0000666</td>
<td>0000666</td>
<td>0000666</td>
</tr>
<tr>
<td>0000777</td>
<td>0000777</td>
<td>0000777</td>
<td>0000777</td>
</tr>
</tbody>
</table>
CSS:
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
th {
min-width: 22px;
}
.stripes tbody > tr.odd {
background: #f2f2f2;
}
.stripes li:nth-child(2n) {
background: #f2f2f2;
}
.tbl {
border: 1px solid #d1d1d1;
font-size: 12px;
font-size: 0.75rem;
line-height: 2;
clear: both;
}
.tbl th, .tbl td {
padding: 3px;
text-align: left;
border-right: 1px solid #d1d1d1;
}
.tbl th {
border-bottom: 1px solid #d1d1d1;
}
.tbl--highlight tbody tr:hover {
background: #d4e8fc;
cursor: pointer;
}
.tbl--input td {
overflow: hidden;
}
.half-mb {
margin: 0 0 12px 0;
}
.visuallyhidden {
display: none;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
display: block;
}
.mainRow {
background-color: #0c5cac;
}
Javascript:
$(function(){
function stripeTable(){
$("table.stripes tr").removeClass("odd");
$("table.stripes tr:visible:odd").addClass("odd");
}
stripeTable();
$(".ShowMe").click(function() {
$("#itsHidden").toggleClass("visuallyhidden");
$("#itsHidden2").toggleClass("visuallyhidden");
stripeTable();
});
});
Any help appreciated

Unsure about what is really your problem.
If it is that you want your mainRow rows to be always blue, it's just a problem of specifity in your CSS. Both odd class and mainRow class set a background, and the odd selector has more specifity.
The easy solution is to add an important in the later
.mainRow {
background-color: #0c5cac !important;
}
There are people that say that using !important is a bad habit. But, as everything in life, I think that sometimes it is the easier way to solve an issue, and this is probably one of those cases.
updated fiddle