Удалить строки таблицы 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 таблиц с помощью JavaScript можно избежать лишних перезагрузок страницы, улучшить юзабилити и упростить работу пользователей.
Под динамической работой понимается:

1. создание;
2. управление атрибутами;
3. добавление/удаление столбцов и строк;
4. перемещение строк;
5. заполнение ячеек

1. создание таблицы

Для того, чтобы создать новую таблицу на странице нужно сгенерировать элемент TABLE (createElement()) и добавить его в иерархическую структуру документа с помощью метода appendChild():

var newElem=document.createElement('table'); document.body.appendChild(newElem);

2. управление атрибутами

Есть два способа присвоения атрибутов элементу: использование метода setAttribute()

var newElem=document.createElement('table'); newElem.setAttribute('id','tl'); newElem.setAttribute('width','500'); newElem.setAttribute('border','1'); document.body.appendChild(newElem);

и прямое обращение к свойствам объекта

var newElem=document.createElement('table'); newElem.id='tl'; newElem.width=500; newElem.border=1; document.body.appendChild(newElem);

Есть и более простой способ добавления в документ таблицы с определенными атрибутами:

3. добавление/удаление столбцов и строк и 4. перемещение строк

Для вставки строк используется метод insertRow(), ячеек — insertCell():

var newElem=document.createElement("table"); var newRow=newElem.insertRow(0); var newCell = newRow.insertCell(0); newCell.width="200"; newCell.innerHTML ; var newCell = newRow.insertCell(1); newCell.width="400"; newCell.innerHTML ; var newRow=newElem.insertRow(1); var newCell = newRow.insertCell(0); newCell.width="200"; newCell.innerHTML ; var newCell = newRow.insertCell(1); newCell.width="400"; newCell.innerHTML ; document.body.appendChild(newElem);

Для удаления строк используется метод deleteRow(), по своей конструкции аналогичный методу insertRow(), ячейки — deleteCell(). Для перемещения строк существует функция moveRow(индекс_источника, индекс_приёмника), но она пока работает только в IE (по крайней мере мне не удалось заставить ее работать в других браузерах).

Следующий пример работает только в IE:

var dt = document.getElementById(«t1»); function delete_tr(obj) < var num_tr=obj.parentNode.sectionRowIndex; dt.deleteRow(num_tr) >function up_tr(obj) < var num_tr=obj.parentNode.sectionRowIndex; if (num_tr!=0) dt.moveRow(num_tr, num_tr-1); >function down_tr(obj)

0	удалить строку	поднять строку	опустить
1	удалить строку	поднять строку	опустить строку
2	удалить строку	поднять строку	опустить строку

5. заполнение ячеек

Заполнение ячеек возможно с помощью свойств innerHTML и innerTEXT (их отличия, думаю, понятны из названия):

document.getElementById('идентификатор').innerHTML = 'something';

дополнительно

Как перебрать в цикле все таблицы на странице:

var tables = document.getElementsByTagName(«table»); for ( var t = 0; t

Как перебрать в цикле все ячейки таблицы:

var td_cells=document.getElementById("tl").cells; for (var i=0; i < td_cells.length; i++) alert(td_cells[i].innerHTML);

как закрасить строки таблицы через одну:

var t = document.getElementsById('t1'); var rows = t.getElementsByTagName("tr"); for ( var i = 1; i < rows.length; i += 2 ) rows[i].className = "odd";

Источник