Функция удаления строк html

Создать таблицу с возможностью удаления строк

Написать класс UserTable, который создаёт таблицу с возможностью удаления строк:
Данные для таблицы представлены в виде массива rows.
Для каждого элемента массива должна быть отдельная строка в таблице.
В конце каждой строки должна быть кнопка [X], при клике на которую эта строка удаляется.
Ссылку на корневой элемент table следует добавить в свойство elem. Обращаем вашe внимание: свойство elem не должно быть геттером(get elem()), который при каждом вызове создает новый DOM-елемент. Допускается геттер, который просто возвращает ссылку.

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

 html> head> title>Очищаемая таблица/title> link href="style.css" rel="stylesheet"> /head> body> h2>Пример минимально необходимой структуры таблицы (только HTML) для прохождения тестов:/h1> div class="example"> table> thead> tr> th>Имя/th> th>Возраст/th> th>Зарплата/th> th>Город/th> th>/th> /tr> /thead> tbody> tr> td>Ilia/td> td>25/td> td>1000/td> td>Petrozavodsk/td> td>button>X/button>/td> /tr> /tbody> /table> /div> h2>Результат выполнения вашего кода:/h2> script type="module"> import UserTable from './index.js'; let rows = [ < name: 'Ilia', age: 25, salary: 1000, city: 'Petrozavodsk' >, < name: 'Vasya', age: 14, salary: 1500, city: 'Moscow' >, < name: 'Ivan', age: 22, salary: 100, city: 'Bryansk' >, < name: 'Petya', age: 45, salary: 990, city: 'Chita' >]; let table = new UserTable(rows); document.body.append(table.elem); /script> /body> /html>

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

table> thead> tr> th>Имя/th> th>Возраст/th> th>Зарплата/th> th>Город/th> th>/th> /tr> /thead> tbody> tr> td>Вася/td> td>25/td> td>1000/td> td>Самара/td> td>button>X/button>/td> /tr> tr> td>Петя/td> td>25/td> td>1000/td> td>Самара/td> td>button>X/button>/td> /tr> /tbody> /table>

Нужно создать массив строк с возможностью удаления и добавления новых при использовании программы
Нужно создать массив строк с возможностью удаления и добавления новых при использовании программы.

Как лучше всего создать таблицу с возможностью переноса строк
Подскажите пожалуйста как лучше всего создать таблицу что б строки переносились и проще всего было.

Создать массив указателей с возможностью удаления любого элемента
Привет, друзья! Мне в одной программе нужно было создать массив указателей с возможностью удаления.

Создать список строк с возможностью заполнения с клавиатуры. Вывести количество строк равной длины
Создать список String значений, позволить возможность заполнения из клавиатуры. Вывести количество.

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 117 118 119 120 121 122 123 124 125

 html> head> meta charset="utf-8"> style> table { border-collapse: collapse; width: fit-content; } td, th { border: 1px solid #000; padding: 3px 8px; } td:nth-child(2), td:nth-child(3) { text-align: right; } th:nth-child(1) { width: 100px; } th:nth-child(2) { width: 50px; } th:nth-child(3) { width: 50px; } th:nth-child(4) { width: 120px; } th:nth-child(5) { width: 20px; } style> head> body> script> class UserTable { #rows; #elem; static #tables = []; constructor(rows) { this.#rows = rows; this.#elem = document.createElement("table"); this.makeHTML(); this.#elem.dataset.tindex = UserTable.#tables.length; // Индекс своего экземпляра в хранилище UserTable.#tables.push(this); // Сохранить экземпляр для взаимодействия с обработчиком } get elem() { return this.#elem; } makeHTML() { let s = ` thead> tr> th>Имяth> th>Возрастth> th>Зарплатаth> th>Городth> th>th> tr> thead> tbody>` + this.#rows.map(e => ` tr> td>${e.name}td> td>${e.age}td> td>${e.salary}td> td>${e.city}td> td>button>Xbutton>td> tr> `).join("") + `tbody>`; this.#elem.innerHTML = s; for (let b of this.#elem.querySelectorAll("button")) b.addEventListener("click", UserTable.handler); } static handler(event) { let row = this.parentElement.parentElement; let that = UserTable.#tables[+row.parentElement.parentElement.dataset.tindex]; that.#rows.splice(row.rowIndex - 1, 1); row.remove(); } } let rows = [ { name: 'Ilia', age: 25, salary: 1000, city: 'Petrozavodsk' }, { name: 'Vasya', age: 14, salary: 1500, city: 'Moscow' }, { name: 'Ivan', age: 22, salary: 100, city: 'Bryansk' }, { name: 'Petya', age: 45, salary: 990, city: 'Chita' } ]; let table = new UserTable(rows); document.body.append(table.elem); script> body> html>

Whitecolor, а обработчик события здесь никак не привязан к экземпляру класса.
Он по смыслу static. То есть работает просто как отдельная функция.

Здесь используется обычное поведение обработчика события нажатия кнопки — this указывает на кнопку.
А поскольку this не свой, то ему нет смысла быть методом экземпляра.

Добавлено через 3 минуты
———-
Или надо использовать самый хитрый вариант обработчика события, в котором this НЕ указывает на кнопку?

export default class UserTable { #rows; #elem; static #tables = [];

Но до конца не знаю, как реализовать

Добавлено через 2 часа 2 минуты
amr-now, Я пытаюсь вот так сделать, но пока не работает

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

export default class UserTable { constructor(rows) { this.elem = deleteRows(rows) } } function makeHTML(array){ return ` thead> tr> th>Имяth> th>Возрастth> th>Зарплатаth> th>Городth> tr> thead> tbody> ${`tr> td>${obj.name}td> td>${obj.age}td> td>${obj.salary}td> td>${obj.city}td> td>button>Xbutton>td> tr>`} tbody>` } function deleteRows(array){ const table = document.createElement("table"); table.innerHTML = makeHTML(array); const buttons = table.querySelectorAll("button") for (const button of buttons){ button.addEventListener('click', (event) => event.target.closest("tr").remove()) } return table; }

Сообщение было отмечено amr-now как решение

Решение

Whitecolor, реализация самой хитрой формы обработчика события нажатия кнопки.
Класс реализует интерфейс EventListener согласно спецификации Document Object Model Events:
https://www.w3.org/TR/DOM-Leve. ntListener

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 117 118 119 120 121 122 123 124

 html> head> meta charset="utf-8"> style> table { border-collapse: collapse; width: fit-content; } td, th { border: 1px solid #000; padding: 3px 8px; } td:nth-child(2), td:nth-child(3) { text-align: right; } th:nth-child(1) { width: 100px; } th:nth-child(2) { width: 50px; } th:nth-child(3) { width: 50px; } th:nth-child(4) { width: 120px; } th:nth-child(5) { width: 20px; } style> head> body> script> /** * Класс реализует интерфейс EventListener * https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener */ class UserTable { #rows; #elem; constructor(rows) { this.#rows = rows; this.#elem = document.createElement("table"); this.makeHTML(); } get elem() { return this.#elem; } makeHTML() { let s = ` thead> tr> th>Имяth> th>Возрастth> th>Зарплатаth> th>Городth> th>th> tr> thead> tbody>` + this.#rows.map(e => ` tr> td>${e.name}td> td>${e.age}td> td>${e.salary}td> td>${e.city}td> td>button>Xbutton>td> tr> `).join("") + `tbody>`; this.#elem.innerHTML = s; for (let b of this.#elem.querySelectorAll("button")) b.addEventListener("click", this); } handleEvent(event) { let row = event.target.parentElement.parentElement; // event.target указывает на нажатую кнопку this.#rows.splice(row.rowIndex - 1, 1); // this указывает на свой экземпляр класса row.remove(); console.log(this.#rows); // Тестирование } } let rows = [ { name: 'Ilia', age: 25, salary: 1000, city: 'Petrozavodsk' }, { name: 'Vasya', age: 14, salary: 1500, city: 'Moscow' }, { name: 'Ivan', age: 22, salary: 100, city: 'Bryansk' }, { name: 'Petya', age: 45, salary: 990, city: 'Chita' } ]; let table = new UserTable(rows); document.body.append(table.elem); script> body> html>

Источник

HTMLTableElement: deleteRow() method

The HTMLTableElement.deleteRow() method removes a specific row ( ) from a given .

Syntax

Parameters

index is an integer representing the row that should be deleted. However, the special index -1 can be used to remove the very last row of a table.

Return value

Exceptions

Thrown if index is greater than or equal to the number of available rows or is a negative value other than -1 .

Examples

This example uses JavaScript to delete a table’s second row.

HTML

table> tr> td>Cell 1.1td> td>Cell 1.2td> td>Cell 1.3td> tr> tr> td>Cell 2.1td> td>Cell 2.2td> td>Cell 2.3td> tr> tr> td>Cell 3.1td> td>Cell 3.2td> td>Cell 3.3td> tr> table> 

JavaScript

let table = document.querySelector("table"); // Delete second row table.deleteRow(1); 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on Apr 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Функция удаления строк html

Автор — Выскорко М.С. (aspid02@ngs.ru)

Введение

Объект — некоторая абстракция, которой можно дать уникальное и осмысленное имя. Оно (имя) отделяет конкретный объект от других подобных абстракций. Каждый объект обладает уникальным набором свойств. Эти свойства называются атрибутами. Каждый экземпляр объекта описывается конкретным набором значений атрибутов.

Таблица является одним из объектов HTML, который обладает своими свойствами, методами, атрибутами. Для доступа к которым используют следующую конструкцию:
[window.]document.getElementById(“идентификатор”).свойство | метод([параметры])

Иерархическая структура таблиц

Существует четыре дескриптора, с помощью которых можно определить различные области таблицы: описание, заголовок, тело и нижний колонтитул (соответственно: CAPTION, THEAD, TBODY и TFOOT).

Обратите внимание, в каком порядке идут эти элементы: сначала THEAD, затем TBODY и в конце TFOOT. Именно в такой последовательности браузер будет выводить содержимое этих элементов в независимости от того, как они будут расположены в коде.

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

Использование данных элементов на сегодняшний день, наверное, является больше «хорошим тоном программирования» и встречается в сложных структурах таблиц. Элементы THEAD, TBODY, TFOOT опускаются за ненадобностью, так как это не мешает нормальной работе браузера.

Свойства (атрибуты)

Border – значение: целочисленное; доступ: чтение/запись
Задаёт толщину границ таблицы.

Rules – значение: строковая константа; доступ: чтение/запись
Используется для управления отображения границ исключительно ячейками.
Различают пять значений свойства rules:

Значение	Описание
All	Граница вокруг каждой ячейки
Cols	Вертикальные границы между столбцами
Groups	Вертикальные границы между группами столбцов; горизонтальные границы между группами строк
None	Границы между ячейками не отображаются
Rows	Горизонтальные границы между группами строк

Источник