|
|
I am trying to control the visibility of certain table data.
Anyone know a way to reference stuff via DOM through javascript?
Since there is no name associated with that particular row how could it get referenced? I just want to dynamically control the visibility of one of the rows and not the others. Any help would be appreciated. Thanks,
Bill
<table border="0" cellpadding="7" cellspacing="0" width="100%">
<tr>
<td align="center" valign="middle">STUFF</td>
<td align="center" valign="middle">Things</td>
<td align="center" valign="middle">ITEMS</td>
</tr>
</table>
|
|
|
|
I assume you are dynamically generating the HTML table. If so, then you can insert a unique ID into each <tr> as you build the page. Then you have an id to work with. Without an ID, your option is to use the this keyword, but this is only useful if you want to fire code based on an event that fires directly on the row you want to show/hide.
Here is code to demonstrate using CSS (style sheets) and javascript to produce the DHTML effect you want. Save this code as a new HTML file and run it to see the technique.
<script language=javascript>
function ShowHideByID(rowID)
{
var e = document.all(rowID);
if (e.className == "hiddenObj")
{
e.className = "visibleObj";
}
else
{
e.className = "hiddenObj";
}
}
function ShowHideByObject(e)
{
if (e.className == "hiddenObj")
{
e.className = "visibleObj";
}
else
{
e.className = "hiddenObj";
}
}
</script>
<style>
td
{
font-family:Verdana;
font-size:8pt;
cursor:hand;
}
.visibleObj
{
display:inline;
}
.hiddenObj
{
display:none;
}
</style>
<table border=1 style="border:2px dashed #6c6c6c;">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Company</th>
</tr>
<tr id="Troy" onclick=ShowHideByObject(this)>
<td>Troy</td>
<td>Wolf</td>
<td>Shiny Solutions</td>
</tr>
<tr id="David" onclick=ShowHideByObject(this)>
<td>David</td>
<td>Bruce</td>
<td>CodeToad</td>
</tr>
</table>
<br>
<input type=button value="Toggle Troy" onclick=ShowHideByID("Troy")>
<input type=button value="Toggle David" onclick=ShowHideByID("David")>
|
|
Notice I used the "display:inline / display:none" attribute. You can also use the "visibility:visible / visibility:hidden" attribute. The difference is that display:none causes the other rows to move up--as if the hidden row does not exist. Visibility:none maintains original spacing.
|
|
|
|
|
|
Thanks! Assigning an id to a <tr> will work. Another question. How would you change the visibility of a select box? In the following code:
<form name="form1">
<select name="test" id="test size="1">
<option> test1</option>
<option> test2</option>
<option> test3</option>
</select>
</form>
I tried to use the following script:
<script>
document.form1.test.style.visibility = "hidden";
</script>
I received test is undefined as an error message. Test is defined and the case is correct. I am not sure why this is happening. Any thoughts would be appreciated.
Thanks,
Bill
|
|
|
|
You are going to love this! You code is perfect except....you forgot one double quote!
Change
| <select name="test" id="test size="1"> |
|
to
| <select name="test" id="test" size="1"> |
|
|
|
|
|
|
|
I have code where I want to take the substring of a selected value of one drop down box and append it to another already existing drop down box for option[0]. The script finishes o.k. but nothing changes. Is it possible to do what I am trying to do? Here is an Example:
Thanks,
Bill
<html>
<head>
<title>Untitled</title>
<script language="JavaScript1.2">
function extract()
{
var i=RESULT_FORM.CNY.selectedIndex;
var row=RESULT_FORM.CNY.options.value;
(row.substring(3,5));
document.RESULT_FORM.cny2.options[0].value = row.substring(3,5);
}
<form name="RESULT_FORM>
<SELECT NAME=CNY size="1"
style="backgroundcolor:#ffffcc;
onDblClick="JAVASCRIPT:extract();">
<OPTION>ALL</option> <OPTION>opt1</option>
<option>opt2</option>
</select>
<select name=cny2 size="1"
style="backgroundcolor:#ffffcc;">
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
</select>
</form>
|
|
|
dallas72
Troy Wolf