0

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

1 Resposta 1

0

veja se o código abaixo pode te dar uma noção de como fazer algumas coisas que você procura. Para excluir, você clicaria em editar, então abriria a janela com os dados editados e você faz o que quiser (alterar/excluir/salvar)

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .