Hide/show <tr> Distorts Table Layout?

Nov 23, 2010

I'm using javascript to hide/show individual rows in a table. If a row as an id that starts with active_0 it will be hidden when I mark the checkbox.

That works but when I unhide them the table is distorted. The table in the example below should have three rows and one column but when I unhide rows the two first rows become one row with two columns.

[URL]

I have only tested this with Firefox 3.6 as I dont't have anything else installed at the moment.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

[Code].....

View 5 Replies


ADVERTISEMENT

JQuery :: Toggle Function - Hide/show Table When Hide/show Button Is Pressed

Sep 12, 2011

I am trying to hide/show table when hide/show button is pressed

Problem: The code works fine when I remove 'slow' from line 10. But with 'slow' in line 10 content of toggleButton doesnt change from Hide to Show when pressed.

Code:

View 1 Replies View Related

Show/hide A Table Row

Jul 23, 2005

I would like to add some javascript to show/hide a certain row of a
table. The first row of the table contain the hyperlink that calls the
javascript the second row is the one i want to show/hide with the
javascript in a toggle fashion.

the problem is a know very little javascript and have become incredibly
frustrated because i went ahead thinking it was going to be like C. its not.

I know i can use these lines to do the actual work:

document.getElementById("row").style.display = "none"; // hides row
document.getElementById("row").style.display = "inline"; // shows row

but I don't think i can use a getElementById exactly because i want to
reference the element via its relationship to the hyperlink that calls
the javascript, i know this can be done. You see there will be several
tables on one page and i want to be able to toggle each one
independently; hopefully with the same bit of javascript.

View 10 Replies View Related

Show / Hide DIV On Different Table Row

Jun 2, 2009

I have a table with three columns (and about 20+ rows). The third column has embedded javascript to show/hide additional information. It works, however when I try to show/hide information on a different table row (except the top), only the top row opens/shows.

Here's my script:
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Show";
}else {
ele.style.display = "block";
text.innerHTML = "Hide";
}}
</script>

And here's my HTML:
</head><body>
<h2>Beaus CD Collection</h2>
<table border="1">
<tr bgcolor="#99CCCC">
<th>Artist:</th>
<th>Album Title:</th>
<th>More Information:</th></tr>
<xsl:for-each select="CATALOG/CD"><tr>
<td><xsl:value-of select="ARTIST"/></td>
<td><xsl:value-of select="TITLE"/></td><td>

<a id="displayText" href="javascript:toggle();">Show</a>
<div id="toggleText" style="display: none">
<ul>
<li>Country: <xsl:value-of select="COUNTRY"/></li>
<li>Record Company: <xsl:value-of select="COMPANY"/></li>
<li>Price: <xsl:value-of select="PRICE"/></li>
<li>Year of Release: <xsl:value-of select="YEAR"/></li>
</ul></div>
</td></tr>
</xsl:for-each>
</table></body></html>
</xsl:template>
</xsl:stylesheet>

I didn't form this script myself - I just grabbed it online from a separate source.

View 2 Replies View Related

JQuery :: Hide & Show Table Row?

Apr 27, 2011

jquery hide & show table row concept

View 1 Replies View Related

JQuery :: Show/Hide Div In Table In IE?

Apr 23, 2010

Note that these issues are specific to IE8, and I am using for the purpose of creating a program which works in IE, FF, Chrome, so I've only tested my solutions in those 3. I wasn't sure whether to start this as a question (as I am asking for an easier solution) or if I note it as a problem or discussion.

Any time I've used .show(x) where x > 0 on anything inside of a table, I get this "flicker", which has been mysterious to me for a while. As I need the row to expand it's height when the object grows, so I can't use "position:absolute;", which I found as a suggestion elsewhere (and does work...if the space is already allocated).

[Code]...

I hope this helps anyone who is having the IE "flicker" issue, and I hope even more that someone out there can give an easier solution!

View 2 Replies View Related

Regarding The Hide/show Of The Cells In A Table?

Aug 16, 2010

I have a query regarding the hide/show of the cells in a table.

The first column is 'Yes and No' options using combo box, 2nd option is 'input field', 3rd column is also 'Yes and No' option using combo box, and 4th option is also 'input field'.

What I want is to make a table using JAVASCRIPT, in which if i select 'No' from the first row first column, i want to hide the remaining 3 cells of the first row. Otherwise if i select 'yes' from the first row first column i want to show all the 3 other options of the first row. Also in between if I select 'No' from the first row third column i want to hide the first row fourth column cell. Selecting 'yes' from the first row third column will show the first row fourth column.

I want apply the same setting of hide and show cells into the remaining columns also.

By selecting 'no' from first column -> hide other corresponding cells of the row
by selecting 'yes' from the first column -> show other corresponding cells of the row

AND ALSO

By selecting 'no' from third column -> hide fourth cell of the corresponding/same row by selecting 'yes' from the third column -> show fourth cell of the corresponding/same row

View 1 Replies View Related

Show / Hide Table With A Click?

Nov 19, 2010

I want to hide a table when user click on a link

this is my code looks like code...

is it possible to hide above table at same time print this link clicked?

View 2 Replies View Related

Hide/show Other Cells In A Row Of A Table?

Aug 10, 2010

I have a query relating javascript hide/show cells in a table

I have created a table of 5 rows and 5 columns. The first row is drop down menu having Yes and No option and remaining cells in the row are two text box and two drop down menu.

I want to hide (or may be block) the other four cells as per the option selected from the drop down menu in the first row. If i select No from the drop down menu from the first row i want to hide the remaining cells in the row and if i select Yes I want to show the remaining cells in the row.

View 1 Replies View Related

Show / Hide Table On Selection?

Nov 17, 2011

I got a selection tag which pulls values from DB to populate,i want to hide or show related div/table based on the selection. now i got two confusions. how can i know what is selected coz the option tag value is coming from DB, also i never work with show/hide thingy. how can i achieve it?

View 6 Replies View Related

How To Show And Hide An Extra Row In A Table?

Feb 4, 2004

I want to show one extra row in a table when the user click on the option button, and hide this row when the user click on the other button. Code:

View 4 Replies View Related

Show And Hide Rows Of The Table?

Mar 15, 2011

I ahve this table as code shown below with buttons Up and down above and below the table respectively now whgat i want to do is that as I have ten enteries in the table.I want to show only 6 of them at one go on a page and the rest 4 should be hidden and when I cliock the "down" button the next four should be displayed and vice versa when I click "up" button the first 6 should be displayed.

Code:
<div >
<input type="button" id="up" value="up"/>[code]....

View 2 Replies View Related

JQuery :: Show/Hide Table Rows

May 4, 2011

I have a table that is set up to look like a menu and would like to show/hide certain rows, the problem is that the rows do not have id's...basically, it looks like this:

<table class="mainTable">
<tbody>
<tr><td class="Level1 Selected"><a href="page1.aspx">Page 1</a></td></tr>[code]....

Ultimately, what I would like to do is: show all Level1 rows.hideadditionallevels below Level1 (which could be any number deep)
and finally, if row is selected then show additional levels below (td class will change to "Selected" when on the page) and above (ie. if Level2 is selected).

View 4 Replies View Related

Show Hide Table Row Depending On A Variable?

Jan 28, 2010

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.

View 2 Replies View Related

Hide / Show Table Plus Reset Button?

May 12, 2011

I need a button that not only resets what is typed in the textarea but also hides all shown tables...[code]...

View 3 Replies View Related

Cells Hide/show In Each Of The Rows Of A Table?

Aug 16, 2010

I have a query regarding the hide/show of the cells in a table.The first column is 'Yes and No' options using combo box, 2nd option is 'input field', 3rd column is also 'Yes and No' option using combo box, and 4th option is also 'input field'.What I want is to make a table using JAVASCRIPT, in which if i select 'No' from the first row first column, i want to hide the remaining 3 cells of the first row. Otherwise if i select 'yes' from the first row first column i want to show all the 3 other options of the first row. Also in between if I select 'No' from the first row third column i want to hide the first row fourth column cell. Selecting 'yes' from the first row third column will show the first row fourth column.I want apply the same setting of hide and show cells into the remaining columns also.

By selecting 'no' from first column -> hide other corresponding cells of the row by selecting 'yes' from the first column -> show other corresponding cells of the row

AND ALSO

By selecting 'no' from third column -> hide fourth cell of the corresponding/same row by selecting 'yes' from the third column -> show fourth cell of the corresponding/same row

I have posted this question in the tablular form, but it is now showing in the proper format. Anyone in the forum please help me to make this table using JAVASCRIPT. I need this table within a day or two.

View 3 Replies View Related

Show / Hide Table Rows Via Checkboxes?

Sep 2, 2010

I've got a table that I want to be able to show/hide rows based on what check box is checked. By default, I don't want anything displayed, then if you check a or some of the check boxes you'll see the data.Here is what I have, which has some effect in FF but does not work at all in IE.This is my script (which is part mine, part web-found)

<style type="text/css">
.this {
display: none;[code]......

View 3 Replies View Related

Show / Hide Table Rows, But 1st Row Always Shows?

May 4, 2009

I am generated some HTML / Javascript through the use of some XSLT, and what I aim to do is generate a table with many rows where we always have the 1st row showing (which has a +/- image there for users to click so that they can expand/collapse the rest of the rows in that table). I am having trouble with the Javascript on assigning the relevant class to the rows so that they get hidden or shown.So far my XSL is outputting the following...

HTML Code:
<table class="InfoBlock" cellspacing="0" cellpadding="0">
<col class="report_column_headings">[code]...

I know I am violating HTML here by having many tags with the same ID, but I am just looking for ways to get this to work.what I place in my 'ShowHide()' javascript method?

View 1 Replies View Related

Several Rows In A Table With The Same Id So I Can Show/hide Them In A Block?

May 27, 2009

is it possible to have several rows in a table with the same id so i can show/hide them in a block?I have also tried adding a span around the block of rows but that doesn't work ( I seem to remember you cant hava a span around TR tags?)

View 4 Replies View Related

Show/hide Specific Table Rows

Jan 6, 2006

I've tried some methods mentioned in other topics here, but I can't seem to get any of them to work for this specific problem I have. I'm not very experienced in javascript so I haven't been able to modify any of the other examples to work the way I need it to.

I hope the code gives you some idea of what I need even though it's a bit messy, I think most of it should be pretty self explanatory? Code:

View 4 Replies View Related

Manipulate Table With Show/hide Rows

Nov 11, 2007

I use JS to show/hide a <tr> row but, when I do that, the content show or hide but there still have the space they use to took while visible. In short, the table did not update himself.

Any one have already got this problem or know the solution?

View 1 Replies View Related

Code For Show/hide Table Rows?

Dec 28, 2010

wrote me jvascript code for show/hide table rows.The situation is:

<table 1>
row 1
row 2
row 3[code]...

row 1 and row 4 are in one looping

row 2, row 3 ,row 5 and row 6 are in another one looping.The picture is like this:

1.when page load..

2.only row 1 and row 4 display

3.when row 1 is clicked row 2 and 3 will display

4.when row 4 is clicked row 5 and 6 will display

View 2 Replies View Related

Table Row OnClick To Show / Hide Embedded DIV

Aug 12, 2011

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.
<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);
}} .....

<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. 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.

View 5 Replies View Related

Hide / Show Other Cells In A Row Of A Table Using Script?

Aug 11, 2010

I have a query relating javascript hide/show cells in a table

I have created a table of 5 rows and 5 columns. The first row is drop down menu having Yes and No option and remaining cells in the row are two text box and two drop down menu.

I want to hide (or may be block) the other four cells as per the option selected from the drop down menu in the first row. If i select No from the drop down menu from the first row i want to hide the remaining cells in the row and if i select Yes I want to show the remaining cells in the row.

View 1 Replies View Related

Table Row Show/hide Depending On The Contents Of A Variable?

Feb 3, 2010

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<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 =="")

[Code]....

View 7 Replies View Related

Hide / Show Table - For Loop Ends Prematurely

May 18, 2011

The functions hide/show tables within a page, and update a button by the table title accordingly. The number of tables on the page is dynamic (php generated based on an SQL query), so the Expand/Collapse all buttons are generated last, and pass the table count to the functions in variable x. I have confirmed that the number passed in x is correct for the number of tables, and that all of the tables' IDs are correct in the generated HTML. The problem is that no matter what is passed in x (currently over 300), the loop ends at 27.

function expand_all(x){
var i=1
for(i = 1; i <= x; i++){
document.getElementById('tbl' + i).style.display = "block";
document.getElementById('lnk' + i).value = "[ - ]";
}}// end expand_all
function shrink_all(x){
var i=1
for(i = 1; i <= x; i++){
document.getElementById('tbl' + i).style.display = "none";
document.getElementById('lnk' + i).value = "[ + ]";
}}// end shrink_all

To confirm the values, I changed
document.getElementById('lnk' + i).value = "[ - ]";
to
document.getElementById('lnk' + i).value = "[ - ] " + i + " of " + x;
In both functions, I got incrementing values for i from 1 to 27. X consistently was 343.

View 3 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved