|
JavaScript - Better Function To Hide/show Multiple Rows Of Table
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 !!! 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>
Let me start by saying I'm a noob to JavaScript. What I'm trying to do for my website is have a select menu that shows the number of div's that's selected. I found a JS that I could do that with, but it only toggles, not change specifically what's selected. So if you click the wrong one, it doesn't work right. Here's what I got: Code: <body>
<script type="text/javascript">
function toggle_visibility(){
for(var i = 0,len = arguments.length;i < len; i++){
var e = document.getElementById(arguments[i]).style,d = e.display;
e.display = (d == "block") ? "none" : "block";
}
}
</script>
<select name="select" id="select">
<option>0</option>
<option onclick="toggle_visibility('1');" >1</option>
<option onclick="toggle_visibility('1','2');">2</option>
<option onclick="toggle_visibility('1','2','3');">3</option>
<option onclick="toggle_visibility('1','2','3','4');">4</option>
</select><br>
<div id="1" style="display: none;">Test1</div>
<div id="2" style="display: none;">Test2</div>
<div id="3" style="display: none;">Test3</div>
<div id="4" style="display: none;">Test4</div>
</body>
Any help would be appreciated, cause I'm lost. Hello, I'm working on a top menu consisting of MENU A, MENU B and MENU C each with it's own drop down submenu on a separate layer. I'm using ShowContent and HideContent to display the submenus onmouseover. So on mouseover it shows "LayerA" and hides "LayerB" and "LayerC." The problem I'm having is that it will only hide one of the layers. Which ever one is listed first. I'm sure the problem lies in HideContent('LayerB','LayerC') but I don't know how to resolve it. Any help would be much appreciated. Here is the script I'm using: <script type="text/javascript" language="JavaScript"><!-- function HideContent(d) { if(d.length < 1) { return; } document.getElementById(d).style.display = "none"; } function ShowContent(d) { if(d.length < 1) { return; } document.getElementById(d).style.display = "block"; } function ReverseContentDisplay(d) { if(d.length < 1) { return; } if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; } else { document.getElementById(d).style.display = "none"; } } //--></script> And here is my menu: <td><a href="XXXX" onmouseover="ShowContent('LayerA'); HideContent('LayerB','LayerC')">MENU A</a> </td> <td><a href="XXXX" onmouseover="ShowContent('LayerB'); HideContent('LayerA','LayerC')">MENU B</a> </td> <td><a href="XXXX" onmouseover="ShowContent('LayerC'); HideContent('LayerA','LayerB')">MENU C</a> </td> I have a page that has 26 divides one for each letter A-Z. I have the script written so that when you click on the link for one letter it shows that divide and hides the rest. However, I think there has got to be an easier way to do this because the code is so long! It works great but takes forever to write! Does anyone have any suggestions to reduce the size of this code? Code: Javascript: (Short and simple code)
function showstuff(divID){
document.getElementById(divID).style.visibility="visible";
document.getElementById(divID).style.display="block";
window.location.hash="names";
}
function hidestuff(divID){
document.getElementById(divID).style.visibility="hidden";
document.getElementById(divID).style.display="none";
}
HTML: (WHAT A CLUSTER!)
<a href="javascript:showstuff('adivide');hidestuff('bdivide');hidestuff('cdivide');hidestuff('ddivide');">A</a>
So I have 26 functions being called for each click! There must be a simpler way to do this. Perhaps I can write a function that calls all 25 hidestuff() functions and then I can add the one showstuf(). So I am trying to hide content and show it when selected with a select box. The first select box works fine no problems. However I added a second one with two options, and it will not work at all. If I use the same name it messes up, and if I make a new name, it does nothing at all. ShowNext function is the new one I added that doesn't work. PHP Code: <script type="text/javascript"> function ShowReg(op) { document.getElementById('public').style.display='none'; document.getElementById('alliance').style.display='none'; switch (op) { case 1 : document.getElementById('public').style.display="block"; break; case 2 : document.getElementById('alliance').style.display="block"; break; default : break; } } function ShowNext(op) { document.getElementById('randomwin').style.display='none'; document.getElementById('setentry').style.display='none'; document.getElementById('highestlevel').style.display='none'; document.getElementById('question').style.display='none'; switch (op) { case 1 : document.getElementById('randomwin').style.display="block"; break; case 2 : document.getElementById('setentry').style.display="block"; break; case 3 : document.getElementById('highestlevel').style.display="block"; break; case 4 : document.getElementById('question').style.display="block"; break; default : break; } } </script> PHP Code: <tr><td><b>Privacy:</b></td><td> <select name="privacy" id="choice" onChange="ShowReg(this.selectedIndex)"> <option value="error">Select One</option> <option value="public">Public</option> <option value="alliance">Alliance Only</option> </select> </td></tr></table><br /> <div id="public" style="display:none"> <p><b>Contest will be made Public for all players to use.</b> </div> <div id="alliance" style="display:none"> <p><b>Contest will be made available to only alliance members.</b> </div> <tr><td><b>Type:</b></td><td> <select name="contype" id="choice" onChange="ShowNext(this.selectedIndex)"> <option value="error">Select One</option> <option value="randomwin">Random Draw</option> <option value="setentry">Marked Entry</option> <option value="highestlevel">Highest Level</option> <option value="question">Answer Question</option> </select></td></tr></table><br /> <div id="randomwin" style="display:none"> <p>Random draw selected </div> <div id="winner" style="display:none"> <p>Select Entry number to auto win: <select name="entrypick"> <option value="5">Entry 5</option> <option value="6">Entry 6</option> <option value="7">Entry 7</option> <option value="8">Entry 8</option> <option value="9">Entry 9</option> <option value="10">Entry 10</option> <option value="11">Entry 11</option> <option value="12">Entry 12</option> <option value="13">Entry 13</option> <option value="14">Entry 14</option> <option value="15">Entry 15</option> <option value="16">Entry 16</option> <option value="17">Entry 17</option> <option value="18">Entry 18</option> <option value="19">Entry 19</option> <option value="20">Entry 20</option> <option value="21">Entry 21</option> <option value="22">Entry 22</option> <option value="23">Entry 23</option> <option value="24">Entry 24</option> <option value="25">Entry 25</option> <option value="26">Entry 26</option> <option value="27">Entry 27</option> <option value="28">Entry 28</option> <option value="29">Entry 29</option> <option value="30">Entry 30</option> </select> </div> Hi, I am new to javascript so any help would be much appreciated. I found the following script online to show/hide a login div. <script language="JavaScript" type="text/javascript"> function login(showhide){ if(showhide == "show"){ document.getElementById('popupbox').style.visibility="visible"; }else if(showhide == "hide"){ document.getElementById('popupbox').style.visibility="hidden"; } } </script> It works really well but I have other div I would also like to show/hide. Is it possible to have a variable in the function that I could pass the name of the div to show/hide. I have a ul list that I am using for a navigation menu and I would like to be able to click on items in the list to show different div's. I assume this is possible, so could someone please give me an indication of how to do it as I have been trying for a few days now and no joy. Thanks, James I am using the following code to show / hide form elements within a div based upon the drop down choice. Does anyone know how this code can be amended to use multiple drop downs within one form? Code: <html>
<head>
<title>Show and Hide</title>
<script>
//*********************************************
// Function that Shows an HTML element
//*********************************************
function showDiv(divID)
{
var div = document.getElementById(divID);
div.style.display = ""; //display div
}
//*********************************************
// Function that Hides an HTML element
//*********************************************
function hideDiv(divID)
{
var div = document.getElementById(divID);
div.style.display = "none"; // hide
}
//*****************************************************************************
// Function that Hides all the Div elements in the select menu Value
//*****************************************************************************
function hideAllDivs()
{
//Loop through the seclect menu values and hide all
var selectMenu = document.getElementById("selectMenu");
for (var i=0; i<=selectMenu.options.length -1; i++)
{
hideDiv(selectMenu.options[i].value);
}
}
//*********************************************
// Main function that calls others to toggle divs
//*********************************************
function toggle(showID)
{
hideAllDivs(); // Hide all
showDiv(showID); // Show the one we asked for
}
</script>
</head>
<body onload="hideAllDivs();">
<select id="selectMenu" onchange="toggle(this.options[this.options.selectedIndex].value)">
<option value="formNumber1"> Show Form 1 </option>
<option value="formNumber2"> Show Form 2 </option>
<option value="formNumber3"> Show Form 3 </option>
<option value="formNumber4"> Show Form 4 </option>
</select>
<div id="formNumber1"> I am Form Number one. Any content within this div will be showed</div>
<div id="formNumber2"> I am Form Number two. Any content within this div will be showed</div>
<div id="formNumber3"> I am Form Number three. Any content within this div will be showed</div>
<div id="formNumber4"> I am Form Number four. Any content within this div will be showed</div>
</body>
</html>
Thanks in advance! 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>
I have the CoffeeCup Website Font software that gives me a peek at the sIFR Javascript functions, but I can't figure out how to sIFR only the visible Div on my page. This script (from CoffeeCup) is in my page header: Quote: <script type="text/javascript"> //<![CDATA[ var h1_font = { src: 'websitefontdata/fonts/___1942_report[regular].swf' }; var h2_font = { src: 'websitefontdata/fonts/___gatecrasher[regular].swf' }; var h3_font = { src: 'websitefontdata/fonts/___High_Strung[regular].swf' }; var h4_font = { src: 'websitefontdata/fonts/___Palatino_Linotype[regular].swf' }; var h5_font = { src: 'websitefontdata/fonts/___Palatino_Linotype[regular].swf' }; var h6_font = { src: 'websitefontdata/fonts/___Beffle[regular].swf' }; sIFR.useStyleCheck = false; sIFR.fixHover = true; sIFR.fitExactly = true; sIFR.repaintOnResize = true; sIFR.preserveSingleWhitespace = false; sIFR.fromLocal = true; sIFR.activate(h1_font, h2_font, h3_font, h4_font, h5_font, h6_font); sIFR.replace(h1_font, {selector: 'h1', css: [ '.sIFR-root { line-height: 1em; font-size: 23px; color: #004080; background-color: #FFFFFF; text-align: left; font-weight: normal; font-style: normal; text-decoration: none; visibility: hidden; }', 'a { text-decoration: none; }', 'a:link { color: #004080; }', 'a:hover { color: #FF0000; }' ], filters: { DropShadow: { quality: 3, angle: 45, knockout: false, distance: 2.000000, color: '#000000', strength: 1.000000 } }, wmode: 'transparent' }); sIFR.replace(h2_font, {selector: 'h2', css: [ '.sIFR-root { line-height: 1em; font-size: 18px; color: #006C61; background-color: #FFFFFF; text-align: left; font-weight: normal; font-style: normal; text-decoration: none; visibility: hidden; }', 'a { text-decoration: none; }', 'a:link { color: #0000FF; }', 'a:hover { color: #FF0000; }' ], filters: { DropShadow: { quality: 3, angle: 45, knockout: false, distance: 4.000000, color: '#000000', strength: 1.000000 }, Glow: { quality: 2, strength: 2, blurX: 6.000000, blurY: 6.000000, knockout: 0, inner: 0, alpha: 0.250000, color: '#FFFF00' } }, wmode: 'transparent' }); sIFR.replace(h3_font, {selector: 'h3', css: [ '.sIFR-root { line-height: 1em; font-size: 23px; color: #000000; background-color: #FFFFFF; text-align: left; font-weight: normal; font-style: normal; text-decoration: none; visibility: hidden; }', 'a { text-decoration: none; }', 'a:link { color: #0000FF; }', 'a:hover { color: #FF0000; }' ], filters: { }, wmode: 'transparent' }); sIFR.replace(h4_font, {selector: 'h4', css: [ '.sIFR-root { line-height: 1em; font-size: 14px; color: #000000; background-color: #FFFFFF; text-align: left; font-weight: normal; font-style: normal; text-decoration: none; visibility: hidden; }', 'a { text-decoration: none; }', 'a:link { color: #000000; }', 'a:hover { color: #FF0000; }' ], filters: { }, wmode: 'transparent' }); sIFR.replace(h5_font, {selector: 'h5', css: [ '.sIFR-root { line-height: 1em; font-size: 14px; color: #000080; background-color: #FFFF80; text-align: left; font-weight: normal; font-style: normal; text-decoration: none; visibility: hidden; }', 'a { text-decoration: none; }', 'a:link { color: #0000FF; }', 'a:hover { color: #FF0000; }' ], filters: { }, wmode: 'transparent' }); sIFR.replace(h6_font, {selector: 'h6', css: [ '.sIFR-root { line-height: 1em; font-size: 20px; color: #004080; background-color: #FFFFFF; text-align: left; font-weight: normal; font-style: normal; text-decoration: none; visibility: hidden; }', 'a { text-decoration: none; }', 'a:link { color: #0000FF; }', 'a:hover { color: #FF0000; }' ], filters: { DropShadow: { quality: 3, angle: 45, knockout: false, distance: 2.000000, color: '#000000', strength: 1.000000 } }, wmode: 'transparent' }); //]]> </script> Here's what I'm working with to show a specific Div: Quote: function showSec(n) { hideSec(); if (ng5) document.getElementById('sec1').style.visibility = "visible"; else if (ns4) document.layers["sec1"].visibility = "show"; else if (ie4) document.all["sec1"].style.visibility = "visible"; if (ng5) document.getElementById('sec'+n).style.visibility = "visible"; else if (ns4) document.layers["sec"+n].visibility = "show"; else if (ie4) document.all["sec"+n].style.visibility = "visible"; } How do I have sIFR only draw the visible Divs? Hi, I am very new to javascript and html. I am trying to create a function which will hide or show a div (div1). Right now, it is always showing the div whether the boolean value is true or false. I know that it is getting inside the else if part, but it doesn't seem to be working. Code: <script type="text/javascript">
function hideDiv(flag)
{
if (flag == false)
{
document.getElementById('div1').style.visibility="visible";
}
else if (flag == true)
{
document.getElementById(div1).style.visibility="hidden";
}
}
var bool = new Boolean(true)
hideDiv(bool);
</script>
<body>
<div id="div1">
Text!
</div>
</body>
Thank you for taking a look Hi I need help getting my show/hide function to work in all browsers. The function below works everywhere but Firefox. Can someone see why it's not working? My javascript function: Code: <script language="javascript" type="text/javascript">
function hideShow(el_id){
var el=document.getElementById(el_id);
if(el_id.style.display!="none"){
el_id.style.display="none";
}else{
el_id.style.display="";
}
}
</script>
My php code (sensured): PHP Code: $sql="*****"; $result= mssql_query($sql); echo "<table>"; echo "<tr><th>Header1</th><th>Header2</th><th>Header3</th><th>Header4</th></tr>"; $row=0; $row2=1; while($row = mssql_fetch_array($result)) { $id=$row["id"]; $row++; $row2++; echo "<tr>"; echo "<td>". $row['field1'] ."</td>"; echo "<td>". $row['field2'] ."</td>"; echo "<td><a onclick='hideShow(row$row);'> hide/show details</a></td>"; echo "</tr>"; echo "<tr id='row$row' style='display:none;'>"; echo "<td><b>Input1: </b>". $row['field3']."</td>"; echo "<td><b>Input2: </b>". $row['field4'] ."</td>"; echo "<td><b>Input3: </b>". $row['field5'] ."</td>"; echo "<td><a onclick='hideShow(row$row2)'>Delete this info</a></td>"; echo "</tr>"; echo "<tr id='row$row2' style='display:none;'>"; echo "<td>Are you sure you want to delete?</td>"; echo "<td><a onClick=menuRequest('$id')>Yes</a></td>"; echo "<td><a onClick=menuRequest('home')>No</a></td>"; echo "</tr>"; $row++; $row2++; } 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 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, 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! 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. 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 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 have a problem with my script, I have a php request and the result is shown in a div, so there is several divs and their id is the "id" in the database, and I want that if we click on a link, it hides every divs... Here is how I tried to do that: Code: <script type="text/javascript">
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
targetElement.innerHTML = "" ;
}
</script>
Code: $hide = "";
while($ligne=mysql_fetch_array($ress)){
$hide.= "visibilite('$ligne[id]'); ";
$return.= "<tr><td>$ligne[heure] - $ligne[fin]</td><td>$ligne[sport]</td><td>$ligne[salle]</td><td>$ligne[ville]</td><td>$dispo/$ligne[place]</td><td><div id=$ligne[id]>";
$return.= "<a href=# onClick=\"maFonctionAjax($ligne[id],$tennis); $hide return false\">Reserver</a>";
$return.= "</div></td></tr>";
}
Every div'id is the id in the database, with the onClick we call an ajax function and $hide which is the call for the function visibilite for each div It works for some request, I don't know how is it possible because I can have the same number of results and sometimes it works, and sometimes not... Does somebody can help me? Thanks a lot! Jeff I am trying to select multiple <tr>'s (onclick) in a <table> and then move every selected <tr> to another location in the table (on click). I will also be adding functionality to delete specific rows from a table by clicking on a <td> element, though I've already done this by doing. document.getElementById("container").deleteRow(row.parentNode.rowIndex); I am just completely unsure of how to tackle storing each selected row -- and then moving each selected row elsewhere in the table. I've seen many examples that accomplish close to what I am trying to acheive, however, they are all done via drag and drop and do not allow selecting multiple rows. |
|||||||