<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table Rollover and Edit Cell using Javascript</title>
<script language="javascript">
var selectedCell=null;
function editCell(id){
if(selectedCell!=null){
selectedCell.className='normal';
}
selectedCell=id;
selectedCell.className='selected';
document.getElementById('text').value=id.innerHTML;
document.getElementById('text').focus();
}
function setClass(id,cName){
if(id.className!='selected'){
id.className=cName;
}
}
function save(){
if(selectedCell!=null){
selectedCell.innerHTML=document.getElementById('text').value;
}
}
</script>
<style>
.hover{
background-color:#fff;
cursor:pointer;
}
.normal{
background-color:#f4f4f4;
}
.selected{
background-color:#FCF;
}
</style>
</head>
<body style="font-family:Verdana, Geneva, sans-serif;">
Click on a cell to edit text<br />
<table cellpadding="40px" cellspacing="1px" bgcolor="#CCCCCC">
<tr>
<td id="cell_11" class="normal" onmouseover="setClass(this,'hover')" onmouseout="setClass(this,'normal')" onclick="editCell(this)"> </td>
<td id="cell_12" class="normal" onmouseover="setClass(this,'hover')" onmouseout="setClass(this,'normal')" onclick="editCell(this)"> </td>
<td id="cell_13" class="normal" onmouseover="setClass(this,'hover')" onmouseout="setClass(this,'normal')" onclick="editCell(this)"> </td>
<td id="cell_14" class="normal" onmouseover="setClass(this,'hover')" onmouseout="setClass(this,'normal')" onclick="editCell(this)"> </td>
</tr>
<tr>
<td id="cell_21" class="normal" onmouseover="setClass(this,'hover')" onmouseout="setClass(this,'normal')" onclick="editCell(this)"> </td>
<td id="cell_22" class="normal" onmouseover="setClass(this,'hover')" onmouseout="setClass(this,'normal')" onclick="editCell(this)"> </td>
<td id="cell_23" class="normal" onmouseover="setClass(this,'hover')" onmouseout="setClass(this,'normal')" onclick="editCell(this)"> </td>
<td id="cell_24" class="normal" onmouseover="setClass(this,'hover')" onmouseout="setClass(this,'normal')" onclick="editCell(this)"> </td>
</tr>
<tr>
<td id="cell_31" class="normal" onmouseover="setClass(this,'hover')" onmouseout="setClass(this,'normal')" onclick="editCell(this)"> </td>
<td id="cell_32" class="normal" onmouseover="setClass(this,'hover')" onmouseout="setClass(this,'normal')" onclick="editCell(this)"> </td>
<td id="cell_33" class="normal" onmouseover="setClass(this,'hover')" onmouseout="setClass(this,'normal')" onclick="editCell(this)"> </td>
<td id="cell_34" class="normal" onmouseover="setClass(this,'hover')" onmouseout="setClass(this,'normal')" onclick="editCell(this)"> </td>
</tr>
</table><br />
<textarea rows="3" cols="38" name="text" id="text"></textarea><br />
<input type="button" value="Save" onclick="save()" />
</body>
</html>
|
Tim