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.typeChange 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
Posts
hi,
ReplyDeletehow to get value of radio box using cell.firstChild.data when iam retreiving it is getting undefind how to do this...
Use 'cell.firstChild.value' to get the radio button value. 'data' is used for strings.
ReplyDeleteHello can you help me with this. I have a SELECT dropdown list with OPTION of "countries". And I have a table with list of data and has a country column. When i will select certain country on the dropdown, it will display the list of data corresponding to the value selected on the dropdown. I hope that is make sense. Looking forward for your help. Thanks
ReplyDeleteMarnelle, have a look at this little tutorial I posted at http://js-code.blogspot.com/p/dynamic-drop-down-box-part-1.html
ReplyDeleteThis very useful for me. Great
ReplyDeleteAnd as of above article to i change the table cell value as following code.
JS Code:
alert("JS");
var table = document.getElementById('myTable');
alert("table: " +table );
var cell = table.rows[0].cells[0];
alert("cell: " + cell );
var value = cell.firstChild.data;
alert("value : " + value );
cell.firstChild.data = 'my new text';
hi,
ReplyDeletethanks for the informative tutorial but it is better to use table.rows[0].cell[0].innerHTML because if you simply put only text in a cell it won't come unless you use innerHTML