|
JavaScript - Hide A Table Row
I have code that hides some check boxes based on what is selected in a radio button, and it works great. I am wondering if it could hide the entire table row instead of just the boxes so it decreases white space on my form, Here is my current code,
<tr id="playIntroRow"> <td class="editLabel"><span>*</span>Play Intro:</td> <td> <label>Yes <input type="radio" name="playintro" value="1" onclick="document.getElementById('voiceIntroRow').style.visibility='visible';" /> </label> <label>No <input type="radio" name="playintro" value="0" checked onclick="document.getElementById('voiceIntroRow').style.visibility='hidden';" /> </label> </td> </tr> </cfif> <cfif voiceStatus eq "on"> <tr id="voiceIntroRow" style="visibility: hidden;"> <td class="editLabel"><span>*</span>Intro Message:</td> <td><cfscript>voiceIntroRenderer.Render();</cfscript></td> </tr> </cfif> Similar TutorialsHey there! I found a great code to do this, but I would like to have the row defult set to hide via the Javascript. This is because I have many rows and I do not want to set them all to display:none and it would be easier and less bother to just set it in one place which is the JS code. Thank you! ................. Code: <html>
<head>
<script>
function toggle(thisname) {
tr=document.getElementsByTagName('tr')
for (i=0;i<tr.length;i++){
if (tr[i].getAttribute(thisname)){
if ( tr[i].style.display=='none' ){
tr[i].style.display = '';
}
else {
tr[i].style.display = 'none';
}
}
}
}
</script>
</head>
<body>
<span onClick="toggle('nameit');">toggle</span><br /><br />
<table border="1">
<tr nameit=fred >
<td >Always Visible</td>
</tr>
<tr nameit=fred id="hidethis">
<td>Hide this</td>
</tr>
<tr>
<td>s visible</td>
</tr>
</table>
</script>
</body>
</html>
Hi i want to hide a table when user click on a link this is my code looks like PHP Code: <div id="sh"> <table width="800" border="0"> <tr> <td></td> <td></td> <td></td> </tr> </table> </div> <div align="center"><a href="JavaScript:window.print();"><img src="images/print.png" alt="Print this page"/></a></div> is it possible to hide above table at same time print this link clicked? any help would be great sorry for language errors Regards. Hi All, I am trying to get a page to display a certain row in a table if a checkbox has been ticked. The code is as follows: Code: <tr> <td class="cal_l"><label for="upcoming">Events Xtra:</label></td> <td class="cal_r"><input class="text" type="Checkbox" name="upcoming" id="upcoming" value="checked"> <em>(tick to include in Events Xtra section)</em></td> </tr> <tr> <td class="cal_l"><label for="event_description">Xtra Description:</label></td> <td class="cal_r"><textarea name="event_description" cols="60" rows="5" id="event_description"></textarea></td> </tr> The top row is the one that I want to use as the trigger, and the bottom row will be hidden from view unless the checkbox has been ticked (or clicked?). I have tried all sorts of JS / Div controllers etc. but cannot get it to work across table rows. Neil Hi, I need a button that not only resets what is typed in the textarea but also hides all shown tables... Here's how my current set up is... ---------text area------ with a reset button table1 title (when clicked, shows a table under it) table2 title (when clicked, shows a table under it) table3 title (when clicked, shows a table under it) the tables under the main tables have buttons that when clicked on inserts texts in the textarea. Any help would be much much appreciated! I have a php page that essentially builds a pay report in the form of a table. The php side builds the page properly, though it took some time to get the table rows onmouseover and onmouseout functions to work for row highlighting. Now the issue is the table row's onclick function. Here is what the outputed html looks like. Code: <head>
<script type="text/javascript" language="javascript">
function HideShowDiv(divID)
{
if (document.getElementById(divID).style.display == "none")
{
document.getElementById(divID).style.display = "block");
document.writeln("show "+divID);
}
else
{
document.getElementById(divID).style.display = "none";
document.writeln("hide "+divID);
}
}
</script>
<STYLE>
<!--
tr { background-color: transparent}
.normal { background-color: transparent }
.highlight { background-color: #dcfac9 }
//-->
</style></head>
<body>
<!-- Start the main body DIV tag -->
<div id="PageBodyFrame" align="center">
<table width="80%">
<tr><td colspan="4">Georgetown Youth Baseball Association</td></tr>
<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" onClick="HideShowDiv('HD1');">
<td align="left">James Beach</td>
<td align="center">1 Game(s)</td>
<td align="right">$22.5 owed</td>
<td align="center"><a href="pay_report.php?t=l&l=3&act=check&u=1">Cut Check</a></td>
</tr>
<!-- First hidden div embedded in the next row of main table -->
<tr><td colspan="4">
<div id="HD1" style="display:none;">
<table><tr>
<td align="center">Game Date</td>
<td align="center">Teams</td>
<td align="right">Fee</td></tr>
<tr>
<td align="center">2011-08-06</td>
<td align="center">Marin vs LBF</td>
<td align="right">\$22.50</td>
</tr></table></div></td></tr>
<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" onClick="HideShowDiv('HD3');">
<td align="left">John Carpenter</td>
<td align="center">0 Game(s)</td>
<td align="right">$1.5 owed</td>
<td align="center"><a href="pay_report.php?t=l&l=3&act=check&a=3">Cut Check</a></td>
</tr>
<!-- Second Hidden div embedded in table row -->
<tr><td colspan="4">
<div id="HD3" style="display:none;">
<table><tr>
<td align="center">Game Date</td>
<td align="center">Teams</td>
<td align="right">Fee</td>
</tr>
<tr>
<td align="center">2011-08-06</td>
<td align="center">Assigner Fee</td>
<td align="right">\$1.50</td>
</tr></table></div></td></tr>
<tr>
<td colspan="2" align="right">Some Association of Baseball</td>
<td align="right">\$24</td>
<td align="center"></td>
</tr>
</table>
</div> <!-- Closes the main body div container -->
In my javascript function, the writeln() calls are for testing to see if the even is even firing. but nothing gets written to the page. Any thoughts on this would be greatly appreciated. Basically I want the row with the users name to be clickable which will show the details in the hidden div associated with the user. Hi I have a multipage form. I can put data entered in hidden form elements from previous pages. I want to show or hide table rows depending on this data value. For example, I collect a list of names in first form, but if some names are blank I dont want to show the table row associated with that name to collect more data. I have seen loads of code to toggle rows but cant find any which shows me how to toggle on a variable. Thanks in advance. Hi to All, I have a table that contains many rows, some in italian with code <td nome='riga_i'> and some in english with code <td name='row_e'>. I have created two buttons with different background flags: italy and uk, so when one pushes the button with flag uk, the html page will be reloaded with only english rows, and when one pushes the button with flag it, the same page is reloaded containing only italian rows. All the code posted here works well, but I think that the code can be better because to reach this result I had to dupplicate the same function and I don' t like this. Here the code: <html> <head> <script type="text/javascript"> function toggle(name) { tr=document.getElementsByTagName('tr') for (i=0;i<tr.length;i++){ if (tr[i].getAttribute(name)){ if (tr[i].style.display=='none'){tr[i].style.display = '';} else {tr[i].style.display = 'none';} } } } // function toggle(nome) { tr=document.getElementsByTagName('tr') for (i=0;i<tr.length;i++){ if (tr[i].getAttribute(nome)){ if (tr[i].style.display=='none'){tr[i].style.display = '';} else {tr[i].style.display = 'none';} } } } </script> </head> <body onload="toggle('name');"> <table> <tr nome="riga_i"> <td>REQUISITI RELATVI AL SERVIZIO</td> <td> </td> <td><input type="button" onclick="toggle('nome');toggle('name');" style="background-image: url(../images/flag_uk.jpg); background-color:Transparent;" /></td></tr> <tr name="row_e"> <td> </td> <td>REQUIREMENTS RELATED TO THE SERVICE</td> <td><input type="button" onclick="toggle('name');toggle('nome');" style="background-image: url(../images/flag_italy.jpg); background-color:Transparent;" /></td></tr> .... .... and so on.... ..... </table></html> To better the code I have tried in this way but without success ... <html> <head> <script type="text/javascript"> function toggle(this) { if (this=='nome' || this=='name'){ tr=document.getElementsByTagName('tr') for (i=0;i<tr.length;i++){ if (tr[i].getAttribute(this)){ if (tr[i].style.display=='none'){tr[i].style.display = '';} else {tr[i].style.display = 'none';} } } } } </script> </head> Thanks in advance !!! Hi I want to get javascript to show or hide a row in a table depending on whether a value is held by a variable collected in a mulitple part formmail. If only 1 adult fills in their name on the earlier form there is no need to show the row which asks him to agree to membership on a later form page. This is what Ive got so far Code: <form name="frm3" method="post" action="bookingscript.php">
<input type="hidden" name="adult2fn" value="$adult2name" />
<script Language="JavaScript">
var name1 = document.frm3.adult2fn.value;
if(name1 =="")
{alert("hello");document.getElementById("hidden_row").style.display = 'none';}
else
{alert("no way");document.getElementById("hidden_row").style.display = '';};
</script>
<table border="1">
<tr>
<td>Always visible</td>
</tr>
<tr id="hidden_row">
<td>Hide this</td>
</tr>
<tr>
<td>Always visible</td>
</tr>
</table>
</form>
If $adult2name is blank then name1 is blank and the row does not show, else $adult2name contains a name, name1 is not blank and the row shows. I have tried displaying the hidden form field (by changing it to text), and adding my own content, also putting in my own values instead if $adult2name and the Alerts appear as appropriate, but the whole table disappears whilst the alert is on and reappears when the alert is OKed for either condition of the if. Same in Firefox and IE7 & 8 Could someone please tell me the error of my ways. Many thanks Richard Hi, I am doing some work, where I want to have a table heading that remains in a fixed position, when the window is scrolled (I will ultimately have a very long table). I have written the code below, which fixes the heading. I am trying to make it so that each body row of the table gets hidden, when the window is scrolled such that the row passes above the heading row. To do this I need to somehow detect the distance of each row from the top of the window as the window is scrolled so I can detect when it goes above the fixed heading row. I have tried to do this using offsetTop and scrollTop in the code below, but it doesn't seem to be working (in Safari at least, which I am using for my main testing). Does anyone know a simple way of detecting the distance to the top of the window so I can use it in my code below, which will work in all browsers? (I don't really want to use div, and overflow-y:auto to achieve the fixed heading scrollable table, because I don't want to have a sub-section with its own scrollbar. I just want to have the main page scrollbar when the list gets long enough to require it.) Thanks for your help. Cheers, Laudrup Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>test simple scroller</title>
<style type="text/css">
.myvisible
{
visibility:visible;
}
.myinvisible
{
visibility:hidden;
}
table#mytable td
{
border-color: black;
border-width: 1px 1px 1px 1px;
border-style: solid;
}
table#mytable th
{
border-color: black;
border-width: 1px 1px 1px 1px;
border-style: solid;
}
table#mytable thead
{
position:fixed;
top:50px;
background:white;
z-index:+1;
}
</style>
<script language="JavaScript">
<!-- Beginning of JavaScript -
var rows;
function hideoverflow() {
rows = document.getElementById("mytable").getElementsByTagName("tr");
for (i=1; i<rows.length; i++){
if((rows[i].ScrollTop - rows[i].offsetTop)>50){
rows[i].className="myinvisible";
}
else{
rows[i].className="myvisible";
}
}
}
// - End of JavaScript - -->
</script>
</head>
<body onScroll='hideoverflow();'>
<p>My heading</p><br>
<table id="mytable" border="0" cellspacing="0"bordercolor="black">
<thead>
<tr>
<th width="100" bgcolor="white">HeadA</th>
<th width="140" bgcolor="white">HeadB</th>
<th width="120" bgcolor="white">HeadC</th>
</tr>
</thead>
<tbody>
<tr>
<td width="100">row1</td>
<td width="140">row1</td>
<td width="120">row1</td>
</tr>
<tr>
<td>row2</td>
<td>row2</td>
<td>row2</td>
</tr>
<tr>
<td>row3</td>
<td>row3</td>
<td>row3</td>
</tr>
<tr>
<td>row4</td>
<td>row4</td>
<td>row4</td>
</tr>
<tr>
<td>row5</td>
<td>row5</td>
<td>row5</td>
</tr>
<tr>
<td>row6</td>
<td>row6</td>
<td>row6</td>
</tr>
<tr>
<td>row7</td>
<td>row7</td>
<td>row7</td>
</tr>
<tr>
<td>row8</td>
<td>row8</td>
<td>row8</td>
</tr>
<tr>
<td>row9</td>
<td>row9</td>
<td>row9</td>
</tr>
<tr>
<td>row10</td>
<td>row10</td>
<td>row10</td>
</tr>
<tr>
<td>row11</td>
<td>row11</td>
<td>row11</td>
</tr>
<tr>
<td>row12</td>
<td>row12</td>
<td>row12</td>
</tr>
<tr>
<td>row13</td>
<td>row13</td>
<td>row13</td>
</tr>
<tr>
<td>row14</td>
<td>row14</td>
<td>row14</td>
</tr>
<tr>
<td>row15</td>
<td>row15</td>
<td>row15</td>
</tr>
<tr>
<td>row16</td>
<td>row16</td>
<td>row16</td>
</tr>
<tr>
<td>row17</td>
<td>row17</td>
<td>row17</td>
</tr>
<tr>
<td>row18</td>
<td>row18</td>
<td>row18</td>
</tr>
</tbody>
</table>
</body>
</html>
Hello forum, I need some help please. I need a javascript which hides X and shows Y if a button (text) is pressed. Needs to work on a webpage. Can someone help? I have this iframe code. Code: <iframe width="300" height="180" style="margin-bottom:5px; z-index:-1000;" src="http://www.ichartsonline.com/external/tradeback.aspx" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> I have a WP plugin for image lightboxes. When the lightbox pops up, the iframe is overlayed on it. Is there any easy fix for this? Do you need to see the plugin Javascript? Any help will be much appreciated! Thanks hi i have two buttons.. home and aboutus in my page.. and when i click on home i have the content for home inside a html page and i am calling the html file inside this Homepage using javascript(externally calling the html files) Now what i need is, onclick of HOme button.. i have written a code like <a href="main_Home.html" onclick="updateObject(this); return false;"> and the javascript i got from dhtml goodies is <script type="text/javascript"> function updateObject(which){ document.getElementById('one').innerHTML = '<'+'object id="foo" name="foo" type="text/html" data="'+which.href+'"><\/object>'; } </script> now i also need a hide a div on the onclick funtion.. how do i use multiple functions? i need to hide the default homepage content and load the html file there.. Pls help.. Hello, I'm trying to have a div be hidden on loading the page but when you click a link it will show the div... here's code I have but it doesn't show when you click the link... <script type="text/javascript"> function show(){ document.getElementById(test).style.display="block"; } </script> <div id="test" style="display:none;"> <p>Some text</p> </div> <a href="#" onclick="show(); return false;">Show</a> Hello, I have the folowing code but it seems to be broken between "SM Decision Support" and "Incident and Request Management". Does anyone know how I resolve ?. The idea is when somebody opens the page all the sections are hidden/uncollapsed and the user can collapse individually each section with a click or by hitting the expand/collapse all link. ------------ Have placed code in attachment as too long for this section I don't know a lot about Javascript... still learning.. I am trying to create a show/hide effect that displays an image based on the users text input. I have coded this before for a list/menu and it works fine. With this particular project there are too many selections to choose from to put in a list/menu. I am trying to use if and else if statements to make this work. With the code the way it is only the first function on the list works. I tried just using repeating if statements and only the last function on the list works. Here is the code: Code:
<script type="text/javascript" >
function showSample() {
if (document.getElementById('input').value='SW001') {
document.getElementById('SW001').style.display='block';
document.getElementById('SW002').style.display='none';
document.getElementById('SW003').style.display='none';
document.getElementById('SW004').style.display='none';
}
else if (document.getElementById('input').value='SW002') {
document.getElementById('SW001').style.display='none';
document.getElementById('SW002').style.display='block';
document.getElementById('SW003').style.display='none';
document.getElementById('SW004').style.display='none';
}
else if (document.getElementById('input').value='SW003') {
document.getElementById('SW001').style.display='none';
document.getElementById('SW002').style.display='none';
document.getElementById('SW003').style.display='block';
document.getElementById('SW004').style.display='none';
}
else if (document.getElementById('input').value='SW004') {
document.getElementById('SW001').style.display='block';
document.getElementById('SW002').style.display='none';
document.getElementById('SW003').style.display='none';
document.getElementById('SW004').style.display='none';
}
else if (document.getElementById('input').value='SW005') {
document.getElementById('SW001').style.display='none';
document.getElementById('SW002').style.display='none';
document.getElementById('SW003').style.display='none';
document.getElementById('SW004').style.display='block';
}
}
</script>
<style type="text/css">
<!--
#main {
width: 400px;
margin-right: auto;
margin-left: auto;
height: 125px;
}
#imageArea {
float: right;
width: 200px;
}
#formArea {
float: left;
width: 200px;
height: 125px;
}
.image {
height: 125px;
width: 125px;
margin-right: auto;
margin-left: auto;
display: none;
}
#SW001 {
background: url(../_images/Colorfil/SW0001.jpg) no-repeat center center;
}
#SW002 {
background: url(../_images/Colorfil/SW0002.jpg) no-repeat center center;
}
#SW003 {
background: url(../_images/Colorfil/SW0003.jpg) no-repeat center center;
}
#SW004 {
background: url(../_images/Colorfil/SW0004.jpg) no-repeat center center;
}
#SW005 {
background: url(../_images/Colorfil/SW0005.jpg) no-repeat center center;
}
-->
</style>
</head>
<body>
<div id="main">
<div id="imageArea">
<div class="image" id="SW001"></div>
<div class="image" id="SW002"></div>
<div class="image" id="SW003"></div>
<div class="image" id="SW004"></div>
<div class="image" id="SW005"></div>
</div>
<div id="formArea">
<form action="" method="get">
<input type='text' name="input" id='input' />
<input name="" type="button" onclick="showSample(this.selectedIndex)"/>
</form>
</div>
</div>
</body>
</html>
Any help would be greatly appreciated! ok trying to get a Div tag to show if something is True and hide if something is False JS Code: unction eToggle(anctag,darg)
{
var ele = document.getElementById('Module1');
var ele = document.getElementById('Module2');
var ele = document.getElementById('Module3');
var ele = document.getElementById('Module4');
if("module1" + "module2" + "module3" + "module4" <40)
{
div.id.Failed = "block";
div.Failed = "Failed";
}
else
{
div.style.Passed = "block";
div.Passed = "show";
}
}
HTML Code: <div id="Fail" class="hidden" style="display: none"><b><i>You will need to Repeat the Semester!</b> <br /> </div> <div id="Passed" class="hidden" style="display: none"> <img src="faces.png" width="50" height="50"><b><i> "Good Job you passed the Semster!"</b></div> Hi guys, im new to forums and need some help with my website. I have embed a flash player known as: JW player into my website and put it into a div. Now my problem is I want javascript to hide the div containing the flash player for atleast a few seconds to display a loading image.gif. How would I set this up? Im not to familiar about using javascript so im not sure if its even possible. Anways thx for any help ore suggestions related to this subject. I kinda new to Javascript, and can get by with most of the basic bits and bods I need to do the day to day work on websites, but I've come across something that is causing me some issues, I could use some help. The situation is, we have a webpage with 2 divs on it, one div has a javascript calculator and the other div sows the calculations in 2 separate tabs, the calc works and the tabs work no worries, the tabs are done in jquery. The issue I've got is I need to hide the 2nd div with the tabs in until the user has done the calculation, I had this working no problem, until we switched to using jquery for the tabs, using a simple Code: window.onload = hide;
function hide() {
document.getElementByID('tabs').style.display = 'none';
}
But now I don't know how or where to put this in the whole load of code for the jquery Code: <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tab_header li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tab_header li").click(function() {
$("ul.tab_header li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
</script>
Can anyone give me any guidance at all?? Cheers Hi all, Check this code: PHP Code: <a>text</a> <div id="pkg">pkg</div> <div id="table_pkg">table_pkg</div> I'd like to show table_pkg and hide pkg when I click on <a>text</a>. How can I do? Thank you very much I am a middleware developer for a design and manufacturing software. We recently have gone from using Crystal reports to using xml based reporting. I am just begining to write reports using xsl, css and java script and transforming to html. The report I am working on has several tables each in a separate div. These tables are populated based on the xml file output form a job file. Base on job settings one or more tables may have no information in them. What I would like to do is hide the divs with empty tables when the page is loaded. I have looked through the forums here and on other sites and have found perhaps hundreds of examples of java script for showing and hiding divs with user input or by being set to a hide state by default. However I need it to be more dynamic. I think this can be done with java script but not sure hopefully someone can help me. Thanks PShorty |
|||||||