Toggle Table Cell

by Lexical Noscope

HTML

<title>Untitled Document</title>


<body>
<table width="300" border="1" onclick="toggleTable(event)">
  <tbody>
    <tr>
      <td id="cell1">&nbsp;On-Menu</td>
      <td id="cell2">&nbsp;On-Menu</td>
      <td id="cell3">&nbsp;On-Menu</td>
      <td id="cell4">&nbsp;On-Menu</td>
    </tr>
    <tr>
      <td id="cell5">&nbsp;On-Menu</td>
      <td id="cell6">&nbsp;On-Menu</td>
      <td id="cell7">&nbsp;On-Menu</td>
      <td id="cell8">&nbsp;On-Menu</td>
    </tr>
    <tr>
      <td id="cell9">&nbsp;On-Menu</td>
      <td id="cell10">&nbsp;On-Menu</td>
      <td id="cell11">&nbsp;On-Menu</td>
      <td id="cell12">&nbsp;On-Menu</td>
    </tr>
  </tbody>
</table>
<table width="300" border="1" id="menulist">
  <tbody>
    <tr>
      <td id="cellorange">&nbsp;Orange</td>
    </tr>
    <tr>
      <td id="cellapple">&nbsp;Apple</td>
    </tr>
    <tr>
      <td id="cellbanana">&nbsp;Banana</td>
    </tr>
  </tbody>
</table>
</body>

JavaScript

window.toggleTable = function (event) {
	if(event.target.tagName == "TD"){
  	var lTable = document.getElementById("menulist");
    lTable.style.display = (lTable.style.display != "none") ? "none" : "table";
  	doSomethingWithTableCell(event.target)
  }
}

function doSomethingWithTableCell(cell){
	alert(cell.id)
}