Вход

Просмотр полной версии : динамическое появление поля редактирования


MBmusic
03.07.2013, 16:55
есть ячейка в таблице......когда мы на нее нажимаем появляется поле редактирования ячейки, как теперь сделать что бы когда мы нажимаем на другую ячейку или вообще на фон страницы клацаем то поле пропадало из ячейки......вот код


<script type="text/javascript">
function showForm(id) {
var myParam=document.getElementById(id);
myParam.innerHTML="<input type=\"text\" id=\"newval\" />";
}
</script>



<tr>
<td id="td1<?=$my['id']?>" onclick="showForm('td1<?=$my['id']?>')"><?=$my['name']?></td>
<td id="td2<?=$my['id']?>" onclick="showForm('td2<?=$my['id']?>')"><?=$my['pass']?></td>
<td id="td3<?=$my['id']?>" onclick="showForm('td3<?=$my['id']?>')"><?=$my['city']?></td>
</tr>

dmitriymar
03.07.2013, 16:57
поиск по сайту

MBmusic
03.07.2013, 17:03
только что посмотрел, ничего подходящего не нашел

danik.js
03.07.2013, 17:13
<style>
table{width:100%}
td{width:33%;height:20px;padding:0;}
input{width:100%;border: none;padding:0;height:20px;font:inherit;}
</style>
<table id="table" border="1">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script>
(function(){
var table = document.getElementById('table');
var onclick = function() {
var input = document.createElement('input');
input.value = this.innerText || this.textContent;
this.innerHTML = '';
this.appendChild(input).focus();
input.onblur = function() {
this.parentNode.appendChild(document.createTextNod e(this.value));
this.parentNode.removeChild(this);
};
input.onclick = function(event) {
if (event)
event.stopPropagation();
else
window.event.cancelBubble = true;
}
};
for (var i = 0, row; row = table.rows[i]; i++)
for (var j = 0, cell; cell = row.cells[i]; i++)
cell.onclick = onclick;
})()
</script>

MBmusic
03.07.2013, 17:47
danik.js както замуточно вы сделали) но мне нужно с каждой ячейки принимать то что там записано, ну например в ячейке есть запись '123', мы нажимаем на ячейку и появляется инпут с записью 123, когда нажимаем вне ячейки инпут пропадает...

danik.js
03.07.2013, 18:29
Поправил код. А вобще какой смысл? Почему сразу не сделать набор полей, всегда доступных для редактирования?