By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,940 Members | 1,522 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,940 IT Pros & Developers. It's quick & easy.

Show/Hide Row

P: 3
Hi There,

I have recently started coding in ASP.NET (less than 2 weeks) and over the last day or 2 I've started using some Javascript. I have created a screen with a table and xx number of rows. All but one of the rows are shown immediately. I only want the row that is not shown to be shown (visible) based on some other data. The Javascript function runs and the row is displayed perfectly. The problem I am then faced with is that when I want to hide the row, a blank 'row' (or something) is left behind so there is the gap between the 2 visible questions. When the hidden row is made visible again, this row is shown above the blank row/line from the previous step. Doing this a few time leads to lots of blank rows/lines in the page.

I know that there has to be a way to get this working properly but with my limited time working with this language, I'm afraid that I am hitting a brink wall here and its probably something that is stupid simple ... :)

Your help will be greatly appreciated

************************************************** **********************************
function checkModelOptions(currentObject,currentDivObject)
var currentObject = $(currentObject);
var urlData = $("urlData");
var getContainer = currentObject.parentNode.parentNode.parentNode;
// Hide the ModelOptionsQuestion field immediately. Let the process below determine whether it should be shown
var optionContainer = $(currentDivObject);
if(currentObject.value != "")
var newUrl = "";
newUrl = getLocation() + "xxxxxxxxxx/Table.aspx?typeOfLookup=checkModelOptions&" + getDecendantsValues(getContainer);
newUrl += "&currentDivObject="+currentDivObject;
urlData.value = newUrl;
loadXMLDoc(newUrl, "");
************************************************** **********************************

************************************************** **********************************
case "checkModelOptions":
************************************************** **********************************

************************************************** **********************************
function enableModelOptions(jsonObject)
************************************************** **********************************
Jun 29 '07 #1
Share this Question
Share on Google+
1 Reply

Expert Mod 5K+
P: 5,390

have a look at the following example the uses dom-scripting-methods instead of setting styles ... that will do the job:

var hidden_row = null;
var next_row = null;
var parent_node = null;

function hide_row(id) {
var rows = document.getElementsByTagName('tr');

for (var i = 0; i < rows.length; i++) {
var row = rows[i];

if ( == id) {
hidden_row = row;
next_row = rows[i + 1];

parent_node = hidden_row.parentNode;


function show_hidden_row() {
parent_node.insertBefore(hidden_row, next_row);
<table id="my_table">
<tr id="row1">
<tr id="row2">
<tr id="row3">


<input type="button" value="Hide row2" onclick="hide_row('row2');"/>

<input type="button" value="Show hidden row" onclick="show_hidden_row();"/>


ask ... in case you need further explaination ... the script removes the row from the document-tree, but keeps a reference to it, and we may insert it back before the next sibling element (at the moment - this script only works if there is such a next sibling child-node - it relies on that! ;) in case the removed row is the last one, we have to adapt the script ;))

kind regards ...
Jun 29 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.