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.
Related
I need to highlight a table row (exluding the table head), but I can not use CSS hover. I must use JavaScript onMouseOver and onMouseOut events. The JavaScript must be contained in an external file.
I am already using the external JavaScript file to print the date in the footer. For some reason onMouseOver and onMouseOut are not calling "trackTableHighlight" or "highlightTableRow". What am I doing wrong?
Here is test.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<script src="test.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<h1>Test</h1>
</header>
<nav>
<ul>
<li>Home</li>
</ul>
</nav>
<div class="main">
<div class="middle-content">
<br>
<table class="stripe_table">
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tbody onMouseOver="trackTableHighlight(event, '#8888FF')" onMouseOut="highlightTableRow(0)">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<footer>
<p>
Today is:
<script>printDate();</script>
</p>
</footer>
</div>
</div>
</body>
</html>
Here is test.js:
function printDate()
{
document.write(Date());
}
function trackTableHighlight(mEvent, highlightColor)
{
if (!mEvent)
mEvent=window.event;
// Internet Explorer
if (mEvent.srcElement)
{
highlightTableRow( mEvent.srcElement, highlightColor);
}
// Netscape and Firefox
else if (mEvent.target)
{
highlightTableRow( mEvent.target, highlightColor);
}
}
function highlightTableRow(myElement, highlightColor)
{
var i=0;
// Restore color of the previously highlighted row
for (i; i<savedStateCount; i++)
{
restoreBackgroundStyle(savedStates[i]);
}
savedStateCount=0;
while (myElement &&
((myElement.tagName && myElement.tagName!="TR") || !myElement.tagName))
{
myElement=myElement.parentNode;
}
if (!myElement || (myElement && myElement.id && myElement.id=="header") )
return;
if (myElement)
{
var tableRow=myElement;
if (tableRow)
{
savedStates[savedStateCount]=saveBackgroundStyle(tableRow);
savedStateCount++;
}
var tableCell=findNode(myElement, "TD");
var i=0;
while (tableCell)
{
if (tableCell.tagName=="TD")
{
if (!tableCell.style)
{
tableCell.style={};
}
else
{
savedStates[savedStateCount]=saveBackgroundStyle(tableCell);
savedStateCount++;
}
tableCell.style["backgroundColor"]=highlightColor;
tableCell.style.cursor='default';
i++;
}
tableCell=tableCell.nextSibling;
}
}
}
Here is test.css:
html {
height: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: linear-gradient(to bottom, #FFFFFF, #4F6D93) no-repeat;
color: #666666;
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
header {
background-color: #000033;
color: #FFFFFF;
height: 60px;
text-align: center;
padding-top: 15px;
}
nav {
font-weight: bold;
padding: 20px;
float: left;
width: 160px;
}
nav ul {
list-style-type:none;
margin: 0px;
padding-left: 0px;
font-size: 1.2em;
}
h1 {
font-family: "Times New Roman", Georgia, Serif;
margin-top: 0px;
}
footer {
font-size: 75%;
font-style: italic;
text-align: center;
font-family: "Times New Roman", Georgia, Serif;
padding: 20px;
}
#wrapper {
margin: auto;
width: 80%;
background-color: #90C7E3;
min-width: 960px;
max-width: 2048px;
box-shadow: 3px 3px 3px #333333;
position: relative;
}
.middle-content {
padding-left: 1%;
padding-right: 1%;
padding-bottom: 1%;
}
.main {
background-color: #FFFFFF;
border: 3px solid white;
margin-left: 190px;
padding-left: 30px;
margin-bottom: 5%;
}
table {
margin-left:auto;
margin-right:auto;
border-collapse: collapse;
width: 80%;
text-align: center;
}
table, th, td {
border: 2px solid #90C7E3;
}
th, td {
padding: 15px;
}
th {
background: #000033;
color: white;
}
td:nth-child(2) {
text-align: left;
}
Here is a little test in jsfiddle: https://jsfiddle.net/a2Lxqxqe/2/ (I'm not sure about browser compatibility issues but you can see it working just fine in Chrome):
document.addEventListener("DOMContentLoaded", function(event) {
var tr = document.getElementsByTagName("tr");
for (var i = 0; i < tr.length; i++) {
tr[i].addEventListener("mouseover", function() {
this.style.backgroundColor = "#8888FF";
});
tr[i].addEventListener("mouseout", function() {
this.style.backgroundColor = "transparent";
});
}
});
function printDate() {
document.write(Date());
}
Instead of addEventListener you can use attachEvent() if you need support for: IE8 and below and/or Opera 6 and below. Here is a little reference to this: http://www.w3schools.com/jsref/met_document_addeventlistener.asp
I wrapped the code in document.addEventListener("DOMContentLoaded", function(event){ ... }) so the code executes after the DOM is loaded, if not you'll get an error when hovering.
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 have a cross-browser compatibility problem.
Here is a jsfiddle of my code.
Essentially, the desired effect is for the squares to be opacity="0.5" onmouseout and opacity ="1" onmouseover. The squares, once clicked, redirect to a page.
The code works as desired on Chrome, but on IE 11 the background images doesn't show up. Also I noticed the opacity function for onmouseout/onmouseover doesn't work.
<html>
<head>
<script>
function bigImg(x) {
x.style.opacity = "1";
}
function normalImg(x) {
x.style.opacity = "0.5";
}
</script>
<style type="text/css">
table.imagetable {
font-family: verdana, arial, sans-serif;
font-size:11px;
color:#FFFFFF;
border-width: 3px;
border-color: #FFFFFF;
table-layout: fixed;
}
table.imagetable th {
border-width: 3px;
padding: 3px;
border-style: solid;
border-color: #FFFFFF;
border-spacing: 3px;
width: 200px;
height: 200px;
}
table.imagetable td {
border-width: 3px;
padding: 3px;
border-style: solid;
border-color: #FFFFFF;
border-spacing: 3px;
width: 200px;
height: 200px;
}
table.imagetable td:hover {
cursor: pointer;
cursor: hand;
}
#app1 {
background-image: url("http://gprgeo#www.gprairborne.com/images/airborne/blue.png");
}
#app2 {
background-image: url("http://gprgeo#www.gprairborne.com/images/airborne/blue2.png");
}
#app3 {
background-image: url("http://gprgeo#www.gprairborne.com/images/airborne/blue3.png");
}
#app4 {
background-image: url("http://gprgeo#www.gprairborne.com/images/airborne/blue4.png");
}
#app5 {
background-image: url("http://gprgeo#www.gprairborne.com/images/airborne/blue5.png");
}
</style>
</head>
<table class="imagetable">
<tr>
<td id="app1" onmouseover="bigImg(this)" onmouseout="normalImg(this)" onClick="javascript:location.href='http://www.google.com';"></td>
<td id="app2" onmouseover="bigImg(this)" onmouseout="normalImg(this)" onClick="javascript:location.href='http://www.google.com';"></td>
<td id="app3" onmouseover="bigImg(this)" onmouseout="normalImg(this)" onClick="javascript:location.href='http://www.google.com';"></td>
</tr>
<tr>
<td id="app4" onmouseover="bigImg(this)" onmouseout="normalImg(this)" onClick="javascript:location.href='http://www.google.com';"></td>
<td id="app5" onmouseover="bigImg(this)" onmouseout="normalImg(this)" onClick="javascript:location.href='http://www.google.com';"></td>
</tr>
</table>
</html>
EDIT:
Ok so everything is working properly now, the path to the images is blocked since they are provided from a website under construction and requires login. IE 11 had a problem with such even when logged in on the browser, chrome didn't. See the below jsfiddle for working desired effect.
http://jsfiddle.net/nP7pd/4/
I've made 4 buttons that each link to a different table.
I'm having trouble individually coloring each button using css... For example, I'd like the first button to be red and the second to be blue, ect.
I really appreciate the help. Thanks.
link to demo: http://jsfiddle.net/LpLhP/8/
html:
<a class="button" data-table="1" href="#">Slifer Level</a>
<a class="button" data-table="2" href="#">Ra Level</a>
<a class="button" data-table="3" href="#">Obelisk Level</a>
<a class="button" data-table="4" href="#">Exodia Level</a>
<table id="1">
<thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</tbody>
</table>
<table id="2">
<thead>
<tr>
<td>Sport</td>
<td>Gender</td>
<td>Hair Color</td>
</tr>
</thead>
<tbody>
<tr>
<td>Baseball</td>
<td>Female</td>
<td>Blonde</td>
</tr>
<tr>
<td>Curling</td>
<td>Female</td>
<td>Brown</td>
</tr>
<tr>
<td>Hockey</td>
<td>Male</td>
<td>Black</td>
</tr>
</tbody>
</table>
<table id="3">
<thead>
<tr>
<td>Favorite TV Show</td>
<td>Favorite Band</td>
<td>Favorite Food</td>
</tr>
</thead>
<tbody>
<tr>
<td>How I Met Your Mother</td>
<td>Panic At The Disco</td>
<td>Pizza</td>
</tr>
<tr>
<td>Lost</td>
<td>Fall Out Boy</td>
<td>Steak</td>
</tr>
<tr>
<td>The Office</td>
<td>OneRepublic</td>
<td>Waffles</td>
</tr>
</tbody>
</table>
<table id="4">
<thead>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</thead>
<tr>
<td>How I Met Your Mother</td>
<td>Panic At The Disco</td>
<td>Pizza</td>
<td>1</td>
css:
body{
font-family: sans-serif;
font-size: 16px;
line-height: 1.5em;
text-align: center;
margin-top: 1.5rem;
}
a{
margin: 0.5rem;
}
a.button{
background-color: #ed8c15;
color: white;
padding: 0.5rem;
border-radius: 5px;
text-decoration: none;
&:hover{
background-color: darken(tomato, 10%);
}
}
table{
width: 80%;
margin: 2em auto;
border: 2px solid black;
}
tr:nth-child(even){
background-color: #F7F7F7;
}
thead{
background-color: darkgrey;
}
th{
padding: 0.75em 0;
}
td{
padding: 0.7em 1em;
}
java:
(function () {
var tables = $("table");
//Grabs all the tables
tables.hide().first().show();
//Hides all the tables except first
$("a.button").on("click", function () {
//Adds eventListner to buttons
tables.hide();
//Hides all the tables
var tableTarget = $(this).data("table");
//Gets data# of button
$("table#" + tableTarget).show();
//Shows the table with an id equal to data attr of the button
})
})();
use nth:child() selector in your css as
a.button:nth-child(2){
background-color: #4679BD;
}
http://jsfiddle.net/LpLhP/17/
Give each 'button class' a fellow class such as the following:
<a class="button red" data-table="1" href="#">Slifer Level</a>
<a class="button blue" data-table="2" href="#">Ra Level</a>
<a class="button green" data-table="3" href="#">Obelisk Level</a>
<a class="button yellow" data-table="4" href="#">Exodia Level</a>
Then, give the CSS for each new class you defined
.red { color: red; }
.blue { color: blue; }
.green { color: green; }
.yellow { color: yellow; }
there are several ways to do this, the easiest is to make an extra class
<button class="button red"></button>
.red{
background-color:red;
}
button:nth-of-type(1) <--- First Button Styling
Try This
a.button[data-table="1"]{background-color:red ;}
a.button[data-table="2"]{background-color: blue;}
a.button[data-table="3"]{background-color: green;}
a.button[data-table="4"]{background-color: black;}
DEMO
why not add css
a.button:nth-child(1){
background-color:red;
}
a.button:nth-child(2){
background-color:blue;
}
<a class="buttona" data-table="1" href="#">button1</a>
<a class="buttonb" data-table="2" href="#">button2</a>
<a class="buttonc" data-table="3" href="#">button3</a>
<a class="buttond" data-table="4" href="#">button4</a>
.buttona{
background-color: #ed8c15;
color: white;
padding: 0.5rem;
border-radius: 5px;
text-decoration: none;
&:hover{
background-color: darken(tomato, 10%);
}
}
.buttonb{
background-color: blue;
color: white;
padding: 0.5rem;
border-radius: 5px;
text-decoration: none;
&:hover{
background-color: red;
}
}
Use Different CSS for each button like this.
Change the background-color and the hover background-color.
<style>
#red{
background-color: red;
}
#blue{
background-color: blue;
}
#green{
background-color: green;
}
.button{
color: #fff;
padding: .5rem;
border-radius: 5px;
text-decoration: none;
}
</style>
<a class="button" id="red" data-table="2" href="#">button2</a>
<a class="button" id="blue" data-table="2" href="#">button2</a>
<a class="button" id="grren" data-table="2" href="#">button2</a>
Try this.
Hope this helps.
give individual ids to buttons.
<a class="button" id="button1" data-table="1" href="#">button1</a>
<a class="button" id="button2" data-table="2" href="#">button2</a>
<a class="button" id="button3" data-table="3" href="#">button3</a>
<a class="button" id="button4" data-table="4" href="#">button4</a>
Working Demo
Data table is a pretty good way to target too, but this is probably more versatile site wide. nth of type is great for lists and stuff, but I doubt you'll get much reuse out of it in this situation. You also don't really need adjacent selectors like a.red-button etc.
I'd go with a site wide button style and then block element modifier style.
Here is a fiddle too:
HTML
Button
<button class="button">Button</button>
<input type="submit" class="button" value="button" />
CSS
.button { /* button reset - base */
display: inline-block; /* makes sure you can use margin-top etc */
border: 0; outline: 0; /* overrides defaults */
margin: 0; padding: 0;
border-radius: 0; /* overrides defaults */
background: gray; /* overrides background image */
font-family: inherit; /* gets parent font */
color: inherit; /* gets parent color */
text-align: center;
text-decoration: none;
-webkit-appearence: none; /* removes ios styling defaults */
-moz-appearence: none;
appearence: none;
cursor: pointer;
font-size: 1.2em;
padding: .5em .7em
}
/* specific styles */
.light {
background: red;
}
.dark {
background: purple;
}
.selector {
background: color;
}
.big-button {
font-size: 1.6em; /* etc. */
}
now, use those styles with the data table if you want - I see you are using sass - so you can exted these "mini-themes" to buttons, or divs or whatever and reuse common color combinations
.button[data-table="1"] {
#extend .light;
}
or
a[data-table="1"] {
#extend .dark;
#extend .big-button;
}
/* or make them #mixins and #include them if that suits you better */
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