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("d iv1");
}
</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
my major code could be:
<script language="JavaScript">
function test(){
var oDiv = document.getElementById("d
}
</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
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" );
setBackgroundColorOnChildr en( 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 setBackgroundColorOnChildr en( parent, tag, color ) {
var children = parent.getElementsByTagNam e( tag );
for ( var i =0; i < children.length; i++ ) {
children[i].style.backgrou ndColor = color;
}
}
//-->
</script>
</head>
<body>
<table>
<tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><t d>data1</t d><td>data 2</td><td> data3</td> </tr>
<tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><t d>data1</t d><td>data 2</td><td> data3</td> </tr>
<tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><t d>data1</t d><td>data 2</td><td> data3</td> </tr>
<tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><t d>data1</t d><td>data 2</td><td> data3</td> </tr>
<tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><t d>data1</t d><td>data 2</td><td> data3</td> </tr>
<tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><t d>data1</t d><td>data 2</td><td> data3</td> </tr>
<tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><t d>data1</t d><td>data 2</td><td> data3</td> </tr>
<tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><t d>data1</t d><td>data 2</td><td> data3</td> </tr>
<tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><t d>data1</t d><td>data 2</td><td> data3</td> </tr>
<tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><t d>data1</t d><td>data 2</td><td> data3</td> </tr>
<tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><t d>data1</t d><td>data 2</td><td> data3</td> </tr>
<tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><t d>data1</t d><td>data 2</td><td> data3</td> </tr>
<tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><t d>data1</t d><td>data 2</td><td> data3</td> </tr>
<tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><t d>data1</t d><td>data 2</td><td> data3</td> </tr>
<tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><t d>data1</t d><td>data 2</td><td> data3</td> </tr>
<tr><td><img src="images/sort_down.jpg" onclick="hl(this)"></td><t d>data1</t d><td>data 2</td><td> data3</td> </tr>
</table>
</div>
</body>
</html>
regards
viola
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" );
setBackgroundColorOnChildr
row.style.backgroundColor=
}
function findParent( ele, tag) {
while ( ele.parentNode ) {
if ( ele.parentNode.tagName == tag ) {
return ele.parentNode;
}
ele = ele.parentNode;
}
}
function setBackgroundColorOnChildr
var children = parent.getElementsByTagNam
for ( var i =0; i < children.length; i++ ) {
children[i].style.backgrou
}
}
//-->
</script>
</head>
<body>
<table>
<tr><td><img src="images/sort_down.jpg"
<tr><td><img src="images/sort_down.jpg"
<tr><td><img src="images/sort_down.jpg"
<tr><td><img src="images/sort_down.jpg"
<tr><td><img src="images/sort_down.jpg"
<tr><td><img src="images/sort_down.jpg"
<tr><td><img src="images/sort_down.jpg"
<tr><td><img src="images/sort_down.jpg"
<tr><td><img src="images/sort_down.jpg"
<tr><td><img src="images/sort_down.jpg"
<tr><td><img src="images/sort_down.jpg"
<tr><td><img src="images/sort_down.jpg"
<tr><td><img src="images/sort_down.jpg"
<tr><td><img src="images/sort_down.jpg"
<tr><td><img src="images/sort_down.jpg"
<tr><td><img src="images/sort_down.jpg"
</table>
</div>
</body>
</html>
regards
viola
Stange, works in IE.
Still glad you got the answer
Still glad you got the answer
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
viola123 you have found a solution by yourself . Why did you accept mine ?
ASKER
thanks for your effort!
we need not only a solution but also a helpful environment
regards
viola123
we need not only a solution but also a helpful environment
regards
viola123
Thanks for the points and grade :-) then
<script language="JavaScript">
function test(){
var oDiv = document.getElementById("d
oDiv.parentElement.style.b
}
</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>