How to select rows in a table?

Question

I am working on a web system and would like to create an interactive table on a page. Above the table, I have 4 buttons and would like to give functionality to them. I would like to be able to select a row from the table to edit or view or select multiple rows from the table to exclude. I would also like the changes made visually in the table to be reflected in the database.

I’m using HTML, CSS and Javascript, in addition to the Bootstrap framework. I did some research and discovered that the jQuery library and the Datatables plug-in could help me, but I have no idea how to use them.

The code below contains the table and the top buttons.

<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>

Answer 1

see if the code below can give you a sense of how to do some of the things you’re looking for. To delete, you would click edit, then open the window with the edited data and you do whatever you want (change/delete/save)

<div class="btn-toolbar" role="toolbar">
    <button class="btn btn-default" type="button">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Novo
    </button>    
    <button class="btn btn-default" type="button">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Excluir Selecionados
    </button>    
</div>
<table class="table table-bordered">
    <tr>
        <th>Selecionar</th>
        <th>ID</th>
        <th>Name</th>
        <th>Version</th>
        <th>Status</th>
        <th>Priority</th>
        <th>Date modified</th>
        <th>Ação</th>
    </tr>
    <tr>
        <td><INPUT type="checkbox" id="RF-1" name="chk1"/></td>
        <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>
        <td><a href="#" metodoJSEditar(idRF-1)>Editar</a></td>
    </tr>
    <tr>
        <td><INPUT type="checkbox" id="RF-2" name="chk2"/></td>
        <td>RF-2</td>
        <td><a href="edit-requirement.html">Editar</a></td>
        <td>1.0</td>
        <td>Finished</td>
        <td>High</td>
        <td>2 May 2017</td>
        <td><a href="#"  metodoJSEditar(idRF-2) >Editar</a></td>
    </tr>    
</table>