How to Change HTML Table Cell Value

First, we need to get a reference to a table cell value.

var table = document.getElementById('myTableId');
An HTMLTableElement has a rows property that refers to the table rows collection. An HTMLTableRowElement has a cells property that refers to the row cells collection.

With this information at hand it is easy to get a reference to any cell.

Let's say, we need to refer to the first column of the first row.

Since the collection index starts at 0 we can get this reference using the following code:

var cell = table.rows[0].cells[0];
The cell variable now refers to the cell in the first column and first row.
The data in the table cell is represented by a text node. We can get a reference to it by using the firstChild property of an HTMLElement.

We obtain a reference to the text node value by using its data property.

var value = cell.firstChild.data;
Now it is easy to change the text in a table cell:

cell.firstChild.data = 'my new text';
What if you have an HTML object in your data cell, like a radio button ? In this case, 'firstChild' property will refer to this object, and you can get all the properties of the object by referring to the cell's firstChild property, e.g:

cell.firstChild.value
cell.firstChild.name
cell.firstChild.type 

Change table cell value automatically

To change a table cell value automatically we must assign an event handler to the cell onblur event.

For DOM scripting, I would recommend an excellent book on the subject by Jeremy Keith DOM Scripting: Web Design with JavaScript and the Document Object Model. It will teach you to work with DOM and JavaScript from the ground up.

 Some other posts you might find interesting:

How to Hightlight Table Rows

Extract Table Text

Extract Table Text

The following recursive function can be used to extract text from any HTML element including a table.

var cnts= '';
function getElementText(el){
 var cn=el.childNodes,i;
 if(el.nodeType==3){
     cnts += (el.nodeValue + "\n");
 }
 for(i=0;i<cn.length;++i)
   getElementText(cn[i]);
}

The function accepts an HTML object as a parameter. First it checks for the nodeType property of the DOM element. If the nodeType value is 3 (TEXT_NODE) the function grabs the element text (nodeValue) and appends it to the global variable cnts. As the final step the function calls itself supplying each element child as the parameter.  The only downside I see is using a global variable to hold the element contents. But so far I don't see any other way to achieve the same functionality.

An interesting article about anonymous recursive functions can be found here.

Another post you might find interesting:  Hide Columns in a Table

DOM Hyperlinks

First, here is the code. Then I'll explain it:

 var link  = document.createElement("A");
 link.href = "http://www.google.com";
 var atext = document.createTextNode("Google");
 link.appendChild(atext);
 oElement.appendChild(link);

First, you create an HTMLAnchorElement using a DOM method createElement(tagName).

var link  = document.createElement("A");

Then, you set the href property of the HTMLAnchorElement:

link.href = "http://www.google.com";

Next, you create a text node that will hold the clickable text:

var atext = document.createTextNode("Google");

Then, append the text node to the HTMLAnchorElement:

link.appendChild(atext);

Now, you can append the link element to another element on the page:

oElement.appendChild(link);

oElement holds a reference to an HTML element on the page that will be a parent of the newly created hyperlink.
Here is the same code presented as a function that accepts 3 parameters: parent element, url and link text:

function createLink(parent, url, linkText){
 var link  = document.createElement("A");
 link.href = url;
 var atext = document.createTextNode(linkText);
 link.appendChild(atext);
 parent.appendChild(link);
}