Este es un ejemplo de como podemos manipular objetos HTML con javascript y modificar su contenido en ejecución.
<!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>
Comentarios
Publicar un comentario