How to select rows in a table?

Question

How to select rows in a table?

Navigation

#1 by (0 votes)

0

I'm 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 them functionality. 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 delete. I would also like the changes made visually in the table to reflect in the database.

I'm using HTML, CSS and JavaScript in addition to the Bootstrap framework. I did a little research and found 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>

javascript jquery bootstrap jquery-datatables

asked by anonymous 04.08.2017 / 17:04

1 answer

Android Studio does not find JDK during installation.How to solve? Using Circle as a mask with Google Maps Api V3

score 0 · Answer 1

See if the code below can give you a sense of how to do some things you are looking for. To delete, you would click edit, then open the window with the edited data and you do what 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>