С Новым годом! Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
0 / 0 / 0
Регистрация: 23.03.2022
Сообщений: 21

Нужно добавить кнопки в таблицу )

19.04.2022, 14:32. Показов 403. Ответов 3
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Добрый день , у меня возникла такая проблема , не могу так сделать что бы у каждой строки таблицы была кнопка Edit ,delete, как не пишу или ошибку выдает или кнопка появляется на другом месте , если не сложно помогите с проблемой )

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
    
</head>
<body>
-->
 
    <form id="form">
        <fieldset>
            <legend>Tvyalneri grancum</legend>
            <p>Anun: <input type="text" placeholder="Name" id="userName" value=""></p>
            <p>Azganun: <input type="text" placeholder="Surname" id="userSurname" value=""></p>
            <p>Amsativ: <input type="text" placeholder="Date" id="userDate" value=""></p>
            <p>
                <input type="button" value="Save info" id="saveUserInfo"> 
                <input type="button" value="Show info" id="showUserInfo" onclick="dellinfo()">
            </p>
        </fieldset>
    </form>
 
    
 
    
    <script src="script-project.js"></script>
</body>
</html>
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
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
let form = document.getElementById('form'),
    inputs = [...form.elements].filter(e => e.type === 'text'),
    btnSave = form.saveUserInfo,
    btnShow = form.showUserInfo,
    dat = {
        count: 0,
        userName: [],
        userSurname: [],
        userDate: [],
        action: [],
    };
 
btnSave.addEventListener('click', e => {
    if(inputs.some(e => !e.value.trim())) {
        document.body.insertAdjacentHTML (
            'beforeEnd',
            `<div id="saveError> Lracreq dzer tvyalnery </div>`
        );
        return;
    };
    for(let inp of inputs) dat[inp.id].push(inp.value.trim());
    dat.count++;
});
 
btnShow.addEventListener('click', e => {
    if(!dat.count) {
       let d1 = document.querySelector('fieldset');
        d1.insertAdjacentHTML ('afterbegin', `<div id="infoError"> Aydpisi tvyalner chkan</div>`); // errori pahy
        return;
    }
    if(!document.getElementById('tab')) {
        document.body.insertAdjacentHTML(
            'beforeEnd',
            `<table id="tab" border="1">
                <tbody>
                    <tr>
                        <th>Anun</th>
                        <th>Azganun</th>
                        <th>Amsativ</th>
                        <th>Action</th>
                    </tr>
                </tbody>     
            </table>`
        );
    }
    
    let tab = document.getElementById('tab');
    [...tab.rows].forEach(tr => tr.querySelector('td') ? tr.remove() : null);
    
    for(let i = 0; i < dat.count; i++) {
        let row = tab.insertRow(),
            cellName = row.insertCell(0),
            cellSurname = row.insertCell(1),
            cellDate = row.insertCell(2);        
        
        cellName.innerText = dat.userName[i];
        cellSurname.innerText = dat.userSurname[i];
        cellDate.innerText = dat.userDate[i];
    }
});
 
 
 function dellinfo () {
     document.getElementById('userName').value = "";
     document.getElementById('userSurname').value = "";
     document.getElementById('userDate').value = "";
 };
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
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
fieldset {
    width: 25%;
    height: 250px;
    border-radius: 15px;
    background-color: turquoise;
}
 
#userName {
    border: none;
    border-radius: 8px;
    margin: 5px;
    width: 81.4%;
    height: 25px;
}
 
#userSurname {
    border: none;
    border-radius: 8px;
    margin: 5px;
    width: 75%;
    height: 25px;
}
 
#userDate {
    border: none;
    border-radius: 8px;
    margin: 5px;
    width: 76%;
    height: 25px;
}
 
#saveUserInfo {
    border: none;
    width: 9%;
    height: 40px;
    position: absolute;
    cursor: pointer;
}
 
#showUserInfo {
    position: absolute;
    top: 208px;
    left: 230px;
    border: none;
    width: 9%;
    height: 40px;
    cursor: pointer;
}
 
#saveUserInfo{
    background-color: #1B5F58;
    transition-duration: 3s;
}
 
p {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
 
#tab {
    background-color: turquoise;
    left: 480px;
    top: 20px;
    position: absolute;
    border: none;
    border-radius: 5px;
    width: 45%;
    height: 150px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
 
#infoError {
    position: absolute;
    left: 180px;
    top: 19px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    border: 1px solid black;
    background-color: red;
    height: 28px;
    width: 11%;
    text-align: center;
    border-radius: 5px;
    border: none;
}
 
#saveError {
    position: absolute;
    top: 390px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
19.04.2022, 14:32
Ответы с готовыми решениями:

Как при нажатии кнопки добавить таблицу?
Плиз помогите как при нажатии кнопки добавить таблицу Заранее благодарю

Нужно добавить столбец в таблицу
помогите пожалуйста, нужно добавить столбец &quot;курс&quot; в таблицу, все перепробовал, не получается, вот исходник

Нужно добавить вычисление в таблицу
Нужно что бы от числа введеного в столбец 4 (Собівартість п) отнимало число в 5 столбце (Собівартість ф) и заносило результат в столбец 6...

3
0 / 0 / 0
Регистрация: 23.03.2022
Сообщений: 21
20.04.2022, 10:17  [ТС]
Добрый день , есть хоть какой то способ для этого ??
0
250 / 184 / 58
Регистрация: 12.03.2021
Сообщений: 1,043
21.04.2022, 17:27
Цитата Сообщение от mr0v Посмотреть сообщение
Добрый день , есть хоть какой то способ для этого ??
честно говоря лень и неудобно разбираться в вашем коде.
самый адекватный способ засунуть данные (или элементы) в каждый столб - использовать функцию map.
1
0 / 0 / 0
Регистрация: 23.03.2022
Сообщений: 21
21.04.2022, 18:20  [ТС]
Splaisto, Задачу я уже решил , все получилься , спасибо ))
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
21.04.2022, 18:20
Помогаю со студенческими работами здесь

Нужно подправить код, добавить еще кнопки
&lt;Window x:Class=&quot;Layout.MainWindow&quot;         xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot; ...

нужно добавить звук при нажатии кнопки
Нужно добавить звук после нажатие кнопки. я чет пытался, но никак. подскажите?ошибок нет но и звука нет using System; using...

Возможно ли при нажатии одной кнопки добавить запись в таблицу и создать документ word?
Доброго времени суток! Занимаюсь записью учеников в школу. Кратко о работе: взял документы, записал в access, потом то же записал в...

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

Мне нужно добавить таблицу в ворд, но появляется ошибка
Мне нужно добавить таблицу в ворд, но появляется ошибка: данная операция неприменима к знаку конца строки таблицы Как закрыть...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
Первый деплой
lagorue 16.01.2026
Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит токи на L и напряжения на C в установ. режимах до и. . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера
damix 15.01.2026
Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes
lagorue 13.01.2026
А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений.
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
В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru