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

@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;
}

Новые блоги и статьи Все статьи Все блоги /
сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и источниками (напряжения, ЭДС и тока). Найти токи и напряжения во всех элементах. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и. . .

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

	Редактируемая таблица 05.02.2023, 17:35. Показов 1903. Ответов 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

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

Решение