Link to home
Start Free TrialLog in
Avatar of viola123
viola123

asked on

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

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
Avatar of sajuks
sajuks

// 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>

Avatar of viola123

ASKER

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
Stange, works in IE.
Still glad you got the answer
ASKER CERTIFIED SOLUTION
Avatar of sajuks
sajuks

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
viola123 you have found a solution by yourself . Why did you accept mine ?
thanks for your effort!

we need not only a solution but also a helpful environment

regards
viola123

Thanks for the points and grade :-) then