Удалить строку из таблицы

268

10 декабря 2017, 13:03

Из базы данных генерируется html-таблица с такими же полями. При нажатии на строку таблицы в javascript меняется её цвет (становится активной). А под таблицей есть кнопка удалить, которая должна удалять выделенную строку из html-таблицы, и БД (достаточно удалить из БД, а из html она удалится при регенерации). Вопрос, как мне удалить выделенную строку? Ведь таблицу не обернёшь в form.

Answer 1

Можно так: около кнопки добавить скрытое поле

<input type="hidden" name="rowId" value="" id="rowId" />

При клике на строку таблицы обновлять value этого поля. Как-нибудь так, или отдельно вынести, неважно:

<tr id="1" onclick="document.getElementById('rowId').value = this.getAttribute('id')">

А при отправке формы смотреть это поле и удалять нужную строку в базе.

Answer 2

$("tr").click(function() { 
  let index = $(this).data("id") 
  $.ajax({ 
    url: //link к базе данных на удаление 
  }) 
  $(this).remove() 
})

td { 
  border: 1px solid black; 
  width: 50px; 
  cursor: pointer; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table> 
  <tr data-id="индекс в базе"> 
    <td>1</td> 
    <td>aaa</td> 
  </tr> 
  <tr> 
    <td>2</td> 
    <td>bbb</td> 
  </tr> 
  <tr> 
    <td>3</td> 
    <td>ccc</td> 
  </tr> 
  <tr> 
    <td>4</td> 
    <td>ddd</td> 
  </tr> 
  <tr> 
    <td>5</td> 
    <td>eee</td> 
  </tr> 
</table>