Calling and Creating a Dynamic Menu of Links

[Conscientious_R]

essentially this works so far.

function addRow() {
var body = document.getElementById('displayButton') .getElementsByTagName('tbody')[0];
var row = body.appendChild( document.createElement('tr'));
for (var i=0, cell; i < arguments.length; i++) {
cell = document.createElement("td");
row.appendChild(cell);
cell.appendChild(document.createTextNode( arguments[i]) ); }
}
it renders something comparable to this:

<table width=375 id="displayButton">
<tr><td>pic1</td><td>pic2</td></tr>
</table>

<comment> that is ofcourse, if the addRow() function passed pic1 and pic2 as a parameters. Like

addRow(pic1, pic2).</comment>

But what I want is a way to render something comparable to this.

<table width=375 id="displayButton">
<tr><td name="gallery_Item[0]" onclick="picture.src=display[0]; changeDescript(myPic[0], myPic_descript[0])">pic1</td>
<td name="gallery_Item[1]" onclick="picture.src=display[0]; changeDescript(myPic[1], myPic_descript[0])">pic1</td>
</table>

What I need to know is how to write the following javascript properly:

function addRow() {
var body = document.getElementById('displayButton') .getElementsByTagName('tbody')[0];
var row = body.appendChild( document.createElement('tr'));
for (var i=0, cell; i < arguments.length; i++) {
cell = document.createElement("td");

/*This is part I am having a hard time with. I need the table cell that has just been rendered to have it's own functionality. Just as any button is an average online displays an online buttons that changes the image on display. This button would actually change it's value and variables based on the arguements passed, and the other functions accessed by the seperate venue
button in the html itself. That's why I need the array values to be passed into the onClick function*/
cell.onClick = "picture.src='display[" + i + "]'; changeDescript(myPic_name[" + i + "], myPic_descript[" + i + "])";

row.appendChild(cell);
cell.appendChild(document.createTextNode( arguments[i]) ); }
}

FYI:
where

display[0] = beforeLunch_pic.src;
myPic_name[0] = beforeBrunch;
myPic_descript[0] = beforeBrunch_describe;

now the arrays change once the user has opted to change the gallery venue.

display[0] = shadow_pic.src;
myPic_name[0] = afistFull;
myPic_descript[0] = afistFull_describe;

ANY HELP IS SO GREATLY APPRECIATED.

[glenngv]

Create a link inside the cell and make its size 100% so that the whole cell is clickable.

Javascript:

function addRow() {
  var cell, link;
  var body = document.getElementById('displayButton').getElementsByTagName('tbody')[0];
  for (var i=0; i < arguments.length; i++) {
    link = document.createElement("a");
    link.className = "linkcell";
    link.setAttribute("href", "#");
    link.onclick = new Function("picture.src=display[" + i + "]; changeDescript(myPic_name[" + i + "], myPic_descript[" + i + "]); return false;");
    link.appendChild(document.createTextNode(arguments[i]));
    cell = document.createElement("td");
    cell.appendChild(link);
    row = document.createElement('tr');
    row.appendChild(cell);
    body.appendChild(row);
  }

}

CSS:

.linkcell {
  width:100%;
  height:100%;
  display: block;
  text-decoration:none;
}
.linkcell:hover {
  background-color:yellow;
}