how to load table data into a modal form

I have a Spring MVC project and I need to pass the data from a table to a bootstrap modal when the user press the EDIT button on the desire record, I´m don´t know much JavaScript, so I need help please. I think is no needed to make a call to a controller method, right?

Here is the table and modal´s code:

        <!--TABLA ROLES-->
        <table class="table table-striped">
            <thead class="table-striped">
                <th>Rol</th>
                <th>Acción</th>
            </thead>
            <tbody>
                <c:forEach var="Roles" items="${listaRoles}">
                    <tr>
                        <td>${Roles.tipoRol}</td>
                        <td>
                            <button id="editarButton" class="btn btn-primary" data-toggle="modal" data-target="#formModal">Editar</button>
                            <form action="delete" method="POST">
                                <input type="hidden" value="${Roles.idRoles}" name="idRoles"/>
                                <input class="btn btn-danger" type="submit" 
                                       value="Eliminar" onClick="return confirm('¿Seguro?')"/>
                            </form>
                        </td>
                    </tr>
                </c:forEach>
            </tbody>
        </table>
    </div>
</div>
<!--END TABLA ROLES-->

<!--EDIT MODAL-->
<div class="col-lg-12">
    <div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="H2">Editar Rol</h4>
                </div>
                <div class="modal-body">
                    <form role="form" action="edit" method="post" class="text-right">
                        <div class="form-group">
                            <label>Rol</label>
                            <input class="form-control" id="tipoRol"/>
                        </div>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-success">Guardar Cambios</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!--END EDIT MODAL-->
<!--ADD MODAL-->
<div class="col-lg-12">
    <div class="modal fade" id="formModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="H2">Añadir Nuevo Rol</h4>
                </div>
                <div class="modal-body">
                    </form>
                    <form role="form" action="add" method="post" class="text-right">
                        <div class="form-group">
                            <label>Tipo Rol</label>
                            <input class="form-control" type="text" name="tipoRol" placeholder="rol" required=""/>
                        </div>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-success">Guardar</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!--END ADD MODAL-->