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;
}
Related
This is my code I am selecting two columns , and then I am taking the difference of correspoding cells and creating new column, and displaying it in a single table. I want to display it as a pop-up(modal box). Like on selecting two input checkboxes the resultant table should come as a form of popup and after closing it, i can again select any checkboxes and again a table should be formed and display as popup
But when I am doing this way its is not coming as a pop and the same table is getting appended. Can anyone please help with this one?
function hidemodal() {
$("#myModal").hide();
}
const table = document.getElementById("main-table"),
checkboxes = table.querySelectorAll('.header > input[type="checkbox"]');
let columns = {};
for (let i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener("input", onInput);
}
function onInput(e) {
const input = e.target,
column = input.parentNode.cellIndex,
tds = table.querySelectorAll('td:nth-child(' + (column + 1) + ')');
if (input.checked) {
let list = [];
for (let i = 0; i < tds.length; i++) {
list[list.length] = tds[i].textContent;
}
columns[column] = list;
}
else {
delete columns[column];
}
if (Object.keys(columns).length > 1)
showDifference();
else
table.classList.remove("result");
}
function showDifference() {
var array1 = [];
var array2 = [];
var a = Object.keys(columns)[0], b = Object.keys(columns)[1]
const result = columns[a].map((el, i) => {
first = columns[a][i];
array1.push(first)
second = columns[b][i];
array2.push(second)
const regex = /\d+/;
const firstNumber = parseInt(first.match(regex));
const secondNumber = parseInt(second.match(regex));
const diff = Math.abs(firstNumber - secondNumber);
return `$${diff}`;
})
buildTable();
// var tablediff;
var modalBody = $('<div id="modalContent"></div>');
function buildTable() {
var table = document.createElement("TABLE");
table.setAttribute("id", "myTable");
document.body.appendChild(table);
for (let i = 0; i < 3; i++) {
var y = document.createElement("TR");
y.setAttribute("id", "myTr" + i)
document.getElementById("myTable").appendChild(y);
var z = document.createElement("TD");
var t = document.createTextNode(array1[i]);
var z1 = document.createElement("TD");
var s = document.createTextNode(array2[i]);
var z2 = document.createElement("TD");
var r = document.createTextNode(result[i]);
z.appendChild(t);
z1.appendChild(s);
z2.appendChild(r);
document.getElementById("myTr" + i).appendChild(z);
document.getElementById("myTr" + i).appendChild(z1)
document.getElementById("myTr" + i).appendChild(z2)
}
}
modalBody.append(table);
$(".modal-body").html(modalBody);
}
table {
border: 1px solid white;
text-align: center;
padding: 6px;
background: #e1edf9;
}
td {
border: 1px solid white;
text-align: center;
padding: 6px;
}
td:first-child,
tr:first-child {
background-color: #003a6a !important;
color: white !important;
}
.table-scroll {
position: relative;
width: 100%;
z-index: 1;
margin: auto;
overflow: auto;
}
.table-scroll table {
width: 100%;
min-width: 1280px;
margin: auto;
border-collapse: separate;
border-spacing: 0;
}
.table-wrap {
position: relative;
}
.table-scroll tr:first-child {
background: #333;
color: #fff;
position: -webkit-sticky;
position: sticky;
top: 0;
}
td:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
background: #ccc;
}
.table-scroll tfoot tr {
position: -webkit-sticky;
position: sticky;
bottom: 0;
background: #666;
color: #fff;
z-index: 4;
}
tr:first-child {
z-index: 5;
}
#media screen and (max-width: 500px) {
td:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
background: #ccc;
max-width: 140px;
}
}
.main-table:not(.result) th.result,
.main-table:not(.result) td.result {
display: none;
}
<div id="table-scroll" class="table-scroll">
<table class="data" id="main-table">
<tbody>
<tr>
<th class="header">Three</th>
<th class="header">Four<input type="checkbox" value="on" name="cb4" /></th>
<th class="header">Five<input type="checkbox" value="on" name="cb5" /></th>
<th class="header">Five<input type="checkbox" value="on" name="cb5" /></th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>12</td>
<td>22</td>
<td>32</td>
<td>34</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>7</td>
</tr>
</tbody>
</table>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" onclick="hidemodal ()">×</button>
</div>
<div class="modal-body"></div>
</div>
</div>
</div>
You are using the same table variable for #main-table and for the results table. However the results table variable is only available inside buildTable(), and when you use modalBody.append(table); outside of that function, you are moving the #main-table instead. So for your own sake, try avoid recycle variable names.
Also, you don't have to use getElementById for the element you just created via createElement()
function hidemodal() {
document.body.classList.remove("popup");
}
function showmodal() {
document.body.classList.add("popup");
}
const table = document.getElementById("main-table"),
checkboxes = table.querySelectorAll('.header > input[type="checkbox"]');
let columns = {};
for (let i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener("input", onInput);
}
function onInput(e) {
const input = e.target,
column = input.parentNode.cellIndex,
tds = table.querySelectorAll('td:nth-child(' + (column + 1) + ')');
if (input.checked) {
let list = [];
for (let i = 0; i < tds.length; i++) {
list[list.length] = tds[i].textContent;
}
columns[column] = list;
} else {
delete columns[column];
}
if (Object.keys(columns).length > 1)
showDifference();
else
table.classList.remove("result");
}
function showDifference() {
var array1 = [];
var array2 = [];
var a = Object.keys(columns)[0],
b = Object.keys(columns)[1]
const result = columns[a].map((el, i) => {
first = columns[a][i];
array1.push(first)
second = columns[b][i];
array2.push(second)
const regex = /\d+/;
const firstNumber = parseInt(first.match(regex));
const secondNumber = parseInt(second.match(regex));
const diff = Math.abs(firstNumber - secondNumber);
return `$${diff}`;
})
// var tablediff;
var modalBody = $('<div id="modalContent"></div>');
buildTable();
function buildTable() {
var modalTable = document.createElement("TABLE");
modalTable.setAttribute("id", "myTable");
modalBody.html(modalTable);
for (let i = 0; i < 3; i++) {
var y = document.createElement("TR");
y.setAttribute("id", "myTr" + i)
modalTable.appendChild(y);
var z = document.createElement("TD");
var t = document.createTextNode(array1[i]);
var z1 = document.createElement("TD");
var s = document.createTextNode(array2[i]);
var z2 = document.createElement("TD");
var r = document.createTextNode(result[i]);
z.appendChild(t);
z1.appendChild(s);
z2.appendChild(r);
y.appendChild(z);
y.appendChild(z1)
y.appendChild(z2)
}
return table;
}
// modalBody.append(table);
$(".modal-body").html(modalBody);
showmodal();
}
table {
border: 1px solid white;
text-align: center;
padding: 6px;
background: #e1edf9;
}
td {
border: 1px solid white;
text-align: center;
padding: 6px;
}
td:first-child,
tr:first-child {
background-color: #003a6a !important;
color: white !important;
}
.table-scroll {
position: relative;
width: 100%;
z-index: 1;
margin: auto;
overflow: auto;
}
.table-scroll table {
width: 100%;
min-width: 1280px;
margin: auto;
border-collapse: separate;
border-spacing: 0;
}
.table-wrap {
position: relative;
}
.table-scroll tr:first-child {
background: #333;
color: #fff;
position: -webkit-sticky;
position: sticky;
top: 0;
}
td:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
background: #ccc;
}
.table-scroll tfoot tr {
position: -webkit-sticky;
position: sticky;
bottom: 0;
background: #666;
color: #fff;
z-index: 4;
}
tr:first-child {
z-index: 5;
}
#media screen and (max-width: 500px) {
td:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
background: #ccc;
max-width: 140px;
}
}
.main-table:not(.result) th.result,
.main-table:not(.result) td.result {
display: none;
}
body:not(.popup)>.modal {
display: none;
}
body.popup> :not(.modal) {
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-o-filter: blur(1px);
-ms-filter: blur(1px);
filter: blur(1px);
}
.modal {
background-color: rgba(127, 127, 127, 0.5);
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 999;
display: flex;
}
.modal>.modal-dialog {
margin: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="table-scroll" class="table-scroll">
<table class="data" id="main-table">
<tbody>
<tr>
<th class="header">Three</th>
<th class="header">Four<input type="checkbox" value="on" name="cb4" /></th>
<th class="header">Five<input type="checkbox" value="on" name="cb5" /></th>
<th class="header">Five<input type="checkbox" value="on" name="cb5" /></th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>12</td>
<td>22</td>
<td>32</td>
<td>34</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>7</td>
</tr>
</tbody>
</table>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" onclick="hidemodal ()">×</button>
</div>
<div class="modal-body"></div>
</div>
</div>
</div>
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>
I have a table that is a timetable.
What I want is if there are two or more of the same tasks come after each other for the border between to go. (This I have done). Also i want the text to be centered in the middle of the table.
See Example for clarification:
var tds = document.querySelectorAll("td")
for (var o = 0; o < tds.length; o++) {
if ($(tds[o]).next().html() === $(tds[o]).html() && $(tds[o]).prev().html() === $(tds[o]).html()) {
$(tds[o]).css("borderRight", "none");
$(tds[o]).css("borderLeft", "none");
} else if ($(tds[o]).next().html() === $(tds[o]).html()) {
$(tds[o]).css("borderRight", "none");
} else if ($(tds[o]).prev().html() === $(tds[o]).html()) {
$(tds[o]).css("borderLeft", "none");
}
}
table {
border-collapse: collapse;
}
td {
border: 2px solid grey;
padding: 25px;
text-align: center;
}
th {
border: 2px solid grey;
padding: 25px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>1:00</th>
<th>2:00</th>
<th>3:00</th>
<th>4:00</th>
<th>5:00</th>
<th>6:00</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sleep</td>//Should Only be one "Sleep" and it should be centered through all the "Sleep td"
<td>Sleep</td>
<td>Sleep</td>
<td>Sleep</td>
<td>Sleep</td>
<td>Wake Up</td>
</tr>
</tbody>
</table>
Use colspan.
var tds = document.querySelectorAll("td")
for (var o = 0; o < tds.length; o++) {
if ($(tds[o]).next().html() === $(tds[o]).html() && $(tds[o]).prev().html() === $(tds[o]).html()) {
$(tds[o]).css("borderRight", "none");
$(tds[o]).css("borderLeft", "none");
} else if ($(tds[o]).next().html() === $(tds[o]).html()) {
$(tds[o]).css("borderRight", "none");
} else if ($(tds[o]).prev().html() === $(tds[o]).html()) {
$(tds[o]).css("borderLeft", "none");
}
}
table {
border-collapse: collapse;
}
td {
border: 2px solid grey;
padding: 25px;
text-align: center;
}
th {
border: 2px solid grey;
padding: 25px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>1:00</th>
<th>2:00</th>
<th>3:00</th>
<th>4:00</th>
<th>5:00</th>
<th>6:00</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5">Sleep</td> //Should Only be one "Sleep" and it should be centered through all the "Sleep td"
<td>Wake Up</td>
</tr>
</tbody>
Just remove all of the
<td>Sleep</td>
And put in:-
<td colspan="5">Sleep</td>
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>
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