473,569 Members | 2,836 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

How to show/hide borders in a table

As it isnow i have to use a syntax for my tables as:
<table class = "some" border>
and/or
<table class = "some" noborder>

Now, what i'd like to do is to make that border-thingy
appear/desappear using javascript. Is it solvable that
way? I tried to rely on CSS but i didn't find any good
info on this matter...

Of course if anybody knows how to do it with CSS
that would be even more great.

--

Vänligen
Konrad
---------------------------------------------------

Sleep - thing used by ineffective people
as a substitute for coffee

Ambition - a poor excuse for not having
enough sense to be lazy

---------------------------------------------------

Aug 28 '05 #1
4 8924
Konrad Viltersten wrote:
As it isnow i have to use a syntax for my tables as:
<table class = "some" border>
and/or
<table class = "some" noborder>

Now, what i'd like to do is to make that border-thingy
appear/desappear using javascript. Is it solvable that
way? I tried to rely on CSS but i didn't find any good
info on this matter...

Of course if anybody knows how to do it with CSS
that would be even more great.


You can use JavaScript to change the CSS class of the table, or to
change its border attribute value, or its style object. To be silly
about it you could also change a style rule that applies to the table,
but that may be going too far.

Which way is best depends on a number of factors, such as what event you
would like to use to make it change, how many there are to change
simultaneously and whether it's OK if nothing happens if script or CSS
support is not available.
--
Rob
Aug 28 '05 #2
>> As it isnow i have to use a syntax for my tables as:
<table class = "some" border>
and/or
<table class = "some" noborder>

Of course if anybody knows how to do it with CSS
that would be even more great.


You can use JavaScript to change the CSS class of the table, or to
change its border attribute value, or its style object. To be silly
about it you could also change a style rule that applies to the
table, but that may be going too far.

OK, that's good. The thing is that even if i can controll the
event that is suppose to make the change i'm still rather
ignorant about what the name of the property is. To be sure
we're talking about the same thing - i'm not refering to a
border *around* the object (i.e. table) but the borders
*inside* a table. How do we get to them?

--

Vänligen
Konrad
---------------------------------------------------

Sleep - thing used by ineffective people
as a substitute for coffee

Ambition - a poor excuse for not having
enough sense to be lazy

---------------------------------------------------

Aug 28 '05 #3
Konrad Viltersten wrote:
As it isnow i have to use a syntax for my tables as:
<table class = "some" border>
and/or
<table class = "some" noborder>

Of course if anybody knows how to do it with CSS
that would be even more great.


You can use JavaScript to change the CSS class of the table, or to
change its border attribute value, or its style object. To be silly
about it you could also change a style rule that applies to the
table, but that may be going too far.


OK, that's good. The thing is that even if i can controll the
event that is suppose to make the change i'm still rather
ignorant about what the name of the property is. To be sure
we're talking about the same thing - i'm not refering to a
border *around* the object (i.e. table) but the borders
*inside* a table. How do we get to them?


I think now you are into CSS more than JavaScript, but let's keep going.
The borders 'inside' the table belong the rows and cells, so use
something that sets them to what you want then modify them.

Below is a simple example . Production will require far more thought and
rigour - help with that can be provided once your requirements are known
in more detail:
<head>

<style type="text/css">
table { border: 1px dotted red;}
.cellA {border: 1px solid blue;}
.cellB {border: 1px solid red;}
</style>

<script type="text/javascript">
function toggleClass( el ){
if ( el.className ){
el.className = ('cellA' == el.className)? 'cellB':'cellA' ;
}
}
</script>

</head>
<body>

<table>
<tr>
<th>Here is a head cell</td>
<th>And another head cell</td>
</tr>
<tr>
<td class="cellA" onclick="
toggleClass(thi s)
">Here is a cell</td>
<td class="cellA" onclick="
toggleClass(thi s)
">And another cell</td>
</tr>
</table>

</body>

--
Rob
Aug 28 '05 #4
Konrad Viltersten wrote :

To be sure
we're talking about the same thing - i'm not refering to a
border *around* the object (i.e. table) but the borders
*inside* a table. How do we get to them?


Then just modify the rules attribute and set it to none.

<table id="Scores" rules="all">
....
</table>

In your script,

document.getEle mentById("Score s").rules = "none";

Gérard
--
remove blah to email me
Aug 28 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

18
2267
by: Michael Skind | last post by:
Hello, I use a simple Table : <TABLE> <TR 1> <TD></TD> </TR> <TR 2> <TD></TD> </TR>
7
4127
by: Mad Scientist Jr | last post by:
Through messing around I got IE6 (win xp) to show/hide a table row. I gave my <TR> an ID of "trRow" and trRow.style.display='none'; hides it trRow.style.display='block'; displays it (will any value other than 'none' display on IE6?) I tried enclosing the <TR></TR> inside a <DIV> tag, and hiding that, but it doesn't work for some reason.
7
2738
by: NeverLift | last post by:
I posted a very long message regarding my experiences with JavaScript, one reply was posted asking I post an example of the problem -- and both are gone! Is there a moderator that removes such stuff? In any case, here is the issue in brief: I want to keep the page invisible while my onload script decides how to format it, setting colors,...
10
4636
by: oLE | last post by:
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...
1
4001
by: le_sloth | last post by:
Hi I'm generating a series of reports from an application that will be published on a client's intranet. The idea is that each of these reports is arranged into major product groups, sub-groups and product lines. All of this is to be in a table with one header. Example here:
2
12179
by: MOHSEN KASHANI | last post by:
Hi, I am trying to hide some form elements in a form by default and show/hide depending on which radio button is clicked. This is what I have but it is not working: <head> <style> ..noshow { display: none; }
1
4155
by: pamate | last post by:
hi, I want to show hide layers. I am able to show and hide layers but i am facing problem that, cant view the cursor in Mozilla,but i can type in input text box, its overlapping the layers. I don`t want to change the way i have used to show and hide layers. check down code :- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...
18
7535
by: Liquidtouch | last post by:
I have been searching on this for awhile and cant find anything and playing around with it got me no where. I will start with what I am after and then explain what I have. I have a table with 3 rows and 2 columns. I would like on page load to only have one row visible with the bottom two rows hidden. I would like to have an "add" button on the...
1
3789
oranoos3000
by: oranoos3000 | last post by:
hi would you please help me i have a online shopping center that i show pictures of the my product in home page. in the InterExplorer pictures is shown correctly but in Firefox browser is shown properties alt in img tag istead of picture . place of the pictures is saved in the database(my database is with mysql) and in home page i fetch...
0
7695
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7612
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
8119
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
0
6281
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5509
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
5218
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3653
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
1
2111
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
0
936
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.