Вставить input text при клике по ячейке

@yngwie · Регистрация: 03.12.2009

Студворк — интернет-сервис помощи студентам

Здравствуйте у меня есть такая таблица:

HTML5
1
2
3
4
5
6
7
8
<table>
   <tr>
          <td>Ячейка 1</td>
          <td>Ячейка 2</td>
          <td>Ячейка 3</td>
          <td>Ячейка 4</td>
   </tr>
</table>

Мне нужно чтобы при клике на ячейку в ней появлялся input text. Подскажите как придумать такое решение?
P.S: я так думаю, что нужно обрабатывать событие onclick ?

@Vanstorm · 03.12.2009, 22:01

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
    <script>
        
        function script_(whf)
          {
            whf.innerHTML='<input type="input">'
          }</script>
    <table>
    <tr>
          <td onclick="script_(this)">Ячейка 1</td>
          <td onclick="script_(this)">Ячейка 2</td>
          <td onclick="script_(this)">Ячейка 3</td>
          <td onclick="script_(this)">Ячейка 4</td>
    </tr>
    </table>

@yngwie · 03.12.2009, 22:34 **[ТС]**

Vanstorm, Спасибо Вам, а как сделать чтобы input text был ровно по размерам ячейки?

Добавлено через 23 минуты
Vanstorm, Вы знаете, я почему-то не могу поставить курсор в этот инпут, точнее от ставится но тут же пропадает. Подскажите с чем это связано?

@Vanstorm · 03.12.2009, 23:27

Это связано с тем что при нажатии на "td" вы каждый раз создаёте инпут. чтобы этого исбежать надо собрать предпроверку:

JavaScript
1
2
3
4
5
        function script_(whf)
          {
            if (whf.firstChild.nodeType==3) {
            whf.innerHTML='<input type="input">'}
          }

@yngwie · 03.12.2009, 23:46 **[ТС]**

Vanstorm, еще раз огромное Вам спасибо. Простите за большое кол-во вопросов, не могли бы Вы подсказать вот что:
1) Объясните пожалуйста смысл этой строчки firstChild.nodeType==3, т.е понятно что речь идет родительском объекте td, а почему == 3 что это за число?
2)

а как сделать чтобы input text был ровно по размерам ячейки?

3) Можно ли сделать чтобы при потере фокуса, input удалялся бы, а введенное в него значение записывалось бы в ячейку?
P.S: Еще раз прошу прощения за такое кол-во вопросов в рамке одного топика.

@Vanstorm · 04.12.2009, 00:10

nodeType - это тип узла т.е если узел текстовый свойство nodeType равняется 3, у input nodeType будет другим т.е не надо заменять input на input
C этим сложнее. Можно указывать абсолютные размеры.

Функция "киллер "

JavaScript
1
2
3
4
5
6
          function Killer(whf)
          {
        
            name = whf.value;
            whf.parentNode.innerHTML=name;
          }

и вызываем её обработчиком onblur - <input onblur="Killer(this)" type="input">'

@yngwie · 04.12.2009, 08:30 **[ТС]**

Vanstorm, отлично, то что мне нужно спасибо Вам большое, с шириной inputa я тогда с помощью css попробую. Кстати а почему когда я первый раз щелкаю по ячейки - то инпут появляется все нормально, ввожу значение - далее фокус теряется, значение записывается все ок, но когда пытаюсь второй раз щелкнуть по этой же ячейки, то инпут почему-то не появляется? Один раз только можно его создавать?

@Vanstorm · 04.12.2009, 09:05

Немного модифицируем функцию Скрипт_

JavaScript
1
2
3
4
5
6
7
8
9
        function script_(whf)
          {
            if (whf.firstChild.nodeType==3) 
            {
            name=whf.innerHTML;
            whf.innerHTML='<input onblur="Killer(this)" type="input">'
            whf.firstChild.value=name;
            }
          }

@yngwie · 04.12.2009, 14:12 **[ТС]**

Сообщение от Vanstorm

[LIST=1][*]C этим сложнее. Можно указывать абсолютные размеры.

хмм, а что если в

Code
1
whf.innerHTML='<input onblur="Killer(this)" type="input">'

вставить параметр SIZE и присвоить ему ширину ячейки как-нибудь так:

Code
1
whf.innerHTML='<input onblur="Killer(this)" type="input" SIZE=whf.height>'

или как-нибудь так?

@yngwie · 04.12.2009, 21:04 **[ТС]**

Vanstorm, проблему решил очень просто:

HTML5
1
whf.innerHTML='<input type="input" style='width: 100%;'>'

Добавлено через 1 час 4 минуты
Vanstorm, прошу прощения посмотрите пожалуйста этот код:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<style type="text/css">
    textarea
    {
        border:none;
        width:100%;
        overflow:hidden;
    } 
</style>
<script>
        function script_(whf)
          {
            if (whf.firstChild.nodeType==3) 
            {
             name=whf.innerHTML;
             whf.innerHTML='<textarea onblur="Killer(this)" name="my"></textarea>'
             whf.firstChild.value=name;
             my.focus();
            }
          }
         function Killer(whf)
          {
            name = whf.value;
            whf.parentNode.innerHTML= name;
            whf.onblur = null;
          }
           </script>
    <table border="1">
    <tr>
          <td onclick="script_(this)">Ячейка 1</td>
          <td onclick="script_(this)">Ячейка 2</td>
          <td onclick="script_(this)">Ячейка 3</td>
          <td onclick="script_(this)">Ячейка 4</td>
    </tr>
    </table>

все хорошо, вот только когда щелкаю мышкой, то создается текст ареа на одну строчку больше чем само содержимое ячейки. Почему так?
P.S: вместо input text использую textarea.

@Vanstorm · 04.12.2009, 22:08

my.focus();

Это не правильно. Во первых вы создаете много элементов с одним именем, в данном контексте это не умесно т.к вам надо фокусироваться на одном, во вторых вы пытаетесь "сфокусироваться" не на элементе, а на стороннем обьекте my.

Code
1
2
3
Error: my is not defined
Source File: file:///F:/My%20favourite%20folder/Program%20Files/Utilities/PortableApps/Documents/cyberforum.html
Line: 66

для получения элемента используется document.getElementsByName а вообще я бы советовал использовать средства обхода дерева документа, если конечно это возможно. т.е whf.firstChild.focus();.
Что касаемо лишней строки то это просто узначение высоты, которое ставится по умолчанию. Надо сделать тоже что и с длинной т.е в стиль прописать height:100%; в стиль

@yngwie · 05.12.2009, 14:21 **[ТС]**

Vanstorm, Спасибо Вам большое, Вы мне очень помогли. Я нашел немного другой подход к решению моей задачи, но там есть некоторая проблема. Если у Вас будет время посмотрите пожалуйста, Я вывел в отдельный топик. Спасибо!

Новые блоги и статьи Все статьи Все блоги /
Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .	Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .	Программный отбор значений справочника Maks 21.03.2026 Установка программного отбора значений справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит предопределенное значение перечислений. Процедура. . .	Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .
Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .

@yngwie 0 / 0 / 0 Регистрация: 03.12.2009 Сообщений: 9
	03.12.2009, 22:34 [ТС]
	Vanstorm, Спасибо Вам, а как сделать чтобы input text был ровно по размерам ячейки? Добавлено через 23 минуты Vanstorm, Вы знаете, я почему-то не могу поставить курсор в этот инпут, точнее от ставится но тут же пропадает. Подскажите с чем это связано? 0

@yngwie 0 / 0 / 0 Регистрация: 03.12.2009 Сообщений: 9
	04.12.2009, 08:30 [ТС]
	Vanstorm, отлично, то что мне нужно спасибо Вам большое, с шириной inputa я тогда с помощью css попробую. Кстати а почему когда я первый раз щелкаю по ячейки - то инпут появляется все нормально, ввожу значение - далее фокус теряется, значение записывается все ок, но когда пытаюсь второй раз щелкнуть по этой же ячейки, то инпут почему-то не появляется? Один раз только можно его создавать? 0

@yngwie 0 / 0 / 0 Регистрация: 03.12.2009 Сообщений: 9
	05.12.2009, 14:21 [ТС]
	Vanstorm, Спасибо Вам большое, Вы мне очень помогли. Я нашел немного другой подход к решению моей задачи, но там есть некоторая проблема. Если у Вас будет время посмотрите пожалуйста, Я вывел в отдельный топик. Спасибо! 0