Почему при нажатии кнопки не добавляются новые поля?

@mr0v · Регистрация: 23.03.2022

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

Добрый день, хочу что бы при нажатии кнопки добавилась новое поля, заранее спасибо за ответ))

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>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="../styles/styles.css">
</head>
<body>
    <div id="users"> 
      <input type="text" id="name" placeholder="Name">
      <input type="text" id="email" placeholder="Email">
      <button id="login-btn">Login</button> 
    </div>
 
    <div id="addUser">
    <table class="styletable" id="products-table">
      <tr><th>Id</th><th>Name</th><th>Email</th><th>Price</th></tr>
       
     </table>
       <input type="text" id="product-id" placeholder="Id">
        <input type="text" id="product-name" placeholder="Name">
         <input type="text" id="product-email" placeholder="Email">
        <input type="text" id="product-price" placeholder="Price">
       <button id="addBtn">Add Product</button> 
 
    </div>
 
 
    <script src="../script/script.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
let products = [
    {id: 1, name:"Product1", email:"aaa", price:"100"},
    {id: 2, name:"Product2", email:"aaa1", price:"100"},
    {id: 3, name:"Product3", email:"aaa2", price:"100"},
    {id: 4, name:"Product4", email:"aaa3", price:"100"},
    {id: 5, name:"Product5", email:"aaa4", price:"100"},
    {id: 6, name:"Product6", email:"aaa4", price:"100"},
]
 
function addProduct (products) {
    let table = document.getElementById("products-table");
     for (let i = 0; i < products.length; i++){
        let item = products[i];
        
        let tr = document.createElement('tr');
 
        for(let t in item){
            let td = document.createElement('td');
            
            td.innerHTML = item[t];
 
            tr.appendChild(td);
            addnewProduct(table);
 
        }
 
         table.append(tr);
     }
}
 
addProduct(products);
 
function addnewProduct() {
    let btn = document.getElementById("addBtn");
     btn.onclick = function() {
        let trs = document.getElementsByTagName('tr');
         for (let i = 1; i <  trs.length; i++) {
             trs[i].remove();
        };
        let productId = document.getElementById("product-id").value;
        let productName = document.getElementById("product-name").value;
        let productEmail = document.getElementById("product-email").value;
        let productPrice = document.getElementById("product-price").value;
     
     let newproduct = {
            Id: productId,
            Name: productName,
            Email: productEmail,
            Price: productPrice,
         }
         products.push(newproduct);
      addProduct(products)
     };
      
 
}

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.styletable{
     border: 1px solid black;
      border-radius: 5px;
       bottom: 50px;
      position: absolute;
     width:  99%;
}
 
th{
    border:  1px solid black;
 
}
td{
    border:  1px solid black;
}

krvsa · 24.03.2022, 12:44

mr0v, я не совсем понял, что ты в итоге хочешь получить?

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

JavaScript
1
trs[i].remove();

Вот это для чего делается?

Новые данные должны добавляться к уже имеющимся строкам?

Добавлено через 31 минуту
mr0v, я немного подправил твой пример...
Надеюсь это то что ты хотел получить в итоге.

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
-->
<style>
.styletable{
    border: 1px solid black;
    border-radius: 5px;
    bottom: 50px;
    position: absolute;
    width:  99%;
}
th{
    border: 1px solid black;
}
td{
    border: 1px solid black;
}
</style>
<script>
</script>
</head>
<body>
<div id="users"> 
    <input type="text" id="name" placeholder="Name">
    <input type="text" id="email" placeholder="Email">
    <button id="login-btn">Login</button> 
</div>
 
<div id="addUser">
    <table class="styletable" id="products-table">
        <thead>
            <tr>
                <th>Id</th><th>Name</th><th>Email</th><th>Price</th>
            </tr>
        </thead>
        <tbody id='data'></tbody>
    </table>
    <input type="text" id="product-id" placeholder="Id">
    <input type="text" id="product-name" placeholder="Name">
    <input type="text" id="product-email" placeholder="Email">
    <input type="text" id="product-price" placeholder="Price">
    <button id="addBtn">Add Product</button> 
</div>
<script>
let products = [
    {id: 1, name:"Product1", email:"aaa", price:"100"},
    {id: 2, name:"Product2", email:"aaa1", price:"100"},
    {id: 3, name:"Product3", email:"aaa2", price:"100"},
    {id: 4, name:"Product4", email:"aaa3", price:"100"},
    {id: 5, name:"Product5", email:"aaa4", price:"100"},
    {id: 6, name:"Product6", email:"aaa4", price:"100"},
]
 
const table = document.getElementById('data');
function addProduct (products) {
    console.log('products', products)
    for (let i = 0; i < products.length; i++){
        let item = products[i];
        let tr = document.createElement('tr');
        for(let t in item){
            let td = document.createElement('td');
            td.innerHTML = item[t];
            tr.appendChild(td);
        }
        table.append(tr);
    }
}
 
addProduct(products);
addnewProduct();
 
function addnewProduct() {
    let btn = document.getElementById("addBtn");
    btn.onclick = function() {
        let trs = table.getElementsByTagName('tr');
        for (let i = trs.length - 1; i >= 0  ; i--) {
            trs[i].remove();
        };
        let productId = document.getElementById("product-id").value;
        let productName = document.getElementById("product-name").value;
        let productEmail = document.getElementById("product-email").value;
        let productPrice = document.getElementById("product-price").value;
 
        let newproduct = {
            Id: productId,
            Name: productName,
            Email: productEmail,
            Price: productPrice,
        }
        products.push(newproduct);
        addProduct(products)
    };
}
</script>
</body>
</html>

@mr0v · 24.03.2022, 14:27 **[ТС]**

krvsa, Спасибо большое )) , а мог бы сказать в чем была проблемма?

krvsa · 24.03.2022, 14:36

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

в чем была проблемма?

Да много чего...
Не оправданный вызов функции в цикле. Не верное удаление строк...

@mr0v · 24.03.2022, 14:52 **[ТС]**

Спасибо большое !

Новые блоги и статьи Все статьи Все блоги /
Валидация и контроль данных табличной части документа перед записью 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, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .

Почему при нажатии кнопки не добавляются новые поля?

Решение

Решение

@mr0v 0 / 0 / 0 Регистрация: 23.03.2022 Сообщений: 21
	24.03.2022, 14:27 [ТС]
	krvsa, Спасибо большое )) , а мог бы сказать в чем была проблемма? 0

@mr0v 0 / 0 / 0 Регистрация: 23.03.2022 Сообщений: 21
	24.03.2022, 14:52 [ТС]
	Спасибо большое ! 0

Опции темы