Skip to content

Instantly share code, notes, and snippets.

@rbarros

rbarros/index.html

Created March 16, 2012 14:34
Show Gist options
  • Save rbarros/2050321 to your computer and use it in GitHub Desktop.
Save rbarros/2050321 to your computer and use it in GitHub Desktop.
Download ZIP
Edit elements with javascript
Raw
index.html
<html>
<head>
<title></title>
</head>
<body>
<table width="676">
<tr>
<td width="241">
<div id="nome_cliente" class="editCampo">
<b>Cliente:</b><br clear="all" />
<span>Nome do Cliente</span>
</div>
</td>
<td width="423">
<div id="endereco" class="editCampo">
<b>Endereço:</b><br clear="all"/>
<span>
Rua , 000 Bairro
<br clear="all"/>
Cidade - Estado CEP:00000-000
<br clear="all"/>
</span>
<div>
</td>
</tr>
</table>
<script>
var editCampo = document.getElementsByClassName('editCampo');
var firstClick=0;
var idFirstClick;
console.info(editCampo);
for(i in editCampo){
editCampo[i].onclick = function(){
On._click(this);
}
editCampo[i].onmouseover = function(){
this.style.border = '1px dashed #CCC';
}
editCampo[i].onmouseout = function(){
this.style.border = 'none';
}
}
var On = {
_click:function(element){
firstClick++;
var id = element.id;
idFirstClick = id;
var idInput = id+'Input';
var inputHidden = id+'InputHidden';
var elements = element.childNodes;
var span = elements[4];
var value = elements[4].innerText;
var countInput = document.getElementById(idInput);
var countInputHidden = document.getElementById(inputHidden);
var currentReturn = this._createElement(idInput,inputHidden,value);
if(countInput==null){
span.style.display = 'none';
document.getElementById(id).appendChild(currentReturn.currentElement);
if(countInputHidden==null){
document.getElementById(id).appendChild(currentReturn.currentElementHidden);
}
}
if(firstClick==1){
console.info(firstClick);
console.info(idFirstClick);
var tr = element.parentNode.parentNode.parentNode;
var cpfReturn = this._createElement('cpfInput','cpfInputHidden','');
var newTr = document.createElement("tr");
newTr.innerHTML = '<td width="241"><div id="cpf" class="editCampo"><b>CPF:</b><br clear="all" /><span><?=$rowc[cpf]?></span></div></td>';
tr.insertBefore(newTr, 'tr');
this._checkEdit();
//tr.find('cpf').appendChild(cpfReturn.currentElement);
//tr.find('cpf').appendChild(cpfReturn.currentElementHidden);
}
},
_createElement:function(idInput,inputHidden,value){
var currentElement = document.createElement("input");
currentElement.setAttribute("type", "text");
currentElement.setAttribute("name", idInput);
currentElement.setAttribute("id", idInput);
currentElement.setAttribute('onblur',"editInput(this)");
currentElement.setAttribute('onkeypress',"return bloqEnter(event)");
currentElement.setAttribute("value", value);
var currentElementHidden = document.createElement("input");
currentElementHidden.setAttribute("type", "hidden");
currentElementHidden.setAttribute("id", inputHidden);
currentElementHidden.setAttribute("name", inputHidden);
currentElementHidden.setAttribute("value", value);
var jsonReturn = { currentElement:currentElement, currentElementHidden:currentElementHidden };
return jsonReturn;
},
_checkEdit:function(){
editCampo = document.getElementsByClassName('editCampo');
}
}
function bloqEnter(objEvent)
{
var iKeyCode;
iKeyCode = objEvent.keyCode;
if(iKeyCode == 13) return false;
return true;
}
function editInput(input){
var inputHidden = input.id+'Hidden';
var editCampo = input.parentNode;
var elements = editCampo.childNodes;
var span = elements[4];
var hidden = document.getElementById(inputHidden);
span.innerText = input.value;
hidden.value = input.value;
input.parentNode.removeChild(input);
span.style.display = 'block';
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment