Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.03.2019, 07:36
Новичок на форуме
Отправить личное сообщение для Mrrukkus Посмотреть профиль Найти все сообщения от Mrrukkus
 
Регистрация: 30.03.2019
Сообщений: 2

Отдельные всплывающие окна для каждой ячейки таблицы
Доброго времени суток, уважаемые программисты, верстальщики и все все. Возникла проблема, в которой самостоятельно разобраться не получается а ответа годного который наставил бы на путь истинный в интернете не нашёл. Суть: есть html таблица в каждой to которой есть отдельные divы под определенные данные. При нажатии на любую ячейку РЯДОМ с боку появляется окошко для добавления/редактирования этих самых данных в ячейке. Вопрос в том, как через js сделать так, чтоб при нажатии на любую ячейку рядом с ней всплывало это самое окошко в котором я мог бы редактировать данные этой ячейки? Из всех прочитанных материалов понимаю, что из ячеек нужно сделать массив, но не понимаю как правильно это все сделать, так как навыков в js уж совсем мало.
Ответить с цитированием
  #2 (permalink)  
Старый 01.04.2019, 07:35
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,932

Сообщение от Mrrukkus
Из всех прочитанных материалов понимаю, что из ячеек нужно сделать массив
Это не обязательно...
Можно обойтись одним окном, которое будет абсолютно позиционироваться относительно всей таблицы.
Останется только правильно вычислять координаты верхней точки этого окна.
Ответить с цитированием
  #3 (permalink)  
Старый 01.04.2019, 11:14
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

А дополнительное окошечко обязательно нужно?
<table border="1" width="200">
   <tr>
     <td>
         <div contenteditable>div 111</div><div contenteditable>div 112</div>
     </td>
     <td>
         <div contenteditable>div 121</div><div contenteditable>div 122</div>
     </td>
   </tr>
   <tr>
     <td>
         <div contenteditable>div 211</div><div contenteditable>div 212</div>
     </td>
     <td>
         <div contenteditable>div 221</div><div contenteditable>div 222</div>
     </td>
   </tr>
</table>
Ответить с цитированием
  #4 (permalink)  
Старый 01.04.2019, 12:46
Новичок на форуме
Отправить личное сообщение для Mrrukkus Посмотреть профиль Найти все сообщения от Mrrukkus
 
Регистрация: 30.03.2019
Сообщений: 2

Сообщение от ksa Посмотреть сообщение
Это не обязательно...
Можно обойтись одним окном, которое будет абсолютно позиционироваться относительно всей таблицы.
Останется только правильно вычислять координаты верхней точки этого окна.
Нет, там обязательно у каждой ячейки должно появляться это самое окно, которое относительно этой ячейки определенным спозиционировано (справа)

Сообщение от Dilettante_Pro Посмотреть сообщение
А дополнительное окошечко обязательно нужно?
<table border="1" width="200">
   <tr>
     <td>
         <div contenteditable>div 111</div><div contenteditable>div 112</div>
     </td>
     <td>
         <div contenteditable>div 121</div><div contenteditable>div 122</div>
     </td>
   </tr>
   <tr>
     <td>
         <div contenteditable>div 211</div><div contenteditable>div 212</div>
     </td>
     <td>
         <div contenteditable>div 221</div><div contenteditable>div 222</div>
     </td>
   </tr>
</table>
Да, окошко нужно обязательно, оно имеет свой стиль, так дизайн предусматривает)
Ответить с цитированием
  #5 (permalink)  
Старый 01.04.2019, 12:51
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,932

Сообщение от Mrrukkus
Нет, там обязательно у каждой ячейки должно появляться это самое окно, которое относительно этой ячейки определенным спозиционировано (справа)
Одновременно могут быть видны несколько таких окон?
Ответить с цитированием
  #6 (permalink)  
Старый 01.04.2019, 13:27
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Ну, насчет стиля...
<style>
button { display:none;}
td:hover div { background-color: lightgreen; }
td:hover button { display:block; }
</style>
<table border="1" width="200">
   <tr>
     <td>
         <div contenteditable>div 111</div><div contenteditable>div 112</div>
        <button>Запись</button>
        <button>Отмена</button>
     </td>
     <td>
         <div contenteditable>div 121</div><div contenteditable>div 122</div>
     </td>
   </tr>
   <tr>
     <td>
         <div contenteditable>div 211</div><div contenteditable>div 212</div>
     </td>
     <td>
         <div contenteditable>div 221</div><div contenteditable>div 222</div>
     </td>
   </tr>
</table>
Ответить с цитированием
  #7 (permalink)  
Старый 01.04.2019, 14:18
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Или так
<style>
table { position:relative; top: 20px; left:50px;}
td:hover  {transform: scale(1.5); }
td:hover div { background-color: lightgreen; }

</style>
<table border="1" width="200">
   <tr>
     <td>
         <div contenteditable>div 111</div><div contenteditable>div 112</div>
     </td>
     <td>
         <div contenteditable>div 121</div><div contenteditable>div 122</div>
     </td>
   </tr>
   <tr>
     <td>
         <div contenteditable>div 211</div><div contenteditable>div 212</div>
     </td>
     <td>
         <div contenteditable>div 221</div><div contenteditable>div 222</div>
     </td>
   </tr>
</table>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Правильно вызвать массив biryukovm Элементы интерфейса 3 19.03.2018 12:31
script для всплывающего окна?????! BIZNES123 Элементы интерфейса 3 04.12.2009 09:43
onmouseover отрабатывает по разному для одинаковых ячеек таблицы ilshat Events/DOM/Window 2 11.02.2009 11:25
Привязка картинки к углу ячейки таблицы! Помогите с кодом! Alexofer Общие вопросы Javascript 6 30.12.2008 23:14
Размер ячейки использовать для определения размера рисунка art_em Общие вопросы Javascript 2 20.11.2008 10:27