Dynamically updating DOM Objects

b00ger · Oct 22, 2003

Hello everyone,

I was wondering if there is a simple way to dynamically update a DOM object like a table cell. I basically want to have a few buttons and when a button is clicked (onclick) it sets the text of a certain table cell to a particular string and color. I've tried to create a function that gets the table cell by it's ID (getElementById) and appends a textNode as a child (appendChild) but couldn't get it to work. Any help or ideas is greatly appreciated! Thanks in advanced!

theboyhope · Oct 22, 2003

How's about you show us your function as a starting point and we'll tell you what's wrong with it.

b00ger · Oct 22, 2003

Thanks for your response, theboyhope and sorry about the duplicate thread.

I've actually almost got my function working, but I can't successfully get the function to OVERWRITE the current content of the cell, I can only get it to APPEND it to the text that is already there. Here is the bare bones page including the code for my table and function:

<html>
<head>
<title>Sample code - Traversing an HTML Table with JavaScript and DOM Interfaces</title>
<script type="text/javascript">
function setCell(i,j,text) {

current_cell=document.getElementById("row"+j+"_col"+i);
current_cell.removeChild(this.lastChild);
//currenttext=document.createTextNode(text);
//current_cell.appendChild(currenttext);

}
</script>

<script type="text/javascript">
function start() {
var mybody=document.getElementsByTagName("body&quot

.item(0);
mytable = document.createElement("TABLE&quot

;
mytable.setAttribute("id","table1&quot

;
mytablebody = document.createElement("TBODY&quot

;
mytablebody.setAttribute("id","tablebody1&quot

;
for(j=0;j<2;j++) {
mycurrent_row=document.createElement("TR&quot

;
mycurrent_row.setAttribute("id","row"+j);
for(i=0;i<2;i++) {
mycurrent_cell=document.createElement("TD&quot

;
mycurrent_cell.setAttribute("id","row"+j+"_col"+i);
currenttext=document.createTextNode("cell is row "+j+", column "+i);
mycurrent_cell.appendChild(currenttext);
mycurrent_row.appendChild(mycurrent_cell);
}
mytablebody.appendChild(mycurrent_row);
}
mytable.appendChild(mytablebody);
mybody.appendChild(mytable);
mytable.setAttribute("border","2&quot

;
}
</script>
</head>
<body onload="start()">

<a href=# onclick="setCell(0,0,'asdf')">button</a>
</body>
</html>

b00ger · Oct 22, 2003

oops, forgot to note that i commented out the append section of the setCell method so I could try to test the removeChild portion of the function. I still can't get it to work, maybe I should be using replaceChild instead of removeChild and then appendChild. I'm going to go try that.

Thanks again!

mwolf00 · Oct 22, 2003

This should do what you want...

oldObj.replaceNode(newObj)

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

clarkin · Oct 22, 2003

or as an alternative, simply replace the text in the existing text node (problem with this is you need some initial text in the table cell):

Code:

current_cell=document.getElementById(&quot;row&quot;+j+&quot;_col&quot;+i);
current_cell.firstChild.nodeValue = text;

Posting code? Wrap it with code tags: [ignore]

Code:

[/ignore][code]CodeHere

[ignore][/code][/ignore].

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!

Dynamically updating DOM Objects

b00ger

Programmer

theboyhope

IS-IT--Management

b00ger

Programmer

b00ger

Programmer

mwolf00

Programmer

clarkin

Programmer

Similar threads

Part and Inventory Search

Sponsor