470,841 Members | 892 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,841 developers. It's quick & easy.

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 8659
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(this)
">Here is a cell</td>
<td class="cellA" onclick="
toggleClass(this)
">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.getElementById("Scores").rules = "none";

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

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

18 posts views Thread by Michael Skind | last post: by
7 posts views Thread by Mad Scientist Jr | last post: by
7 posts views Thread by NeverLift | last post: by
10 posts views Thread by oLE | last post: by
1 post views Thread by le_sloth | last post: by
2 posts views Thread by MOHSEN KASHANI | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.