Estou trabalhando num sistema web e gostaria de criar uma tabela interativa numa página. Acima da tabela, tenho 4 botões e gostaria de dar funcionalidade a eles. Gostaria de poder selecionar uma linha da tabela para editar ou visualizar ou selecionar múltiplas linhas da tabela para excluir. Também gostaria que as alterações feitas visualmente na tabela se refletissem no banco de dados.
Estou utilizando HTML, CSS e JavaScript, além do framework Bootstrap. Pesquisei um pouco e descobri que a biblioteca jQuery e o plug-in DataTables poderiam me ajudar, mas não tenho ideia de como usá-los.
O código abaixo contém a tabela e os botões superiores.
<div class="btn-toolbar" role="toolbar">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add
</button>
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span> Remove
</button>
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Edit
</button>
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> View
</button>
</div>
<table class="table table-bordered">
<tr>
<th>ID</th>
<th>Name</th>
<th>Version</th>
<th>Status</th>
<th>Priority</th>
<th>Date modified</th>
</tr>
<tr>
<td>RF-1</td>
<td><a href="edit-requirement.html">Sign in</a></td>
<td>1.0</td>
<td>Finished</td>
<td>High</td>
<td>2 May 2017</td>
</tr>
<tr>
<td>RF-2</td>
<td><a href="edit-requirement.html">Sign out</a></td>
<td>1.0</td>
<td>Finished</td>
<td>High</td>
<td>2 May 2017</td>
</tr>
</table>