Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Urgent!!!!!---how to reference a parent HTML element???

Posted on 2004-09-07
7
188 Views
Last Modified: 2012-06-21
hi,

my major code could be:
<script language="JavaScript">
function test(){
var oDiv = document.getElementById("div1");
}
</script>
<table>
<tr>
<td><div id="div1">this is a test</div></td>
</tr>
</table>

my question is how to reference the <td> cell if i need to change its background color? is there something like oDiv.parentNode??

thanks a lot! 300 points will be awarded asap.

viola123
0
Comment
Question by:viola123
  • 5
  • 2
7 Comments
 
LVL 33

Expert Comment

by:sajuks
ID: 12003862
// try this
<script language="JavaScript">
function test(){
var oDiv = document.getElementById("div1");
oDiv.parentElement.style.backgroundColor = "#000080";

}
</script>
<table>
<tr>
<td>This is a the first test</td>
<td><div id="div1">this is a test</div></td>
<input type = 'button' value = 'Check' onClick = 'test()'>
</tr>
</table>

0
 
LVL 6

Author Comment

by:viola123
ID: 12003877
hi, sajuks:

thanks for your quick reply, but it's not working. i already solved this problem, the solution is :
<html>
 <head>
  <script language="javascript">
<!--

function hl( img ) {
  var row = findParent( img, "TR" );
  var table = findParent( row, "TABLE" );
  setBackgroundColorOnChildren( table, "TR", "#FFF" );
  row.style.backgroundColor="#ccc";
}

function findParent( ele, tag) {
    while ( ele.parentNode ) {
        if ( ele.parentNode.tagName == tag ) {
            return ele.parentNode;
        }

        ele = ele.parentNode;
    }
}

function setBackgroundColorOnChildren( parent, tag, color ) {
    var children = parent.getElementsByTagName( tag );

    for ( var i =0; i < children.length; i++ ) {
        children[i].style.backgroundColor = color;
    }

}

//-->

</script>
 </head>
<body>
<table>
 <tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><td>data1</td><td>data2</td><td>data3</td></tr>
 <tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><td>data1</td><td>data2</td><td>data3</td></tr>
 <tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><td>data1</td><td>data2</td><td>data3</td></tr>
 <tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><td>data1</td><td>data2</td><td>data3</td></tr>
 <tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><td>data1</td><td>data2</td><td>data3</td></tr>
 <tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><td>data1</td><td>data2</td><td>data3</td></tr>
 <tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><td>data1</td><td>data2</td><td>data3</td></tr>
 <tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><td>data1</td><td>data2</td><td>data3</td></tr>
 <tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><td>data1</td><td>data2</td><td>data3</td></tr>
 <tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><td>data1</td><td>data2</td><td>data3</td></tr>
 <tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><td>data1</td><td>data2</td><td>data3</td></tr>
 <tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><td>data1</td><td>data2</td><td>data3</td></tr>
 <tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><td>data1</td><td>data2</td><td>data3</td></tr>
 <tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><td>data1</td><td>data2</td><td>data3</td></tr>
 <tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><td>data1</td><td>data2</td><td>data3</td></tr>
 <tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><td>data1</td><td>data2</td><td>data3</td></tr>
</table>
</div>
</body>
</html>

regards
viola
0
 
LVL 33

Expert Comment

by:sajuks
ID: 12003886
Stange, works in IE.
Still glad you got the answer
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 33

Accepted Solution

by:
sajuks earned 300 total points
ID: 12003907
my bad. i went thru your example and now i understood what you wanted to achieve.
0
 
LVL 33

Expert Comment

by:sajuks
ID: 12004074
viola123 you have found a solution by yourself . Why did you accept mine ?
0
 
LVL 6

Author Comment

by:viola123
ID: 12011535
thanks for your effort!

we need not only a solution but also a helpful environment

regards
viola123

0
 
LVL 33

Expert Comment

by:sajuks
ID: 12012710
Thanks for the points and grade :-) then
0

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

861 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question