PDA

View Full Version : Changing the nodeValue of a text node - help please!

Buckster_uk
12-03-2004, 12:03 PM
Hi, I have a table with 3 rows, the first row containing 3 buttons. When clicking each button, the cell below it on the next row should do something specific. I have managed to get the first button working as here it should change the cell's text to a picture, but the second and third cell's are giving me trouble. I need the second cell on the second row to be changed to a different text, I know I need to use nodeValue but have been struggling, the third row button needs to change the third cell on the second row needs to remove the text node, this using the removeChild method. I would like any help/hints with code to get this working.

Thank you!! Here is the selection of code which needs to be changed....

<script type="text/javascript">

function clickme() {
objP = document.getElementById('therow');
objP.firstChild.style.backgroundImage = "url(face.jpg)";
}
</script>
<script type="text/javascript">

function clickme1() {

}
</script>
<script type="text/javascript">

function clickme2() {

}
</script>
</head>
<body>
<table>
<tr><td onclick="clickme();"><input type="button" value="Make it smile!"/></td><td onclick="clickme1();"><input type="button" value="Make it smile twice!"/></td><td onclick="clickme2();"><input type="button" value="Make it empty!"/></td></tr>
<tr id="therow"><td>First cell</td><td>Second cell</td><td>Third cell</td></tr>
<tr span="3"><td><input type="button" value="Reload page"/></td></tr>
</table>
Kor
12-03-2004, 01:00 PM
What about this dynamic full DOM solution?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
td {
background-color: #CCCCCC;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
//new content of the cells
var newCon = new Array()
newCon[0] = 'face.jpg';
newCon[1] = 'new text 2nd';
newCon[2] = 'new text 3rd';
function clickme(thisC){//thisC is the current cell with button clicked
var thisR = thisC.parentNode;//the current row
var allR = document.getElementById('tab').getElementsByTagName('tr');//Rows collection in table
for(var i=0;i<allR.length;i++){//sets the index of current row
if(thisR==allR[i]){
var rIndex = i;
}
}
var allC = thisR.getElementsByTagName('td')//Cells collection in the current row
for(var i=0;i<allC.length;i++){//sets the index of current cell
if(thisC==allC[i]){
var cIndex = i;
}
}
var botC = allR[rIndex+1].getElementsByTagName('td')[cIndex];//finds the correspondent cell on imediat bottom
while(botC.hasChildNodes()){//removes the old content of bottom cell
botC.removeChild(botC.childNodes[0])
}
if(cIndex==0){//if first cell, creates an IMG element as content
var newE = document.createElement('img');
newE.setAttribute('src',newCon[cIndex]);
}
else{//if any of the rest, creates a textNode content
var newE = document.createTextNode(newCon[cIndex]);
}
botC.appendChild(newE)//appends the new created content
}
</script>
</head>
<body>
<table id="tab" width="400" border="0" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td><input type="button" value="Make it smile!" onclick="clickme(this.parentNode)"/></td>
<td><input type="button" value="Make it smile twice!" onclick="clickme(this.parentNode)"/></td>
<td><input type="button" value="Make it empty!" onclick="clickme(this.parentNode)"/></td>
</tr>
<tr>
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
</tr>
<tr>
<td colspan="3"><input type="button" value="Reload page"/></td>
</tr>
</tbody>
</table>
</body>
</html>
Buckster_uk
12-03-2004, 01:11 PM
Hey, thank you very much for the code! It does work but I was hoping to really just keep it in the format I originally had, I am planning to change the style of the table etc later, I just need very basic DOM code to change the nodeValue and also removeChild method in the 3rd bit.

Thanks for going to all that trouble, but is there not an easier way of completing this task?
Kor
12-03-2004, 01:52 PM
nodeValue is bassically a read only attribute, so that to replace something DOM uses replaceChild, createElement/createTextNode, appendChild method.

This is DOM, not your variant

Well, you may use in some situation nodeValue instead of createTextNode method... but... what do you gain? There is a single code line in both cases.

Further more, you must know that IE and Moz count in different ways the childs in case of empty textNodes, so is better ideea to avoid as much as possible firstChild reference.

The rest of the code is used to identify the correspondent bellow cell on column using simply parentNode reference, to get rid of the id's, names or wichever
Kor
12-05-2004, 11:13 AM
Hm... well, if you want something relative easier to understand... you might use innnerHTML method (event it is not a DOM method, not even a w3c recomandation, it works on all mothern browsers. so far)