Member Avatar for bbqkaren

I have what I hope is a simple question.

I found a js that does exactly what I want, except that I want the table 'closed' when the page is loaded, and opened when the +/- is clicked. I'd like this in Java. (assuming that non-java users would see the table 'open/show')

Hope someone can help. Thanks

Here is the script:

function show_hide(tblid, show) {
if (tbl = document.getElementById(tblid)) {
if (null == show) show = tbl.style.display == 'none';
tbl.style.display = (show ? '' : 'none');
}
}
<a href="javascript:void();" onclick="show_hide('exampletbl')">+/-</a>
<table id="exampletbl">
  <tbody>
    <tr>
      <td>row 1</td>
    </tr>
    <tr>
      <td>row 2</td>
    </tr>
  </tbody>
</table>
<br>
<a href="javascript:void();"
 onclick="show_hide('exampletbl2')">+/-</a>
<table id="exampletbl2">
  <tbody>
    <tr>
      <td>row 3</td>
    </tr>
    <tr>
      <td>row 4</td>
    </tr>
  </tbody>
</table>
  • 2 Contributors
  • 5 Replies
  • 371 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by bbqkaren
Member Avatar for bbqkaren

Think I solved my own problem - found this thread and combined that with what I was already doing.

My Java now looks like this. New stuff is on lines 10-12

function show_hide(tblid, show) 
{
if (tbl = document.getElementById(tblid)) 
{
if (null == show) show = tbl.style.display == 'none';
tbl.style.display = (show ? '' : 'none');
}
}

function hide(id) 
{ 
document.getElementById(id).style.display = 'none'; }

Add this one line to html

<body onload="hide('exampletbl'); hide('exampletbl2');">

Works like a charm. Both table hidden when page loaded, opened when I click.

Member Avatar for Airshow

BBQKaren,

First and foremost - Javascript and Java are completely different languages. Google "java versus javascript" for many detailed discussions and explanations.

For your problem, you need code not only to hide the tables initially, but also to generate the +/- controls. Otherwise the small minority with javascipt disabled will see controls that do nothing.

In the following code, an anonymous function which fires when the page has loaded, loops through the array hideTables (composition to be determined by you) calling my function initHiddenTables as it goes. initHiddenTables creates the necessary +/- control for one specified table then hides that table.

function initHiddenTable(tableId){
	var tbl = document.getElementById(tableId);
	if(tbl) {
		//1. Generate +/- control
		var a = document.createElement('a');
		a.setAttribute('href', '');
		a.onclick = function(){
			show_hide(tableId);
			return false;
		}
		var txt = document.createTextNode('+/-');
		a.appendChild(txt);
		tbl.parentNode.insertBefore(a, tbl);
		//2. Hide Table
		if(tbl) { tbl.style.display = 'none'; }
	}
}

onload = function(){
	var hideTables = ["exampletbl", "exampletbl2"];
	for(var i=0; i<hideTables.length; i++){
		initHiddenTable(hideTables[i]);
	}
}

The only other thing you need to do is to get rid of the +/- controls from your HTML and wrap the tables in <div>s.

<div style="margin-top:12px;">
<table id="exampletbl">
<tbody>
<tr><td>row 1</td></tr>
<tr><td>row 2</td></tr>
</tbody>
</table>
</div>

<div style="margin-top:12px;">
<table id="exampletbl2">
<tbody>
<tr><td>row 3</td></tr>
<tr><td>row 4</td></tr>
</tbody>
</table>
</div>

As you will see, I have styled these divs to give some vertical space above. You can modify this aspect as required.

Hope this helps.

Airshow

Member Avatar for bbqkaren

for some reason, when you toggle the plain text (on this forum), the item below inlcudes an extra <b></b>. This is not in my real document.

I have what I hope is a simple question.

I

<a href="javascript:void();" onclick="show_hide('exampletbl')">+/
Member Avatar for Airshow

It's either a bug or, more probably, an anti code injection measure.

But it should be completely academic, because nobody should ever need to use that syntax. Javascript URLs are very 1990s.

See my reponse to your question above.

Airshow

Member Avatar for bbqkaren

thank you!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.