Как удалять строки таблицы нажатием на кнопу?

Question

Как удалять строки таблицы нажатием на кнопу?

Рейтинг: 0Ответов: 2Опубликовано: 22.01.2023

При нажатии на + таблицу добавляются новые строки с кнопками удаления. Как по нажатию на кнопку удалить строку, + чтобы номер строки оставался в правильном порядке: 1,2,3...

var num = 0 
const SCOPE = {
    btnAddRow: document.getElementById('btnAddRow'),
    table: document.getElementById('table'),
    btnSend: document.getElementById('btnSend'),
};

SCOPE.btnAddRow.addEventListener('click', () => {
  const td1 = document.createElement('td');
  const td2 = document.createElement('td');
  const select_jobs = document.createElement('select');
  const td3 = document.createElement('td');
  const select_city = document.createElement('select');
  const td4 = document.createElement('td');
  const count = document.createElement('input')
  const td5 = document.createElement('td');
  const descr = document.createElement('input')
  const td6 = document.createElement('td');
  const close_btn = document.createElement('button');
  close_btn.textContent = "×"
  td1.append(++num)
  td2.append(select_jobs);
  td3.append(select_city)
  td4.append(count)
  td5.append(descr)
  td6.append(close_btn)
  const tr = document.createElement('tr');
  tr.append(td1, td2, td3, td4, td5, td6);
  SCOPE.table.append(tr);
});

<fieldset id="fieldset">
    <table id="table"></table>
</fieldset>
<div class="menu">
    <button type="button" id="btnAddRow" class="plus-btn">+</button>
</div>

css javascript html

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Функция удаления добавляем в js ведь у нас уже есть ссылка на строку, достаточно при нажатии удалить её.
Нумерация создаем с помощью css, потому что можем и она автоматически будет исправлена при удалении строки.

const SCOPE = {
  btnAddRow: document.getElementById('btnAddRow'),
  table: document.getElementById('table'),
  btnSend: document.getElementById('btnSend'),
};

SCOPE.btnAddRow.addEventListener('click', () => {
  const td1 = document.createElement('td');
  const td2 = document.createElement('td');
  const select_jobs = document.createElement('select');
  const td3 = document.createElement('td');
  const select_city = document.createElement('select');
  const td4 = document.createElement('td');
  const count = document.createElement('input')
  const td5 = document.createElement('td');
  const descr = document.createElement('input')
  const td6 = document.createElement('td');
  const close_btn = document.createElement('button');
  close_btn.textContent = "×";
  td1.appendChild(document.createElement(`span`)).classList.add(`counter`)
  td2.append(select_jobs);
  td3.append(select_city)
  td4.append(count)
  td5.append(descr)
  td6.append(close_btn)
  const tr = document.createElement('tr');
  close_btn.addEventListener(`click`, (event) => {
    tr.remove();
  });
  tr.append(td1, td2, td3, td4, td5, td6);
  SCOPE.table.append(tr);
});

table#table {
  counter-reset: index;
}

span.counter::before {
  counter-increment: index;
  content: counters(index, '.', decimal)
}

<fieldset id="fieldset">
  <table id="table"></table>
</fieldset>
<div class="menu">
  <button type="button" id="btnAddRow" class="plus-btn">+</button>
</div>

Answer 2

▲ 0

Как по нажатию на кнопку удалить строку, + чтобы номер строки оставался в правильном порядке: 1,2,3...

Например таким образом...

var num = 0 
const SCOPE = {
    btnAddRow: document.getElementById('btnAddRow'),
    table: document.getElementById('table'),
    btnSend: document.getElementById('btnSend'),
};

SCOPE.table.addEventListener('click', e => {
  let o = e.target
  if (o.tagName != 'BUTTON') return
  o = o.closest('tr')
  o.parentNode.removeChild(o)
  SCOPE.table.querySelectorAll('tr > td:first-child').forEach((o, i) => {
    o.textContent = ++i
  })
})

SCOPE.btnAddRow.addEventListener('click', () => {
  const td1 = document.createElement('td');
  const td2 = document.createElement('td');
  const select_jobs = document.createElement('select');
  const td3 = document.createElement('td');
  const select_city = document.createElement('select');
  const td4 = document.createElement('td');
  const count = document.createElement('input')
  const td5 = document.createElement('td');
  const descr = document.createElement('input')
  const td6 = document.createElement('td');
  const close_btn = document.createElement('button');
  close_btn.textContent = "×"
  td1.append(++num)
  td2.append(select_jobs);
  td3.append(select_city)
  td4.append(count)
  td5.append(descr)
  td6.append(close_btn)
  const tr = document.createElement('tr');
  tr.append(td1, td2, td3, td4, td5, td6);
  SCOPE.table.append(tr);
});

<fieldset id="fieldset">
    <table id="table"></table>
</fieldset>
<div class="menu">
    <button type="button" id="btnAddRow" class="plus-btn">+</button>
</div>

Как удалять строки таблицы нажатием на кнопу?

Ответы