Удалить tr (студента) с таблицы кнопкой delete и добавить студента кнопкой add

@bapl · Регистрация: 04.05.2021

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

-рядом с каждым студентом вывести крестик - по нажатию на который студент будет удален (удаляется как со страницы, так и с объекта), если был удален последний студент написать текстовое сообщение (“Студенты не найдены”)
-Добавить текстовое поле ввода - ввод имени студента, поле ввода для курса, оценки и checkbox для активности студента, по нажатии на кнопку “Добавить” - студент новый добавляется в список студентов
Я только новичек, и еще не сильно понимаю как это сделать, у меня есть массив объектов (студентов) который надо вывести в 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
let students = [
  {
    name: "Kate",
    estimate: 4,
    course: 1,
    active: true,
  },
  {
    name: "Ivan",
    estimate: 3,
    course: 3,
    active: true,
  },
  {
    name: "Ilya",
    estimate: 4,
    course: 1,
    active: false,
  },
  {
    name: "Bogdan",
    estimate: 2,
    course: 2,
    active: true,
  },
  {
    name: "Nastya",
    estimate: 5,
    course: 3,
    active: false,
  },
];
 
let countStudents = students.length;
let table = document.createElement("table");
table.setAttribute("id", "zen");
let tbody = document.createElement("tbody");
let tr = document.createElement("tr");
tr.innerHTML =
  "<td>Firstname</td><td>Course</td><td>estimate</td><td>Active</td>";
tbody.appendChild(tr);
let items = ["name", "course", "estimate", "active"];
for (let i = 0; i < countStudents; i++) {
  let tr = document.createElement("tr");
  for (let j = 0; j < 4; j++) {
    let td = document.createElement("td");
    let item = students[i][items[j]];
    td.innerHTML = item;
    tr.appendChild(td);
  }
  tbody.appendChild(tr);
}
table.appendChild(tbody);
document.getElementById("table").appendChild(table);
 
let procRows = zen.querySelectorAll("tbody tr");
for (let i = 1; i < procRows.length; i++) {
  procRows[i].innerHTML += '<td><button  title="Remove" >delete</td>';
}

Буду очень благодарен за любую помощь

@Ovederax · 05.05.2021, 22:18

Ну можно доделать твой вариант таким образом

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

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

я сделал в виде кнопки, там Delete заменить на X либо что-то еще, img тег можно с картинкой

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

если был удален последний студент написать текстовое сообщение (“Студенты не найдены”)

это просто доп-условие вначале таблицы

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

Добавить текстовое поле ввода - ввод имени студента, поле ввода для курса, оценки и checkbox для активности студента, по нажатии на кнопку “Добавить”

Ну ты сверстай для начала в виде 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
// Нужно для document.getElementById("table").removeAll();
Element.prototype.removeAll = function() {
  while (this.firstChild) {
    this.removeChild(this.firstChild);
  }
  return this;
};
 
const removeStudent = index => {
  students.splice(index, 1);
};
 
function redrawTable() {
  if (students.length === 0) {
    document.getElementById("table").removeAll();
    document.getElementById("table").innerText = "Студенты не найдены";
    return;
  }
 
  let countStudents = students.length;
  let table = document.createElement("table");
  table.setAttribute("id", "zen");
  let tbody = document.createElement("tbody");
  let tr = document.createElement("tr");
  tr.innerHTML =
    "<td>Firstname</td><td>Course</td><td>estimate</td><td>Active</td>";
  tbody.appendChild(tr);
  let items = ["name", "course", "estimate", "active"];
  for (let i = 0; i < countStudents; i++) {
    let tr = document.createElement("tr");
    for (let j = 0; j < 4; j++) {
      let td = document.createElement("td");
      let item = students[i][items[j]];
      td.innerHTML = item;
      tr.appendChild(td);
    }
    const deleteButton = document.createElement("button");
    deleteButton.innerText = "Delete";
    deleteButton.onclick = () => {
      removeStudent(i);
      redrawTable(); // перерисовка полностью таблицы
    };
    const deleteButtonTd = document.createElement("td");
    deleteButtonTd.appendChild(deleteButton);
    tr.appendChild(deleteButtonTd);
 
    tbody.appendChild(tr);
  }
  table.appendChild(tbody);
  document.getElementById("table").removeAll();            // затираем все элементы что есть внутри
  document.getElementById("table").appendChild(table);  
}
 
redrawTable();

Развлекся немного с написанием непонятно чего... (react alpha 0.1)

HTML5
1
<div id="root"></div>

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
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
const students = [
  {
    name: "Kate",
    estimate: 4,
    course: 1,
    active: true
  },
  {
    name: "Ivan",
    estimate: 3,
    course: 3,
    active: true
  },
  {
    name: "Ilya",
    estimate: 4,
    course: 1,
    active: false
  },
  {
    name: "Bogdan",
    estimate: 2,
    course: 2,
    active: true
  },
  {
    name: "Nastya",
    estimate: 5,
    course: 3,
    active: false
  }
];
 
Element.prototype.removeAll = function() {
  while (this.firstChild) {
    this.removeChild(this.firstChild);
  }
  return this;
};
 
const root = document.getElementById("root");
 
const elementsConstructor = ({ tag, childs, attribures }) => {
  const element = document.createElement(tag);
  if (childs) {
    if (
      typeof childs === "string" ||
      typeof childs === "number" ||
      typeof childs === "boolean"
    ) {
      element.innerHTML = String(childs);
    } else if (childs.forEach) {
      childs.forEach(it => element.appendChild(it));
    } else {
      element.appendChild(childs);
    }
  }
  if (attribures) {
    attribures.forEach(it => element.setAttribute(it.key, it.value));
  }
  return element;
};
 
const tags = ["table", "tbody", "tr", "td", "button", "div"];
 
const [
  createTable,
  createTbody,
  createTr,
  createTd,
  createButton,
  createDiv
] = tags.map(tag => {
  return (childs, attribures) =>
    elementsConstructor({ tag, childs, attribures });
});
 
const removeStudent = index => {
  students.splice(index, 1);
};
 
const redrawTable = rootElement => {
  if (students.length === 0) {
    rootElement.removeAll();
    rootElement.appendChild(createDiv("Студенты не найдены"));
    return;
  }
 
  const headerColumns = ["Firstname", "Course", "Estimate", "Active"];
  const headerTr = createTr(headerColumns.map(it => createTd(it)));
  const fields = ["name", "course", "estimate", "active"];
  const lines = students.map((student, index) => {
    const items = fields.map(field => createTd(student[field]));
    const deleteButton = createButton("Delete");
    deleteButton.onclick = () => {
      removeStudent(index);
      redrawTable(rootElement);
    };
    items.push(createTd(deleteButton));
    return createTr(items);
  });
 
  const tbody = createTbody([headerTr].concat(lines));
  const table = createTable(tbody);
 
  rootElement.removeAll();
  rootElement.appendChild(table);
};
 
redrawTable(root);

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

Удалить tr (студента) с таблицы кнопкой delete и добавить студента кнопкой add

Решение