I have a nested table arrangement for displaying data. I want the nested table to be in a TD that spans all the parent table columns. So I have colspan set. However I also want the user to be able to click on the parent to hide/unhide the child data. This works fine in IE8, but in FireFox and Chrome the nested table is ignoring the colspan and is only sown in the first column.
The code below is an example of the problem. If you click the first column text you'll see what I mean. The final row of data isn't classed so it shows ok on page load, but once the class is set it goes wrong again.
Any thoughts?
Thanks.
<!DOCTYPE html PUBLIC "-//W3C//thD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/thD/xhtml1-transitional.thd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<script type="text/javascript">
function expandRow(rowID, clickRow)
{
var item = document.getElementById(rowID);
if(item.className=='hidden'){
item.className = 'unhidden';
}else{
item.className = 'hidden';
}
}
</script>
<style type="text/css">
.hidden { display: none; }
.unhidden { display: block; }
</style>
<title>Table Test</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
</tr>
</thead>
<tbody>
<tr>
<td class="collapsed" onclick="expandRow('id30', this);">Click Here to Expand</td>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
<tr class="hidden" id="id30">
<td colspan="4">
<table>
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="collapsed" onclick="expandRow('id95', this);">Click Here to Expand</td>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
<tr class="hidden" id="id95">
<td colspan="4">
<table>
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="collapsed" onclick="expandRow('id96', this);">Click Here to Expand</td>
<td>This one</td>
<td>displays ok</td>
<td>until you set the class!</td>
</tr>
<tr id="id96">
<td colspan="4">
<table>
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Get rid of your unhidden class entirely - it's completely redundant. Instead just remove the hidden class from the element to allow it to return to it's natural state, in this case:
item.className = '';
But normally I would recommend a replacement:
item.className = item.className.replace(/\bhidden\b/gi,'');
(and fwiw, personally I find "removed" more semantically correct than "hidden" which I would reserve for dealing with the visibility property)
change the css line about unhidden to: .unhidden { display: table-row; }
block is an invalid style for trs.
I solved it, using this info by just declaring
.vis {
display: block;
display: table-row;
}
Old Internet Explorers ignores the table-row. Firefox and Internet Explorer 8 use it.
only change this part of CSS
<style type="text/css">
.hidden { display: none; }
.unhidden { display:; }
</style>
Why don't you just remove the styling altogether:
<style type="text/css">
.hidden { display: none; }
.unhidden { }
</style>
Related
I am working on a display page for a lot of data. some of the data is a short string, some of it is a long string(>200char) and some is numbers. My issue is this: When i create a a table and set its style, how do i make it so the style of the table sets a fixed size for the cells in that table, without manually setting it for each individual cell, becuase i have over 50 tables with 10 rows or more and each one has multiple cells.
I am asking this because the data I am entering seems to be resizing the cells to make it fit, and it crushes the adjacent cells, which cant happen.
Here is a sample of what i want:
<table style={table_style_sub}>
<tr>
<td><b>Client Name:</b></td>
<td>{client2}</td>
</tr>
<tr>
<td><b>Location:</b></td>
<td>{client2Location}</td>
</tr>
<tr>
<td><b>Phone:</b></td>
<td>{client2Phone}</td>
</tr>
<tr>
<td><b>Emails:</b></td>
<td>{client2Email}</td>
</tr>
<tr>
<td style={cell_format}><b>Details:</b></td>
<td>{client2Service}</td>
</tr>
</table>
this is my table for example. Here is the formatting:
var table_style_sub={
margin: 'auto',
width: '400px',
marginBottom: '15px',
border: '1px dotted black'
}
is there any way to add to this table_style_sub to make every <td> of the appropriate table have a width of 'Xpx' without manually doing typing <td style={{width:"Xpx}}> over 300 times.
Here is the whole code if you want to see it to get an idea of how many lines i actually have: http://pastebin.com/6rzRz2Vj
You could try something like this in javascript itself,
In your code there seems to be a div with an id="messagesDiv" enclosing the table so could use that id and fetch the tds and then set their style to width in the javascript as shown below,
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="angular.min.js"></script>
</head>
<body>
<form class="index-form" name="LoginForm">
<div class="card__supporting-text mdl-color-text--white-600" id="messagesDiv">
<h3>Contact Information</h3>
<table style={table_style}>
<tr>
<td><b>Legal Name: </b></td>
<td>{legalEntity}</td>
</tr>
<tr>
<td><b>Operating Name:</b> </td>
<td>{operatingName}</td>
</tr>
<tr>
<td><b>Role: </b></td>
<td>{string_role[role]}</td>
</tr>
<tr>
<td><b>Address 1: </b></td>
<td>{address1}</td>
</tr>
<tr>
<td><b>Address 2: </b></td>
<td>{address2}</td>
</tr>
<tr>
<td><b>City:</b> </td>
<td>{city}</td>
</tr>
<tr>
<td><b>Province:</b></td>
<td>{province}</td>
</tr>
<tr>
<td><b>Country: </b></td>
<td>{country}</td>
</tr>
<tr>
<td><b>Postal Code:</b></td>
<td>{postalCode}</td>
</tr>
<tr>
<td><b>Phone:</b></td>
<td>{phone}</td>
</tr>
<tr>
<td><b>Fax:</b></td>
<td>{fax}</td>
</tr>
<tr>
<td><b>Email:</b></td>
<td>{email}</td>
</tr>
<tr>
<td><b>Admin Contact:</b></td>
<td>{adminContact}</td>
</tr>
<tr>
<td><b>Techncal Contact:</b></td>
<td>{technicalContact}</td>
</tr>
</table>
</div>
</form>
<script>
var div=document.getElementById("messagesDiv");
var tds=div.getElementsByTagName("td");
for(var i=0;i<tds.length;i++){
tds[i].style.width='200px';
}
</script>
</body>
</html>
I am trying to use javascript to hide a table if there is no data present. I am using Powershell to grab data from a spreadsheet; however, if there is no data in the spreadsheet the table is not required.
In a nutshell, if the td with an id of "hide if empty" does not contain any data can the div with div with id "sampleDIV" or the table with id "Tabletest" not be visible?
Is this possible?
Thank you :)
<div id="SampleDIV">
<table id="TableTest">
<tbody>
<tr>
<td><b>Data:</b></td>
<td id="hide if empty"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
Am I doing something really silly?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script language ="javascript">
if (document.getElementById("hideifempty").innerHTML === "") {
document.getElementById("SampleDIV").style.display = "none";
}
</script>
</head>
<div id="SampleDIV">
<table id="TableTest">
<tbody>
<tr>
<td><b>Data:</b></td>
<td id="hideifempty"></td>
<td></td>
</tr>
<tr>
<td></td>
<td>If you can see this it didn't hide</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<body>
</body>
</html>
if (document.getElementById("hideifempty").innerHTML === "") {
document.getElementById("SampleDIV").style.display = "none";
}
<div id="SampleDIV">
<table id="TableTest">
<tbody>
<tr>
<td><b>Data:</b></td>
<td id="hideifempty"></td>
<td></td>
</tr>
<tr>
<td></td>
<td>If you can see this it didn't hide</td>
<td></td>
</tr>
</tbody>
</table>
</div>
You may want to use .innerHTML.trim() === "" - up to you depending on whether you define an element with nothing but whitespace as "empty".
Note: Element IDs are not supposed to contain spaces (although that may work in some browsers), so I've changed the id to "hideifempty".
EDIT: Note that the above JS would need to be in a <script> element that is after the <div> in question, so e.g., you could follow the reasonably standard practice of putting scripts immediately before the closing </body> tag. Or you could wrap the above if statement in an onload or DOMContentLoaded handler. Otherwise the JS will run before the browser has parsed the div and table.
you try:
$('#TableTest tr').each(function() {
if ($(this).find('td:empty').length) $(this).hide();
});
or you can use css:
tr td:empty {
visibility: hidden;
height: 0;
}
td:not(:empty) ~ td:empty{
visibility: visible;
height: 100%;
}
Yes it is and here is how you can do that
if(document.querySelector("#hideIfEmpty").innerHTML.trim() == ""){
document.querySelector("#SampleDIV").style.display = "none";
}
<div id="SampleDIV">
<table id="TableTest">
<tbody>
<tr>
<td><b>Data:</b></td>
<td id="hideIfEmpty"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
You should probably add some checks to make sure the elements with the IDs hideIfEmpty and SampleDIV exist to prevent errors. Also, an element's ID can't contain spaces, that is why I've changed hide if empty to hideIfEmpty.
I have a pretty simple html table, there are lots of information i want to add for each row but i cant display everything when the page is loaded because it is going to make everything very clumsy. So i want to add a view more button in another column for each of the row.
I have already tried writing a JavaScript code but its not working as i want. What i want is:
The row should be completely invisible until i click the view more (i tried putting the tags inside the div but it messed everything up by putting the row outside the table entirely).
I want the code to work for all the rows so i don't have to write separate codes for each row.
I want the extended information for a row to be invisible whenever i try to view more for another row.
If possible, i would like a simple animation for showing the extended animation.
Below is my HTML code:
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Action</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>View More</td>
</tr>
<tr>
<td colspan="3">
<div id="example" class="more">
<p>John Doe is a man</p>
<p style="text-align:right;">Hide this content.</p>
</div>
</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>View More</td>
</tr>
<tr>
<td colspan="3">
<div id="example" class="more">
<p>Jane Doe is a woman</p>
<p style="text-align:right;">Hide this content.</p>
</div>
</td>
</tr>
</table>
Below is my CSS:
<style type="text/css">
.more {
display: none;
}
a.showLink, a.hideLink {
text-decoration: none;
color: #36f;
padding-left: 8px;
background: transparent url(down.gif) no-repeat left;
}
a.hideLink {
background: transparent url(up.gif) no-repeat left;
}
a.showLink:hover, a.hideLink:hover {
border-bottom: 1px dotted #36f;
}
</style>
Below is my Javascript:
<script language="javascript" type="text/javascript">
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
Since you tagged jQuery, I'm assuming you're willing to use it, so here's an example of a fix with jQuery:
EDIT: The html has changed, the second row failed to work due to the ID selector
HTML
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Action</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>View More</td>
</tr>
<tr>
<td colspan="3">
<div id="example" class="more">
<p>John Doe is a man</p>
<p style="text-align:right;">Hide this content.</p>
</div>
</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>View More</td><!-- Note the change in the showHide() function -->
</tr>
<tr>
<td colspan="3">
<div id="exampleFemale" class="more"><!-- Note the change in the ID -->
<p>Jane Doe is a woman</p>
<p style="text-align:right;">Hide this content.</p><!-- Note the change in the showHide() function -->
</div>
</td>
</tr>
</table>
Javascript
function showHide(shID) {
if ($('#' + shID)) {
if ($('#' + shID+'-show').css('display') != 'none') {
$('#' + shID+'-show').css({'display':'none'});
$('#' + shID).css({'display':'block'});
}
}
else {
$('#' + shID+'-show').css({'display':'inline'});
$('#' + shID).css({'display':'none'});
}
}
Note the changes inthe Javascript -> jQuery where there used to be document.getElementById(shID+'-show') is now $('#' + shID+'-show') and where there used to be .style.display = 'none'; is now .css({'display':'none'});
Don't forget to include jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Hope this helps!
I have a table of my favourite movies. I would like to display the poster of the movie when the user hovers over the name of the movie. I managed to do it for one element:
<body>
<h2> My Top 10 Movies </h2>
<table>
<tr>
<th>Rank</th>
<th>Title</th>
<th>Director</th>
<th>Year</th>
</tr>
<tr>
<td>01</td>
<td onmouseover="imageAppear()" onmouseout="imageDisappear()">Drive<img src="http://upload.wikimedia.org/wikipedia/en/1/13/Drive2011Poster.jpg" id="place-holder-1" style="zindex: 100; position: absolute; visibility: hidden;"/></td>
<td>Nicolas Winding Refn</td>
<td>2011</td>
</tr>
</table>
<script>
function imageAppear() {
document.getElementById('place-holder-1').style.visibility = "visible";}
function imageDisappear() {
document.getElementById('place-holder-1').style.visibility = "hidden";}
</script>
</body>
My question is, how can I do the same for multiple items without writing X functions for each of my movie? I tried using classes, but it does not seem to work (and even if it does, it would show all the pictures when the user hovers over any of the titles).
You can put the id of the element as a parameter of your function:
<script>
function imageAppear(id) {
document.getElementById(id).style.visibility = "visible";}
function imageDisappear(id) {
document.getElementById(id).style.visibility = "hidden";}
</script>
And in your table call it:
<table>
<tr>
<th>Rank</th>
<th>Title</th>
<th>Director</th>
<th>Year</th>
</tr>
<tr>
<td>01</td>
<td onmouseover="imageAppear('place-holder-1')" onmouseout="imageDisappear('place-holder-1')">Drive<img src="http://upload.wikimedia.org/wikipedia/en/1/13/Drive2011Poster.jpg" id="place-holder-1" style="zindex: 100; position: absolute; visibility: hidden;"/></td>
<td>Nicolas Winding Refn</td>
<td>2011</td>
</tr>
</table>
Using jQuery (since you're writting your solution with JS I think it would be ok for you)
You could something like :
<body>
<h2> My Top 10 Movies </h2>
<table>
<tr>
<th>Rank</th>
<th>Title</th>
<th>Director</th>
<th>Year</th>
</tr>
<tr>
<td>01</td>
<td>Drive<img src="http://upload.wikimedia.org/wikipedia/en/1/13/Drive2011Poster.jpg" id="place-holder-1" style="zindex: 100; position: absolute; display: none;"/></td>
<td>Nicolas Winding Refn</td>
<td>2011</td>
</tr>
</table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
jQuery(function($){
$('tr td:nth-child(2)').mouseenter(function(){
$(this).find('img').show();
});
$('tr td:nth-child(2)').mouseleave(function(){
$(this).find('img').hide();
});
});
</script>
</body>
HTML
<table>
<tr>
<td>01</td>
<td class="imageHover"></td>
<td>Nicolas Winding Refn</td>
<td>2011</td>
</tr>
<tr>
<td>02</td>
<td class="imageHover img1"></td>
<td>Nicolas Winding Refn</td>
<td>2012</td>
</tr>
CSS
.imageHover:hover{
background:url('http://upload.wikimedia.org/wikipedia/en/1/13/Drive2011Poster.jpg');
}
.img1:hover{
background:url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRhKewtNASQ-YZiNOWGXach389U4ZvUiVUyvrxLCAt0OQcR3Evh');
}
.imageHover{
width:100px;
height:100px;
}
.imageHover:before{
content:'Drive';
}
DEMO
I want to highlight the current line when mouse moves, is it possible?
It's not table rows, just plain text in paragraphs.
I'm writing a reading helper plugin for Google Chrome, to help browsing within a big chunk of text.
Depends on your definition of "line". If it's a table row or something you can refer to, you can simply do something like this
<table>
<tbody>
<tr>
<td> Item 1</td><td> Item 2</td>
</tr>
<tr>
<td> Item 1</td><td> Item 2</td>
</tr>
</tbody>
</table>
And use this in your stylesheet
table tr:hover td {
background-color: #dddddd;
}
If you want to highlight Table row then apply this
<STYLE>
<!--
tr { background-color: #DDDDDD}
.initial { background-color: #DDDDDD; color:#000000 }
.normal { background-color: #CCCCCC }
.highlight { background-color: #8888FF }
//-->
</style>
<table border="0" cellspacing="0" bgcolor="#CCCCCC" cellpadding="0">
<tr>
<td bgcolor="#FFCC00" WIDTH="100"><b>Brand</b></td>
<td bgcolor="#FFCC00" WIDTH="100"><b>Dimensions</b></td>
<td bgcolor="#FFCC00" WIDTH="100"><b>Price</b></td>
</tr>
<tr style="background-color:#CCCCCC;"
onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'">
<td>Row A</td>
<td>200x300</td>
<td>$200,000.00</td>
</tr>
</table>
If each line is enclosed with in HTML element of there own the and event handler can be attached.
<html>
<script type="text/javascript" src="./jquery-1.4.2.min.js"> </script>
<script type="text/javascript" >
$(document).ready(function() {
$(".lineclass").hover(function() {
$(this).css("backgroundColor","red");
},
function() {
$(this).css("backgroundColor","");
});
});
</script>
<body>
<p class="lineclass">This is line 1</p><br />
<p class="lineclass">This is line 2</p><br />
<p class="lineclass">This is line 3</p><br />
</body>
</html>