After refresh, I wanna see a green row on clicked one. Please help me.
$('.clickway').on('click', function(){
$(this).closest("tr").css('background-color','green');
localStorage.setItem("nanaxi", true);
});
});
$(document).ready(function(){
$('.button').on('click', function(){
$(this).closest("tr").css('background-color','green');
localStorage.setItem("nanaxi", true);
});
}); ```
For the purposes of the following I needed to add some unique means of identifying each table row ( though in your fiddle there is only 1 row of data but I suspect there should be many ) because id="lr-{{ listing.owner_avatar }}-{{ listing.owner_name }}" cannot be equated without the correct supporting libraries/data. So - I elected to add a dataset attribute that takes the name of the user ( presumably obtainable using {{ listing.owner_name }} ? )
I made the assumption that more than one row might be active at any one time and should be restored to such a state upon page reload. The following is all vanilla Javascript - no doubt you can convert to jQuery code if required but as I don't use it I can offer no guidance there.
The javascript has explanatory comments throughout but in essence there is an event listener bound to each table-cell within the main table body. The listener finds the table row ( n.parentNode etc ) and uses the dataset attribute in this case as a key in the json stored within localStorage.
The localStorage is read on page load and these name keys are processed to find any active table-rows.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title></title>
<style>
#main-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 5px;
font-size: 14px;
background-color:black;
}
#main-table tbody {
background-color: #18181a;
}
#main-table th, #main-table td{
padding: 4px;
}
#main-table tr:hover {
background-color: rgb(43, 43, 43);
}
#main-table th {
background-color: #18181a;
}
#main-table a {
color:#ffffff;
}
#main-table .avatar-cell {
background-size: 48px !important;
background-position: center !important;
height: 48px;
width: 48px;
padding: 1px;
cursor: pointer;
}
#main-table .item-cell {
background-size: 48px !important;
background-position: center !important;
height: 48px;
width: 48px;
padding: 1px;
}
#main-table .copy-text-button {
display: inline-block;
border-radius: 4px;
background-color: green;
border: none;
color: #FFFFFF;
text-align: center;
padding: 5px;
width: 50px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
#china {
background: url(https://lipis.github.io/flag-icon-css/flags/4x3/cn.svg);
width: 20px;
height: 15px;
background-repeat: no-repeat;
}
#main-table .copy-text-button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
#main-table .listing-row.visited {
background-color: #18181a;
color: #dadada;
}
#main-table .button {
background-color: #14cc74;
border: none;
color: black;
padding: 3px 5px;
text-align: center;
text-decoration: none;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
border-radius: 2px;
transition-duration: 0.1s;
font-family: 'FiraGO', sans-serif;
}
#main-table .button:hover {
background-color: #414141; /* Green */
color: white;
}
.active{
background:rgba(0,200,50,0.25)
}
th{color:white;background:rgb(80,80,80)!important;text-align:left;}
td:nth-of-type(4){color:pink}
</style>
</head>
<body>
<table id="main-table">
<tbody>
<tr>
<th>Name</th>
<th>Actions</th>
<th>Vehicle</th>
<th></th>
</tr>
<tr data-name='Mike' class="listing-row" id="lr-{{ listing.owner_avatar }}-{{ listing.owner_name }}">
<td>
<a class="clickway" htarget="_blank">Mike</a>
</td>
<td>
<center><a target="_blank"><button class="button">CLICK</button></a></center>
</td>
<td>
Car
</td>
<td>
<center> 100</center>
</td>
</tr>
<tr data-name='Sarah' class="listing-row" id="lr-{{ listing.owner_avatar }}-{{ listing.owner_name }}">
<td>
<a class="clickway" htarget="_blank">Sarah</a>
</td>
<td>
<center><a target="_blank"><button class="button">CLICK</button></a></center>
</td>
<td>
Hovercraft
</td>
<td>
<center> 400</center>
</td>
</tr>
<tr data-name='Sally' class="listing-row" id="lr-{{ listing.owner_avatar }}-{{ listing.owner_name }}">
<td>
<a class="clickway" htarget="_blank">Sally</a>
</td>
<td>
<center><a target="_blank"><button class="button">CLICK</button></a></center>
</td>
<td>
Rocketship
</td>
<td>
<center> 1080</center>
</td>
</tr>
<tr data-name='Rebecca' class="listing-row" id="lr-{{ listing.owner_avatar }}-{{ listing.owner_name }}">
<td>
<a class="clickway" htarget="_blank">Rebecca</a>
</td>
<td>
<center><a target="_blank"><button class="button">CLICK</button></a></center>
</td>
<td>
Helicopter
</td>
<td>
<center> 4500</center>
</td>
</tr>
</tbody>
</table>
<script>
document.addEventListener('DOMContentLoaded',()=>{
const _STORE='nanaxi';
/*
Find all table cells within rows with class `listing-row`
and assign an event handler to each. The `click` event will
find the parent table-row and use the dataset `name` attribute
( OR the ID perhaps if it is unique!!! ) as a KEY in the
localStorage record.
*/
document.querySelectorAll('.listing-row td').forEach( td=>{
td.addEventListener('click',function(e){
e.stopPropagation();
if( e.target==e.currentTarget ){
let tr=e.target.parentNode;
// read the localStorage or create empty Object literal.
let json=localStorage.getItem( _STORE )!=null ? JSON.parse( localStorage.getItem( _STORE ) ) : {};
// check if the name exists as a key or add if it does not
// if it does exist, toggle the value between 1 & 0
if( !json.hasOwnProperty( tr.dataset.name ) ) json[ tr.dataset.name ]=1;
else json[ tr.dataset.name ]=1-json[ tr.dataset.name ];
// save the localStorage and set the "active" class
localStorage.setItem( _STORE, JSON.stringify( json ) );
tr.classList.toggle('active');
}
})
});
/*
on page load, read the store if it exists and for every
name entry that is set as 1 mark the appropriate table
row (based upon data-name attribute or ID) as "active"
and apply the css class.
*/
let json=localStorage.getItem( _STORE );
if( json!=null ){
json=JSON.parse( json );
Object.keys( json ).forEach( name=>{
if( json[name]==1 ){
document.querySelector('tr[data-name="'+name+'"]').classList.add('active')
}
})
}
});
</script>
</body>
</html>
Related
I have a simple nested table. Three columns - Name, Email,Contact. In the contact column, I have have two contact separated by a . This table gets stacked in the form of one row below the another in the mobile view.
Problem : Since the two contact numbers are separated by a break, in the mobile view it adds a huge space between the column headings. I just want to pick up "contact" heading in mobile(and not touch the numbers) and move it a little to reduce the space in between. Right now, whatever css I apply it moves the contact numbers along with it. Please suggest how can I do this ?
$(function() {
$(".fold-table tr.view").on("click", function() {
$(this).toggleClass("open").next(".fold").toggleClass("open");
});
});
$('.view, table.child').each(function() {
$('.view:even, table.child:even').addClass('odd');
$('.view:odd, table.child:odd').addClass('even');
});
.tableComponent table.parent {
font-family: 'Poppins';
font-size: 12px;
width: 60%;
border: none;
border-collapse: separate;
border-spacing: 0 2px;
}
.tableComponent table thead th {
border-bottom: 0;
border-top: 0;
}
.tableComponent table td,
th {
border-top: 0px;
}
table.fold-table>tbody>tr.view td,
table.fold-table>tbody>tr.view th {
cursor: pointer;
}
table.fold-table>tbody>tr.fold {
display: none;
}
table.fold-table>tbody>tr.fold.open {
display: table-row;
}
.odd {
background-color: #F2F2F2;
}
.even {
background-color: #F8F8F8
}
table.child {
font-family: 'Poppins';
font-size: 12px;
width: 100%;
margin-top: -0.1rem;
border-top: 2px solid #DBDBDB;
}
table.fold-table>tbody>tr.fold.open>td {
padding: 0;
}
#media all and (max-width: 500px) {
.tableComponent table.parent {
width: 90%;
margin-left: 5vw
}
.tableComponent thead {
display: none;
}
.tableComponent tr {
display: flex;
flex-direction: column;
margin-bottom: 5px;
}
.tableComponent td::before {
content: attr(col);
font-weight: bold;
padding-right: 20px;
width: 40vw;
display: inline-block;
}
table.child {
margin-top: -0.5rem;
}
.contactInfo {
display: inline-block;
margin-left: -0.2rem;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tableComponent">
<table class="table fold-table parent" id="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Contact</th>
</tr>
</thead>
<tbody>
<tr class="view">
<td col="Name">John</td>
<td col="Email">j#g.com</td>
<td col="Contact">
<span class="contactInfo">
35373726<br>
35373726
</span>
</td>
</tr>
<tr class="fold">
<td colspan="3">
<div class="fold-content">
<table class="child">
<tbody>
<tr>
<td col="Name">SUB Data 1</td>
<td col="Email">SUB Data 1</td>
<td col="Contact">SUB Data 1
</td>
</tr>
<tr>
<td col="Name">SUB Data 1</td>
<td col="Email">SUB Data 1</td>
<td col="Contact">SUB Data 1
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
In css, the inline elements doesn't take margins, so vertical alignment can be done like so
#media all and (max-width: 500px){
.tableComponent td::before {
vertical-align: top;
}
}
If you change the col="Contact" td into a flexbox, it will behave the way you want it at that screen size.
[col="Contact"] {
display: flex;
}
I want to have a table, such that if the width of the page decreases the columns of the table should be displayed one below the other.
You can use CSS display properties to alter the way the table behaves. In order to make the table cells sit one on top of the other, you need to create a media query which will set the table and each cell to be display: block at the break point that best suits your needs.
In the example below the table cells will wrap when the screen width shrinks to 500px.
Example
#media (max-width: 500px) {
table {
display: block;
border: solid 1px #f00;
}
table td {
display: block;
border: solid 1px #f00;
}
}
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Explanation
By default a table tag uses display: table and a table cell uses display: table-cell. By changing these properties we can alter the way the table is displayed.
For more information on display properties see this article:
https://developer.mozilla.org/en-US/docs/Web/CSS/display
For more information on media queries see the following article:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Alright if i understand correctly you want something like this:
http://codepen.io/geoffyuen/pen/FCBEg
This Solution wil make your table responsive so it can do what you are trying to do(at leat i think i know what youre trying to do)
Just some example html code
<h1>RWD List to Table</h1>
<table class="rwd-table">
<tr>
<th>Movie Title</th>
<th>Genre</th>
<th>Year</th>
<th>Gross</th>
</tr>
<tr>
<td data-th="Movie Title">Star Wars</td>
<td data-th="Genre">Adventure, Sci-fi</td>
<td data-th="Year">1977</td>
<td data-th="Gross">$460,935,665</td>
</tr>
<tr>
<td data-th="Movie Title">Howard The Duck</td>
<td data-th="Genre">"Comedy"</td>
<td data-th="Year">1986</td>
<td data-th="Gross">$16,295,774</td>
</tr>
<tr>
<td data-th="Movie Title">American Graffiti</td>
<td data-th="Genre">Comedy, Drama</td>
<td data-th="Year">1973</td>
<td data-th="Gross">$115,000,000</td>
</tr>
</table>
Then we have our CSS
#import "compass/css3";
// More practical CSS...
// using mobile first method (IE8,7 requires respond.js polyfill https://github.com/scottjehl/Respond)
$breakpoint-alpha: 480px; // adjust to your needs
.rwd-table {
margin: 1em 0;
min-width: 300px; // adjust to your needs
tr {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
th {
display: none; // for accessibility, use a visually hidden method here instead! Thanks, reddit!
}
td {
display: block;
&:first-child {
padding-top: .5em;
}
&:last-child {
padding-bottom: .5em;
}
&:before {
content: attr(data-th)": "; // who knew you could do this? The internet, that's who.
font-weight: bold;
// optional stuff to make it look nicer
width: 6.5em; // magic number :( adjust according to your own content
display: inline-block;
// end options
#media (min-width: $breakpoint-alpha) {
display: none;
}
}
}
th, td {
text-align: left;
#media (min-width: $breakpoint-alpha) {
display: table-cell;
padding: .25em .5em;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
}
}
// presentational styling
#import 'http://fonts.googleapis.com/css?family=Montserrat:300,400,700';
body {
padding: 0 2em;
font-family: Montserrat, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #444;
background: #eee;
}
h1 {
font-weight: normal;
letter-spacing: -1px;
color: #34495E;
}
.rwd-table {
background: #34495E;
color: #fff;
border-radius: .4em;
overflow: hidden;
tr {
border-color: lighten(#34495E, 10%);
}
th, td {
margin: .5em 1em;
#media (min-width: $breakpoint-alpha) {
padding: 1em !important;
}
}
th, td:before {
color: #dd5;
}
}
Hope this helps you
I need to highlight a row in a DataTables.js data table whenever it is inactive. I have some code set up in my Razor to label the <tr> with an id of "Inactive" and in my CSS I have the background color set accordingly. However, I can't get anything but the orignal styling to appear.
CSS
/*
* Table styles
*/
table.pretty {
width: 100%;
clear: both;
}
table.pretty td#Inactive {
padding: 5px;
border: 1px solid #fff;
background-color: #FB9090;
}
table.pretty td,
table.pretty th {
padding: 5px;
border: 1px solid #fff;
}
/* Header cells */
table.pretty thead th {
background: #6699FF; /* #66a9bd; */
color: white;
}
/* Body cells */
table.pretty tbody th {
text-align: left;
background: black; /*#91c5d4; */
color: white;
}
table.pretty tbody td {
background: white; /* #d5eaf0; */
}
table.pretty tbody tr.odd td {
background: #e8eef4; /*#bcd9e1; */
}
/* Footer cells */
table.pretty tfoot th {
background: #b0cc7f;
text-align: left;
}
table.pretty tfoot td {
background: #d7e1c5;
text-align: center;
font-weight: bold;
}
tr#Inactive
{
background-color: #FB9090;
}
HTML (Rendered)
<tr id=Inactive style="vertical-align:top;">
<td style="width:200px;">
Name
</td>
<td>
Fixed
</td>
<td style="width:50px;">
test
who's testing
I am
who's that eh?
me
</td>
<td style="width:50px;">
109161
</td>
<td style="text-align:center">
<img src="/Content/Images/attachment.png" height="20px;" width="20px;"/>
</td>
<td nowrap>
</td>
<td nowrap>
</td>
<td style="text-align:center; max-width: 50px;">
</td>
<td>
<img src="/Content/Images/Pencil-icon.png" alt="edit" height="20px;" width="20px;"/><br />
<img src="/Content/Images/Actions-view-list-text-icon.png" alt="details" height="20px;" width="20px;"/><br />
<img src="/Content/Images/Actions-edit-delete-icon.png" alt="delete" height="20px;" width="20px;"/>
</td>
</tr>
jQuery
$("#thetable").dataTable({
"sPaginationType": "full_numbers",
"iDisplayLength": 100,
"oLanguage": {
"sSearch": "Filter results:"
}
});
If only one row is inactive at a time, I think you're looking for:
tr#Inactive td
{
background-color: #FB9090;
}
I have a table with expand/collapse javascript acting on the class value assigned to tr.
See below html code.
This all works fine in Chrome, but in IE when I expand and then collapse the www row, I get additional unwanted lines in the xxx and zzz rows. The lines look like they are borders (see css td border-style definition). It looks as if the borders of the collapsed and hidden rows are still shown (non-button rows are a little less high than the button rows, apparently because of standard button padding and border widths).
Why is this, and how can I prevent this from occurring?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<style type="text/css">
body, p {
background-color: white;
font-family: Verdana;
font-size: 10pt;
font-style: normal;
color: black;
margin-bottom: 4.5pt;
margin-top: 0pt;
}
table {
border: solid black 1pt;
border-collapse: collapse;
padding: 0;
border-spacing: 0;
}
th {
background: rgb(255, 255, 153);
border-style: solid;
border-color: black;
border-width: 1pt;
padding: 0cm 5pt;
color: black;
font-family: Verdana;
font-size: 10pt;
font-style: normal;
vertical-align: top;
}
td {
border-style: dotted dotted none none;
border-color: black;
border-width: 1pt;
padding: 0cm 5pt;
color: black;
font-style: normal;
font-family: Verdana;
font-size: 10pt;
vertical-align: top;
margin-bottom: 4.5pt;
margin-top: 0pt;
}
input.buttonSeq {
color: blue;
background: ffffcc;
border: none;
margin-left:0pt;
margin-top: 0px;
margin-bottom: 0px;
font-size: 100%;
}
</style>
<script type="text/javascript" language="javascript">
//expand and collapse tr functions based on class
function ToggleTRbyClass(clss){
var trs = document.getElementsByTagName('tr');
for (var i=0; i!=trs.length; i++) {
if (trs[i].className == clss) {
if ( trs[i].style.display == "none")
{
trs[i].style.display = "table-row"
}
else {
trs[i].style.display = "none"
}
}
}
return true;
}
</script>
</head>
<body>
<br><br>
<table style="table-layout:fixed word-break:break-all">
<col width="120">
<thead>
<tr>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr bgcolor="ffffcc">
<td align="left" style="font-style:italic; font-weight: bold">
<div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('www'); return true;" onMouseOver="this.style.cursor='hand'" value="www"></div>
</td>
</tr>
<tr style="display:none" class="www">
<td>element1</td>
</tr>
<tr style="display:none" class="www">
<td>element2</td>
</tr>
<tr style="display:none" class="www">
<td>element3</td>
</tr>
<tr bgcolor="ffffcc">
<td align="left" style="font-style:italic; font-weight: bold">
<div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('xxx'); return true;" onMouseOver="this.style.cursor='hand'" value="xxx"></div>
</td>
</tr>
<tr style="display:none" class="xxx">
<td>element4</td>
</tr>
<tr bgcolor="ffffcc">
<td align="left" style="font-style:italic; font-weight: bold">
<div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('zzz'); return true;" onMouseOver="this.style.cursor='hand'" value="zzz"></div>
</td>
</tr>
<tr style="display:none" class="zzz">
<td>element5</td>
</tr>
</tbody>
</table><br></body>
</html>
You need to specify a doctype as the first line in your markup. Without a doctype, IE will render in quirks mode, which is essentially the IE 5.5 rendering engine. Quirks mode greatly effects the box model and Javascript support, among other things.
Example:
<!doctype html>
Specifying the doctype will make your example work as it does in Firefox.
Edit:
The grey background comes from the following rule, which is technically wrong (you need to specify the # symbol when using hex colors:
input.buttonSeq {
color: blue;
background: ffffcc; /* change this to #ffffcc */
border: none;
margin-left:0pt;
margin-top: 0px;
margin-bottom: 0px;
font-size: 100%;
}
Rather than setting the display to "table-row", set it to "" so that the default behaviour comes back. Older versions of IE don't support table-row and need block instead.
If your CSS overrides the default (ie. if you used it to hide a class of rows from the start), try:
try {tr.style.display = "table-row";}
catch(e) {tr.style.display = "block";}
And add a DOCTYPE, like wsanville said.
I read in some forums that to make an html table look disabled is to add a layer of div. My problem is I don't know how to do it.
I have 3 questions:
How will I set the div height that it will automatically adjust to the table height whenever the table increases its height when a new row is added.
How will I make the div cover the table. I don't know how to layer html elements.
How am I going to code the javascript that will make my table look disabled when I click 'Disable' button and enable it again when I click 'Enable' button.
tabledisabletest.html
<html>
<head>
<script type="text/javascript">
</script>
<style type="text/css">
table#tblTest {
width: 100%;
margin-top: 10px;
font-family: verdana,arial,sans-serif;
font-size:12px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table#tblTest tr.highlight td {
background-color: #8888ff;
}
table#tblTest tr.normal {
background-color: #ffffff;
}
table#tblTest th {
white-space: nowrap;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table#tblTest td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
#disabler {
width: 100%;
height: 200px;
background-color: #bbb;
opacity:0.6;
}
</style>
</head>
<body>
<div id="disabler"></div>
<table id="tblTest">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tom</td>
<td>UK </td>
</tr>
<tr>
<td>Henrik</td>
<td>Denmark</td>
</tr>
<tr>
<td>Lionel</td>
<td>Italy</td>
</tr>
<tr>
<td>Ricardo</td>
<td>Brazil</td>
</tr>
<tr>
<td>Cristiano</td>
<td>Portugal</td>
</tr>
</tbody>
</table>
<input type="button" onclick="disable = true;" value="Disable" />
<input type="button" onclick="disable = false;" value="Enable" />
</body>
</html>
I have the div disabler to do the disabling but I can't make it cover the table.
Please help me with this. I'm so new to this thing.
If you want the disabler element to overlay your table, add a negative bottom-margin to it. Also, set opacity to a value lower than 1, to not completely cover (hide) the table behind it.
#disabler {
opacity: 0.5;
margin-bottom: -200px;
}
Since you've mentioned that you're doing this for educative purposes, I won't give the full solution. See this fiddle to get started.
If you want to make a text look "unselectable", use the following CSS:
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
You will have to place the div disabler on top of the table.
You can do so by absolutely positioning the div. I added a new div, tableContainer enveloping the disabler div and the table, and absolutely positioning the div.
<div id="tableContainer"> <!-- New Div-->
<div id="disabler"></div>
<table>....<table>
</div>
Add position: absolute; to the #disabler
And most importantly write the javascript to display and hide the div:
function disableTable()
{
document.getElementById("disabler").style.display = "block";
}
function enableTable()
{
document.getElementById("disabler").style.display = "none";
}
Live Example: http://jsbin.com/icuwug