Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Wanet Telecoms Ltd on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

how to set the bordercolor of parent in js?

Status
Not open for further replies.
heeeep72

heeeep72

Programmer
Dec 15, 2004
33
CH
Hi,

i have an input field, it sits in a <td>, on certain conditions i want to set the border of the surrounding <td> to red from js. How to do it?
I tried these (without success):

1.)
Code: 
inputField.parentNode.style.borderColor='#FF0000';//red

2.)
Code: 
inputField.parentNode.className = 'redborder';//having a proper class defined in css 
...

//css:
TD.errorborder {
	border-style: solid;
	border-width: 3px;
	border-color: #FF00FF;
}

None of the above works for me!
Thx for any help!!
heeeep
 
Sort by date Sort by votes
Number 2 wouldn't work because you're setting the className to "redborder", but specifying "errorborder" in the CSS. Resolve this, and it should work.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Hi Dan,

that did not solve my problem, because that was just a "surface error": I had it right in my own code, I just made a "typing error", when I copied it into here (cause i changed some names)...

Probably both ways should be good and working, but the 1st one should be something like this:

Code: 
		if (...blablabla...) {
			// Set the border red.
			inputField.parentNode.style.borderStyle = 'solid';
			inputField.parentNode.style.borderWidth = '1px';
			inputField.parentNode.style.borderColor = '#FF0000';// red
		} else {
			// Reset the border. 
			...blablabla...
		}

..so i set NOT just the color...(this is how it works in my code right now)

Two things could have caused the real problems:
-some css classes got garbled (is there an english word like this? :))) in my .css
-some other functions in my .js repainted the border, which i haven't noticed

...anyway, thanx for being helpful!!

heeeep
 
Upvote 0 Downvote
This works. I used a span as the inner node inside the TD.

Code: 
<html>

<head>
<style>

TD.redborder {
    border-style: solid;
    border-width: 3px;
    border-color: #FF0060;
}

TD.greenborder {
    border-style: solid;
    border-width: 3px;
    border-color: #00FF00;
}

</style>

<script language="javascript">

function makeItNicer(pElem, pCSSname)  {

    pElem.parentNode.className = pCSSname ;  //having a proper class defined in css 
}

</script>

<body>

<table border=2>
<tr><td> One  </td><td>

<span onclick="makeItNicer(this, 'redborder')">Two - Make My Border Red</span>

</td><td> Three  </td></tr>
<tr><td> Four  </td><td>

<span onclick="makeItNicer(this, 'greenborder')">Five - Make My Border Green</span>

</td><td> Six  </td></tr>
</table>

</body></html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
973
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
864
malpa
malpa
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
jimoo
  • Locked
  • Question
How execute JS
Replies
3
Views
1K
xwb
xwb
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
1K
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top