Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.07.2013, 16:55
Аспирант
Отправить личное сообщение для MBmusic Посмотреть профиль Найти все сообщения от MBmusic
 
Регистрация: 08.05.2013
Сообщений: 43

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

<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>
Ответить с цитированием
  #2 (permalink)  
Старый 03.07.2013, 16:57
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

поиск по сайту
Ответить с цитированием
  #3 (permalink)  
Старый 03.07.2013, 17:03
Аспирант
Отправить личное сообщение для MBmusic Посмотреть профиль Найти все сообщения от MBmusic
 
Регистрация: 08.05.2013
Сообщений: 43

только что посмотрел, ничего подходящего не нашел
Ответить с цитированием
  #4 (permalink)  
Старый 03.07.2013, 17:13
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

<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.createTextNode(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>

Последний раз редактировалось danik.js, 03.07.2013 в 18:28.
Ответить с цитированием
  #5 (permalink)  
Старый 03.07.2013, 17:47
Аспирант
Отправить личное сообщение для MBmusic Посмотреть профиль Найти все сообщения от MBmusic
 
Регистрация: 08.05.2013
Сообщений: 43

danik.js както замуточно вы сделали) но мне нужно с каждой ячейки принимать то что там записано, ну например в ячейке есть запись '123', мы нажимаем на ячейку и появляется инпут с записью 123, когда нажимаем вне ячейки инпут пропадает...
Ответить с цитированием
  #6 (permalink)  
Старый 03.07.2013, 18:29
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Поправил код. А вобще какой смысл? Почему сразу не сделать набор полей, всегда доступных для редактирования?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
получение значения поля eidicon jQuery 4 02.07.2012 19:06
Как сделать связанные поля ввода diakon Элементы интерфейса 2 11.12.2009 16:17
Нужно сделать плавное появление текстового поля как на сайте vkontakte.ru paratrooper1981 Элементы интерфейса 1 23.11.2009 18:24
Подгружаемые поля формы AlexJ AJAX и COMET 2 26.06.2009 18:04
Динамическое клонирование поля и AJAX supercelt AJAX и COMET 6 02.09.2008 11:27