Filling values in table cells in an HTML Page using Javascript

Question

Hai,

I have one HTML page with Javascript functions included in it. In that HTML page, I have a table with 2 rows and 2 columns. Also I have an array with 4 values. What I need is, when the user clicks on one table cell, a value from the array should be displayed inside that cell. Can any one post some sample code here?

Thanks.

Answer 1

[See it in action]

var values = [1,2,3,4];

var table = document.getElementById('tablet');

// watch for clicks on the table
table.onclick = function(e) {

  // get the element that was clicked
  e = e || window.event;
  var el = e.target || e.srcElement;

  // set it's content to a value from the array
  if (el.nodeName == "TD") {
    el.innerHTML = values.shift();
  }

};
​

Answer 2

Here is some sample code,

 <script type="text/javascript">
function changeText()
{
    alert('');
    document.getElementById('row').innerHTML = 'some text';
}
</script>

<table border = '1'>
<tr><td id='row' onClick='changeText()'> </td>
</tr>
</table>