Вставить textarea в ячейку таблицы

@vvvnnnn · 24.03.2016, 17:40. **Показов** 1537. **Ответов** 3

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table class="tdtextarea">
        <tr>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
        </tr>
        <tr>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
        </tr>
    </table>

по клику на любую ячейку нужно чтобы появлялся textarea с содержимым ячейки, при клике на другую область(потере фокуса) textarea пропадал а измененный текст сохранялся в ячейке

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
$(function() {
                $(".tdtextarea td").click(function(){
                    if(document.getElementById("txtarea") == undefined){
                        this.innerHTML = '<textarea id = "txtarea">' + this.innerHTML +'</textarea>';
                        $("#txtarea").focus();
                    }
                });
                
                $("#txtarea").blur(function(){
                    $(this).remove();
                });
            });

При нажатии textarea появляется, а удалить не получается

@Padonak · 24.03.2016, 18:04

попробуйте использовать атрибут contenteditable вместо textarea

@vvvnnnn · 24.03.2016, 18:08 **[ТС]**

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

попробуйте использовать атрибут contenteditable вместо textarea

Нужен именно textarea

@Padonak · 24.03.2016, 23:21

HTML5
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!doctype html>
<html>
<head>
<title>XYZ</title>
<meta charset="utf-8" />
<style>
td{
border:2px solid #ccc;
border-radius:5px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
/*
https://www.cyberforum.ru/javascript-jquery/thread1693808.html
*/
$(document).ready(function(){
 
$(".tdtextarea td").click(function(){
var txt=$(this).text();
$(this).html('<textarea class="editcell"></textarea>');
$(this).find('textarea').val(txt).get(0).focus();
$('.editcell').focusout(function(){
$(this).parent().html($(this).val());
$(this).remove();
});
});
 
});
</script>
</head>
<body>
<center>
<table class="tdtextarea" width="95%">
        <tr>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
        </tr>
        <tr>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
        </tr>
    </table>
</center>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача №1: при указании работ (справочник РаботыПоРемонтуСпецтехники),. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

@Padonak Философ-разговорник 1066 / 391 / 120 Регистрация: 20.02.2016 Сообщений: 884 Записей в блоге: 1
	24.03.2016, 18:04
	попробуйте использовать атрибут contenteditable вместо textarea 0