Редактируемая таблица

@Mardesss · Регистрация: 05.02.2023

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

помогите пожалуйста, нужно что бы при нажатии на кнопку карандаша, во всплывающем диве, в input было сразу написано имя и номер человека из таблицы. И что бы можно было изменить имя и номер телефона на другой в этом же окне СПАСИБО заранее, очень нужно помощь

@liris · 05.02.2023, 17:58

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

Если у вас просто статичная таблица, вы можете сразу передать эти параметры на вызов функции, например:

HTML5
1
<button class="edit" onclick="editRecord('name', 'number')"></button>

@Mardesss · 05.02.2023, 17:59 **[ТС]**

неа не сработало, таблица статичная

@Padonak · 05.02.2023, 18:08

Mardesss, вы бы хоть разметку сюда выложили. Или тот человек, который вам напишет скрипт, должен и разметку сочинить?

@klyapa · 05.02.2023, 18:23

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

вы бы хоть разметку сюда выложили

Вот-вот. html был бы очень кстати. Сама задача несложная. Можно даже формирование таблицы в js перенести. Нужен только массив имен с телефонами.

Добавлено через 2 минуты
типа этого...

JavaScript
1
2
3
4
5
6
const data = [
    ['Лёха_1', '000 111 22 33'],
    ['Лёха_2', '111 333 44 77'],
    ['Лёха_3', '666 000 99 11'],
    /* ... */
];

@DrType · 05.02.2023, 18:25

Mardesss, это продолжение темы Код срабатывает только при нажатии на первую кнопку ?

@klyapa · 05.02.2023, 18:27

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

это продолжение темы Код срабатывает только при нажатии на первую кнопку ?

По всей видимости, да.

@Mardesss · 05.02.2023, 18:27 **[ТС]**

с тем я уже разобрался, теперь нужно что бы при нажитии на кнопку карандаша, в инпутах сразу появлялся номет и имя человека, если нажал на 1 кнопку = значит в инпутах имя и номер 1 человека и т.д.

@liris · 05.02.2023, 18:29

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

неа не сработало

Что именно не сработало? Вы просто скопировали мой код и вставили в свой?

@Mardesss · 05.02.2023, 18:29 **[ТС]**

нет изменил под свой код

@klyapa · 05.02.2023, 18:32

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

с тем я уже разобрался, теперь нужно что бы при нажитии на кнопку карандаша, в инпутах сразу появлялся номет и имя человека, если нажал на 1 кнопку = значит в инпутах имя и номер 1 человека и т.д.

Вы ответьте на вопрос. Если это продолжение той темы, то ничего вы не разобрались. Нужно будет полностью переписать функцию divEdit() ... и многое другое.

@Mardesss · 05.02.2023, 18:33 **[ТС]**

да это продолжение, полный код JS

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const edit = document.getElementsByClassName("penButton");
const newWindow = document.getElementById('newWindow');
const quit = document.getElementById("quit");
 
const massName = ['Collete Kelley', 'Ruby-Rose Lennon', 'Leanne Gibbons', 'Rumaisa Peel', 'Gene Medrano', 'Sheridan Tucker', 'CHristina Mack', 'Everly Moses', 'Kara Feeney', 'Cameron Rennie']
const massNumber = ['012 435 45 67', '012 435 45 67', '012 879 78 45', '012 456 64 67', '012 245 47 89', '012 345 85 90', '012 123 36 46', '012 678 99 74', '012 456 96 53', '012 967 47 85']
 
const divEdit = () => {
    newWindow.style.display = 'block';
}
 
const quitEdit = () => {
    newWindow.style.display = 'none';
}
 
for(let elem of edit) {
    elem.addEventListener("click", divEdit);
}
quit.addEventListener('click', quitEdit)

@klyapa · 05.02.2023, 18:39

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

да это продолжение,

Ну вот, ... прояснело... Теперь нужны айдишники инпутов окна newWindow, чтоб в них значения из строки таблицы вставить.

@Mardesss · 05.02.2023, 18:42 **[ТС]**

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 <div id="newWindow">
        <div id="ones">
            <button id="quit">X</button>
        </div>
        <div id="plop">
            <div id="two">
                <h3>Edit visitor:</h3>
            </div>
            <div id="three">
                <h4>Full name:</h4>
                <input type="text" name="name" id="name">
            </div>
            <div id="four">
                <h4>Phone number:</h4>
                <input type="text" name="number" id="number">
            </div>
            <div id="five">
                <button>Save</button>
            </div>
        </div>
    </div>

@klyapa · 05.02.2023, 19:02

JavaScript
1
2
3
4
5
6
7
8
9
10
11
// найдём инпуты...
const firstName = document.getElementById('name');
const telephone = document.getElementById('number');
 
// теперь divEdit будет выглядеть вот так...
const divEdit = (e) => {
    let tds = e.target.closest('tr').cells; // коллекция ячеек текущей строки
    firstName.value = tds[1].innerText;
    telephone.value = tds[2].innerText;
    newWindow.style.display = 'block';
}

Добавлено через 3 минуты
Дальше нужно написать обработчик клика по Save

Добавлено через 5 минут
Mardesss, работает? Что-нибудь есть в полях?

@Mardesss · 05.02.2023, 19:07 **[ТС]**

да, я же отправил СПАСИБО, щас пробую с кнопкой сейв сделать что бы можно было изменять имена и номера телефонов, спасибо еще раз

@klyapa · 05.02.2023, 19:19

Mardesss, вам желательно передать в окно идентификатор строки, что бы не было гемора с поиском при сохранении. Например так... в теле той же функции divEdit

JavaScript
1
2
3
4
5
6
7
8
9
10
// кнопка Save 
const save = document.querySelector('#five button');
 
const divEdit = (e) => {
    let tr = e.target.closest('tr');
    firstName.value = tr.cells[1].innerText;
    telephone.value = tr.cells[2].innerText;
    save.dataset.row = tr.rowIndex;
    newWindow.style.display = 'block';
}

Теперь у кнопки в data-атрибуте row будет индекс той строки, в которой будете изменять текст ячеек

Добавлено через 1 минуту
... а в самом начале кода нужно найти коллекцию строк и занести в переменную

@Mardesss · 05.02.2023, 19:29 **[ТС]**

немного не понял как это должно работать. Мне нужно будет делать отдельную функцию которая должна вешаться на кнопку, причем тут тогда divEdit

@klyapa · 05.02.2023, 19:40

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

немного не понял как это должно работать. Мне нужно будет делать отдельную функцию которая должна вешаться на кнопку, причем тут тогда divEdit

Это последствия того, что не было всего html, ... а html таблицы до сих пор нет ... уже бы давно код запилил и показал, как это всё в куче выглядит.

Давайте сюда разметку таблицы со своими идентификаторами ... css желательно тоже ... html окна вроде уже есть ... напишу под ключ

@Mardesss · 05.02.2023, 19:44 **[ТС]**

JavaScript
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
const edit = document.getElementsByClassName("penButton");
const newWindow = document.getElementById('newWindow');
const quit = document.getElementById("quit");
const firstName = document.getElementById('name');
const telephone = document.getElementById('number');
const save = document.querySelector('#five button');
 
const massName = ['Collete Kelley', 'Ruby-Rose Lennon', 'Leanne Gibbons', 'Rumaisa Peel', 'Gene Medrano', 'Sheridan Tucker', 'CHristina Mack', 'Everly Moses', 'Kara Feeney', 'Cameron Rennie']
const massNumber = ['012 435 45 67', '012 435 45 67', '012 879 78 45', '012 456 64 67', '012 245 47 89', '012 345 85 90', '012 123 36 46', '012 678 99 74', '012 456 96 53', '012 967 47 85']
 
const divEdit = (e) => {
    let tr = e.target.closest('tr');
    firstName.value = tr.cells[1].innerText;
    telephone.value = tr.cells[2].innerText;
    save.dataset.row = tr.rowIndex;
    newWindow.style.display = 'block';
}
 
const quitEdit = () => {
    newWindow.style.display = 'none';
}
 
for(let elem of edit) {
    elem.addEventListener("click", divEdit);
}
 
quit.addEventListener('click', quitEdit)

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<table class="iksweb">
                <tbody>
                    <tr id="zag">
                        <td>ID</td>
                        <td>Name</ta>
                        <td>Phone</td>
                        <td>Edit</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>Colette Kelley</td>
                        <td>012 435 45 67</td>
                        <td>
                            <button class="penButton">✏️</button>
                        </td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Ruby-Rose Lennon</td>
                        <td>012 647 34 24</td>
                        <td>
                            <button class="penButton">✏️</button>
                        </td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Leanne Gibbons</td>
                        <td>012 879 78 45</td>
                        <td>
                            <button class="penButton">✏️</button>
                        </td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>Rumaisa Peel</td>
                        <td>012 456 64 67</td>
                        <td>
                            <button class="penButton">✏️</button>
                        </td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>Gene Medrano</td>
                        <td>012 245 47 89</td>
                        <td>
                            <button class="penButton">✏️</button>
                        </td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>Sheridan Tucker</td>
                        <td>012 345 85 90</td>
                        <td>
                            <button class="penButton">✏️</button>
                        </td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>CHristina Mack</td>
                        <td>012 123 36 46</td>
                        <td>
                            <button class="penButton">✏️</button>
                        </td>
                    </tr>
                    <tr>
                        <td>8</td>
                        <td>Everly Moses</td>
                        <td>012 678 99 74</td>
                        <td>
                            <button class="penButton">✏️</button>
                        </td>
                    </tr>
                    <tr>
                        <td>9</td>
                        <td>Kara Feeney</td>
                        <td>012 456 96 53</td>
                        <td>
                            <button class="penButton">✏️</button>
                        </td>
                    </tr>
                    <tr>
                        <td>10</td>
                        <td>Cameron Rennie</td>
                        <td>012 967 47 85</td>
                        <td>
                            <button class="penButton">✏️</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </main>
 
 
 
    <div id="newWindow">
        <div id="ones">
            <button id="quit">X</button>
        </div>
        <div id="plop">
            <div id="two">
                <h3>Edit visitor:</h3>
            </div>
            <div id="three">
                <h4>Full name:</h4>
                <input type="text" name="name" id="name">
            </div>
            <div id="four">
                <h4>Phone number:</h4>
                <input type="text" name="number" id="number">
            </div>
            <div id="five">
                <button id="save">Save</button>
            </div>
        </div>
    </div>

CSS
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
// таблица
.iksweb {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    height: auto;
}
 
.iksweb,
.iksweb td,
.iksweb th {
    border: 1px solid #595959;
}
 
.iksweb td,
.iksweb th {
    padding: 3px;
    width: 30px;
    height: 35px;
}
 
 
#zag td {
    font-weight: 600;
}
// всплывающее окно
#ones {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
 
#plop {
    margin: 20px; 
}
 
#three {
    margin-top: 15px;
    margin-bottom: 10px;
}
 
#three #name, #four #number, #five button {
    width: 100%;
    height: 25px;
}
 
#five button {
    margin-top: 15px;
}
 
#quit {
    cursor: pointer;
    width: 20px;
    height: 20px;
}

Новые блоги и статьи Все статьи Все блоги /
Валидация и контроль данных табличной части документа перед записью Maks 22.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .	Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .
Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .

@Mardesss 1 / 1 / 0 Регистрация: 05.02.2023 Сообщений: 29

	Редактируемая таблица 05.02.2023, 17:35. Показов 2023. Ответов 30 Метки новичёк (Все метки) помогите пожалуйста, нужно что бы при нажатии на кнопку карандаша, во всплывающем диве, в input было сразу написано имя и номер человека из таблицы. И что бы можно было изменить имя и номер телефона на другой в этом же окне СПАСИБО заранее, очень нужно помощь 0

@Mardesss 1 / 1 / 0 Регистрация: 05.02.2023 Сообщений: 29
	05.02.2023, 17:59 [ТС]
	неа не сработало, таблица статичная 0

@Padonak Философ-разговорник 1066 / 391 / 120 Регистрация: 20.02.2016 Сообщений: 884 Записей в блоге: 1
	05.02.2023, 18:08
	Mardesss, вы бы хоть разметку сюда выложили. Или тот человек, который вам напишет скрипт, должен и разметку сочинить? 1

@DrType 6553 / 3624 / 1075 Регистрация: 07.09.2019 Сообщений: 5,877 Записей в блоге: 1
	05.02.2023, 18:25
	Mardesss, это продолжение темы Код срабатывает только при нажатии на первую кнопку ? 0

@Mardesss 1 / 1 / 0 Регистрация: 05.02.2023 Сообщений: 29
	05.02.2023, 18:27 [ТС]
	с тем я уже разобрался, теперь нужно что бы при нажитии на кнопку карандаша, в инпутах сразу появлялся номет и имя человека, если нажал на 1 кнопку = значит в инпутах имя и номер 1 человека и т.д. 0

@Mardesss 1 / 1 / 0 Регистрация: 05.02.2023 Сообщений: 29
	05.02.2023, 18:29 [ТС]
	нет изменил под свой код 0

@Mardesss 1 / 1 / 0 Регистрация: 05.02.2023 Сообщений: 29
	05.02.2023, 19:07 [ТС]
	да, я же отправил СПАСИБО, щас пробую с кнопкой сейв сделать что бы можно было изменять имена и номера телефонов, спасибо еще раз 0

@Mardesss 1 / 1 / 0 Регистрация: 05.02.2023 Сообщений: 29
	05.02.2023, 19:29 [ТС]
	немного не понял как это должно работать. Мне нужно будет делать отдельную функцию которая должна вешаться на кнопку, причем тут тогда divEdit 0

Редактируемая таблица

Решение