add buttons to control my displaying
hello, I want to add buttons to control my displaying.
Would you please give me an advice?
Here is my incomplete code.
Thanks
<head>
<!-- Head Scripts -->
<script type="text/javascript" src="/skins-1.5/common/ajax.js?97"></script>
<style type = "text/css">
#firstp {color : #000000;}
#secondp {color : #FF0000;}
#thirdp {color : #FF0000;}
#forthp {color : #FF0000;}
</style>
<script language="javascript" + "type="text/javascript">
function show() {
...how to control displaying herein }
</script>
</head>
<body class="mediawiki ns-0 ltr page-Cyber">
<form name="myform1">
<p><input type="button" value="Display lines with red color" onClick="show()"></p>
</form>
<form name="myform2">
<p><input type="button" value="Display lines with black color" onClick="show()"></p>
</form>
<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>
<P ID=thirdp>My third paragraph.</P>
<P ID=forthp>My forth paragaph.</P>
</html>
[1235 byte] By [
zhshqzyc] at [2007-11-20 11:30:56]
# 1 Re: add buttons to control my displaying
You aren't very clear. What red lines? What is going to happen when you click the buttons?
EDIT: You have a couple of errors in your current code.
1. Remove the + sign in your <script> tag. You should only separate with spaces.
2. All attributes in a tag need quotes.
<p id="firstp">My first paragraph.</p>
3. Also, you don't need forms unless you are submitting data. You can have just the <input> tags without the forms.
# 2 Re: add buttons to control my displaying
I am using + sign because of I will create a html in Java code.
please ignore the errors I can modify it later.
#firstp {color : #000000;}
It will create a black font line.
#forthp {color : #FF0000;}
It will create a red font line.
# 3 Re: add buttons to control my displaying
That still does not explain what you are trying to do! Are you trying to hide and show actual rows of the table depending on the CSS style color?
# 4 Re: add buttons to control my displaying
okay,suppose there are many lines
<P ID="firstp">My first paragraph.</P>
<P ID="secondp">My second paragaph.</P>
<P ID="thirdp">My third paragraph.</P>
<P ID="forthp">My forth paragaph.</P>
..........
Once I click button 1, the web page only displays line 1 with black color
because of style #000000, while the other lines displays with default color.
By clicking button 2, the web page only displays line 2,3,4 with red color because of their style #FF0000, while the other lines displays with default color.
# 5 Re: add buttons to control my displaying
or like you said.
hide and show actual rows of the table depending on the CSS style color.
# 6 Re: add buttons to control my displaying
As your HTML stands, you will not be able to accomplish this, because it has an ID associated with the CSS. However, if you change the style directly of the <p> tag, you can.
<script type="text/javascript">
function showRows(color){
var theParagraphs = document.getElementsByTagName('p');
for(i = 0; i < theParagraphs.length; i++){
if(theParagraphs[i].className != color){theParagraphs[i].style.display = 'none';}
else{theParagraphs[i].style.display = 'block';}
}
}
</script>
<style type="text/css">
p.black {background: #000000;}
p.red {background: #ff0000;}
</style>
<input type="button" value="Black" onclick="showRows('black')">
<input type="button" value="Red" onclick="showRows('red')">
<p class="black">My first paragraph.</p>
<p class="red">My second paragraph.</p>
<p class="red">My third paragraph.</p>
<p class="red">My fourth paragraph.</p>
# 7 Re: add buttons to control my displaying
Thanks for your nice help.
In my real case. It is very complex. The tag is not only limited on p.
Would you please see the attachment to see how to modify it?
# 8 Re: add buttons to control my displaying
Yeah, you have some complications. The only way you will be able to do that is to create an array for black and red. In each array put the corresponding ids for the <p> tags. Then you can just read through the array and set those to display.
# 9 Re: add buttons to control my displaying
Anybody can provide me a piece of codes?
I feel it is hard!
Thanks
# 10 Re: add buttons to control my displaying
We don't have time to code that all for you.
As I stated, you will have to create arrays for each color listing each ID in the corresponding color's array. Then if you want to show red, read through the red array and set those to display. And read through the other colors arrays and set each of those to display none.
This really should be done server-side and not on the client. By that I mean a database should sort what days should be seen and only return those days.
