Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> вставка editbox в тег <td> 
V
    Опции темы
yngwie19
Дата 23.10.2009, 22:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 829
Регистрация: 15.6.2008
Где: Новгород

Репутация: нет
Всего: нет
здравствуйте у меня есть таблица что-то типа такого:
Код

<table>
   <tr>
         <td>10</td>
         <td>5</td>
   </tr>
</table>

можно ли как-нибудь сделать чтобы при щелчке курсором мыши по ячейке под ней создавался editbox в который можно было бы ввести значение, чтобы оно после потери фокуса ячейки записалось в нее (в ячейку таблицы)?
P.S: по-моему подобный эффект использует Excel и другие подобные контролы - типа DataGrid. 

Это сообщение отредактировал(а) yngwie19 - 23.10.2009, 22:33
PM MAIL   Вверх
comtat
Дата 23.10.2009, 23:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1310
Регистрация: 2.5.2006
Где: Россия, Казань

Репутация: 7
Всего: 71
Код

<html>
<body onload="initEvent();">
<style>
    .hidden {display:none;}
</style>
<script>
var editElemId;

function initEvent(){
    td_list = document.getElementsByTagName('td');
    for (i=0;i<td_list.length;i++){
        td_list[i].setAttribute('width', 50);
        td_list[i].onclick = editData;
    }
}
function editData(e){
    editElemId = e.target.id;

    buff = document.getElementById('buff');
    buff.className = '';
    buff.value = e.target.innerHTML;
}
function saveData(){
    buff = document.getElementById('buff');
    buff.className = 'hidden';
    
    document.getElementById(editElemId).innerHTML = buff.value;
}
</script>
<input id="buff" type="text" class="hidden" onblur="saveData();" value=""/>
<table border='1' style="margin:10px 0px 0px 5px;">
   <tr id="tr_1">
         <td id="td_1_1">10</td>
         <td id="td_1_2">5</td>
   </tr>
</table>
</body>
</html>

Проверил в FF 3, Safari и Chrome ...


--------------------
Рожденный в СССР !!!
ExtJS - мой фреймворк 
PM   Вверх
Michael.de
Дата 24.10.2009, 00:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 346
Регистрация: 22.3.2005
Где: Deutschland

Репутация: 4
Всего: 9
Цитата(yngwie19 @  23.10.2009,  22:32 Найти цитируемый пост)
...при щелчке курсором мыши по ячейке под ней создавался editbox...
Только что проверил - в Excel при клике по ячейке писать можно в ней. Это можно эмулировать тем же инпутом, растянутым под её размеры и расположенным сверху, но для этого нужны её координаты smile
PM MAIL   Вверх
bars80080
Дата 24.10.2009, 00:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 44
Всего: 315
Цитата(Michael.de @  24.10.2009,  00:16 Найти цитируемый пост)
но для этого нужны её координаты

зачем координаты? достаточно заменять значение в ячейке на поле со значением
PM MAIL WWW   Вверх
Michael.de
Дата 24.10.2009, 02:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 346
Регистрация: 22.3.2005
Где: Deutschland

Репутация: 4
Всего: 9
bars80080, "над ней" - подразумевается "ближе" к юзеру (у инпута больше z-index и он закрывает собой ячейку) . Так (imho) красивее, хотя, конечно, о вкусах не спорят smile

Это сообщение отредактировал(а) Michael.de - 24.10.2009, 02:36
PM MAIL   Вверх
youri
Дата 24.10.2009, 03:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 740
Регистрация: 17.4.2004

Репутация: 2
Всего: 16
Цитата(Michael.de @  24.10.2009,  02:34 Найти цитируемый пост)
bars80080, "над ней" - подразумевается "ближе" к юзеру (у инпута больше z-index и он закрывает собой ячейку) . Так (imho) красивее, хотя, конечно, о вкусах не спорят

зачем располагать инпут поверх ячейки, если можно просто вставить ячейку внутрь ячейки?


--------------------
С кем разговаривает Microsoft
PM   Вверх
IDVsbruck
Дата 24.10.2009, 04:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 778
Регистрация: 12.11.2006

Репутация: 7
Всего: 22
еще бы знать, что такое editbox, и можно было бы советовать smile
PM MAIL   Вверх
bars80080
Дата 24.10.2009, 13:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 44
Всего: 315
Цитата(IDVsbruck @  24.10.2009,  04:05 Найти цитируемый пост)
еще бы знать, что такое editbox, и можно было бы советовать

ну, по умолчанию решили, что это input type="text"


Цитата(Michael.de @  24.10.2009,  02:34 Найти цитируемый пост)
"над ней" - подразумевается "ближе" к юзеру

спорный вопрос. в таблице 50 строчек, верхнего поля будет не видно. придётся скролить туда-сюда. так что либо прямо в ячейке, либо плавающим слоем под ячейкой с кликом
PM MAIL WWW   Вверх
youri
Дата 24.10.2009, 13:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 740
Регистрация: 17.4.2004

Репутация: 2
Всего: 16
Цитата(bars80080 @  24.10.2009,  13:08 Найти цитируемый пост)
либо плавающим слоем под ячейкой с кликом

под ячейкой?


--------------------
С кем разговаривает Microsoft
PM   Вверх
yngwie19
Дата 24.10.2009, 15:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 829
Регистрация: 15.6.2008
Где: Новгород

Репутация: нет
Всего: нет
Цитата(Michael.de @  24.10.2009,  00:16 Найти цитируемый пост)
Только что проверил - в Excel при клике по ячейке писать можно в ней. Это можно эмулировать тем же инпутом, растянутым под её размеры и расположенным сверху, но для этого нужны её координаты


Michael.de, подскажите как это можно сделать?


comtat, спасибо за пример, только при щелчке по ячейке input text создается выше самой таблицы, а мне нужно чтобы прямо в ячейке. 
PM MAIL   Вверх
Michael.de
Дата 26.10.2009, 00:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 346
Регистрация: 22.3.2005
Где: Deutschland

Репутация: 4
Всего: 9
bars80080, youri: да, инпут в ячейке проще (т.к. не надо его позиционировать) smile

yngwie19: я тут вчера вечером пытался "сваять":
Код

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<title>Edit table</title>
<style type='text/css'>
#table {margin:2cm auto;font-size:16px;border:1px solid #55A;background-color:#FFE}
.title {font-size:18px;color:#55A}
.edit {padding:2px;font-weight:bold;border:1px solid #5E5;color:#33E;background-color:#EFE}
</style>
<script type='text/javascript'>
var cell, clicked=false;
function init(){
 var td, i, l;
 document.onkeydown=endEditing;
 var td=document.getElementById('table').getElementsByTagName('tbody')[0].getElementsByTagName('td');
 for (i=0,l=td.length;i<l;i++){
  if (!td[i].firstChild) td[i].appendChild(document.createTextNode(' '));
  td[i].onclick=beginEditing;
 }
}

function beginEditing(){
 if (!clicked){
  cell=this;
  var input=document.createElement('input');
  var textNode=this.firstChild;
  input.className='edit';
  textNode.data==' ' ? input.value='' : input.value=textNode.data;
  textNode.data='';
  this.appendChild(input);
  input.focus();
  clicked=true;
 }
}

function endEditing(event){
 if (cell!='undefined'){
  var event=event||window.event;
  var code=event.which||event.keyCode;
  if (code==13){
   var textNode=cell.firstChild;
   var input=textNode.nextSibling;
   input.value=='' ? textNode.data=' ' : textNode.data=input.value;
   cell.removeChild(input);
   clicked=false;
  }
 }
}

// need implement
function deleteSpace(text){
 return text.replace(/^\s+|\s+$/g, '');
}
</script>
</head>
<body onload='init();'>
<table id='table' rules='all'>
<thead><tr><th class='title' colspan='4'>Title</th></tr></thead>
<tbody>
<tr><td>&nbsp;</td><td>bbb</td><td>ccc</td><td>ddd</td></tr>
<tr><td>eee</td><td></td><td>ggg</td><td>hhh</td></tr>
<tr><td>iii</td><td>jjj</td><td></td><td>lll</td></tr>
<tr><td>mmm</td><td>nnn</td><td>ooo</td><td></td></tr>
</tbody>
</table>
</body>
</html>
При клике мышью по ячейке её можно редактировать. При нажатии на enter содержимое записывается. Но ещё не всё работает: надо стирать пробелы с начала и в конце записи (ф-ция deleteSpace), образующийся инпут расширяет ячейку... воэможны ещё какие-нибудь баги, а времени нет, сорри smile

P.S. Народ, "покидайтесь помидорами" в скрипт - просто интересно, что там можно улучшить.

Это сообщение отредактировал(а) Michael.de - 26.10.2009, 00:35
PM MAIL   Вверх
comtat
Дата 26.10.2009, 00:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1310
Регистрация: 2.5.2006
Где: Россия, Казань

Репутация: 7
Всего: 71
могу еще посоветовать использовать ExtJS там есть прекрасный компонент Ext.grid.EditorGridPanel 


--------------------
Рожденный в СССР !!!
ExtJS - мой фреймворк 
PM   Вверх
yngwie19
Дата 27.10.2009, 00:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 829
Регистрация: 15.6.2008
Где: Новгород

Репутация: нет
Всего: нет
Michael.de, спасибо большое за пример. Может можно ли как-нибудь не расширять ячейку?
PM MAIL   Вверх
Michael.de
Дата 27.10.2009, 01:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 346
Регистрация: 22.3.2005
Где: Deutschland

Репутация: 4
Всего: 9
yngwie19, если ширина <td> в который помещается <input> прописана заранее (или её можно вычислить) то инпуту можно прописать в css width:сколько тоpx или задать её через JavaScript:
Код

...
var input=document.createElement('input');
input.style.width=w+'px'; // где w - пресловутая ширина <td> минус пару пикселей
просто в моём примере она не задана и для подобного случая меня это самого интересует smile

Это сообщение отредактировал(а) Michael.de - 27.10.2009, 01:23
PM MAIL   Вверх
youri
Дата 27.10.2009, 05:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 740
Регистрация: 17.4.2004

Репутация: 2
Всего: 16
Цитата(Michael.de @  27.10.2009,  01:20 Найти цитируемый пост)
просто в моём примере она не задана и для подобного случая меня это самого интересует

перед вставкой вычислить ширину ячейки и потом задать ее и ячейке и input'у, я думаю


--------------------
С кем разговаривает Microsoft
PM   Вверх
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0666 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.