2

Estoy intentando que se muestren los botones para gestionar una fila de una datatable cuando el cursor pasa por la ultima columna de dicha tabla y logre conseguirlo haciendo una seleccion por id a dichos botones. Pero el problema es que como los id tienen que ser unicos y en cada iteracion el carga nuevos botones, solo se mostraban los de la primera fila. Necesito que se muestren en cada fila que se carga de la base de datos por lo que intente hacer un selestor por class pero asi no funciona ni siquiera para la primera fila. Este es mi codigo:

{% extends 'default/Plantilla.html.twig' %}
{% block subtitle %}<h1>Trazas</h1>{% endblock %}

{% block body %}
<br/>

<table class="table table-striped table-bordered dt-responsive nowrap">
    <thead>
        <tr>

            <th>Usuario</th>
            <th>URL Accedida</th>
            <th>Fecha y Hora</th>
            <th>Ip</th>
            <th>Tiempo de Navegacion</th>
            <th>Descargas</th>
            <th>Cantidad de Sesiones</th>
            <th>Traza</th>
            <th>Gestionar</th>
        </tr>
    </thead>
    <tbody>
    {% for traza in trazas %}
        <tr >

            <td>{{ traza.usuario }}</td>
            <td>{{ traza.URLAccedida }}</td>
            <td>{{ traza.fechaHora }}</td>
            <td>{{ traza.ip }}</td>
            <td>{{ traza.tiempoNavegacion }}</td>
            <td>{{ traza.descargas ? 'Si' : 'No' }}</td>
            <td>{{ traza.cantSesiones }}</td>
            <td>{{ traza.traza }}</td>
            <td width="185px" onmouseover="mostrarBoton()" onmouseout="ocultarBoton()"  >
                <a class="btn btn-success buttonShow" href="{{ path('trazas_show', {'id': traza.id}) }}" id="botonShow" style="display: none;"><i class="fa fa-eye" ></i></a>
                <a class="btn btn-success buttonEdit" href="{{ path('trazas_edit', {'id': traza.id}) }}" id="botonEdit" style="display: none;"><i class="fa fa-edit" ></i></a>
                {{ include('trazas/_delete_form.html.twig') }}
            </td>
        </tr>
    {% else %}
        <tr>
            <td colspan="10">No existen datos registrados</td>
        </tr>
    {% endfor %}
    </tbody>
</table>

<a class="btn btn-success" href="{{ path('trazas_new') }}" id="botonAñadir"><i class="fa fa-plus-circle" ></i>  Añadir</a>

<script>
    var btn_1 = document.getElementsByClassName('btn btn-success buttonEdit');
    var btn_2 = document.getElementsByClassName('btn btn-success buttonEdit');
    var btn_3 = document.getElementsByClassName('btn btn-success buttonDel');

    function mostrarBoton () {
        btn_1.style.display = 'inline';
        btn_2.style.display = 'inline';
        btn_3.style.display = 'inline';
    }
    function ocultarBoton () {
        btn_1.style.display = 'none';
        btn_2.style.display = 'none';
        btn_3.style.display = 'none';
    }
</script>


{% endblock %}

si alguien pudiese darme una solución se lo agradeceria.

2 respuestas 2

4

Te dejo un ejemplo bastante sencillo de como lo puedes hacer. Lo importante es entender que al declarar el evento dentro de tu etiqueta puedes usar "this" para referirte a este mismo elemento. Generalmente al trabajar con tablas dinamicas se lo hace de este modo para evitar problemas con el id o clase. En el siguiente ejemplo como solo quería mostrar u ocultar, simplemente ejecute una linea de código sin llamar a una función. Si lo deseas, lo puedes hacer con una funcion para agregar mas acciones como cambiar el color de fondo o lo que sea. por ejemplo: onmouseover="mostrarBoton(this)" y le estas mandando el objeto directamente como un parámetro a tu función. Por otro lado es importante destacar que debes usar un contenedor interno para los buttons sino no funcionara, en mi caso uso un div. Espero haber sido claro, saludos.

table, th, td {
  border: 1px solid black;
}

.btnActions {
    display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
    <th>buttons</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>td50</td>
    <td onmouseover="$(this).children().show();"
onmouseout="$(this).children().hide();"    
    >
        <div class="btnActions" >
        <a href="#">Editar</a>
        <a href="#">Eliminar</a>
        </div>
    </td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
    <td onmouseover="$(this).children().show();"
onmouseout="$(this).children().hide();"    
    >
        <div class="btnActions" >
          <a href="#">Editar</a>
          <a href="#">Eliminar</a>
        </div>
    </td>
  </tr>
</table>

Editado: A base de la consulta que me dejaste en el comentario voy a dejar una segunda opción donde se muestran los botones al hacer hover sobre la fila.

table, th, td {
  border: 1px solid black;
}

.columnAction {
    display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
    <th>buttons</th>
  </tr>
  <tr onmouseover="$(this).children('.columnAction').show();"
onmouseout="$(this).children('.columnAction').hide();"   >
    <td>Jill</td>
    <td>Smith</td> 
    <td>td50</td>
    <td class="columnAction">
        <a href="#">Editar</a>
        <a href="#">Eliminar</a>
    </td>
  </tr>
  <tr onmouseover="$(this).children('.columnAction').show();"
onmouseout="$(this).children('.columnAction').hide();">
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
    <td class="columnAction">
          <a href="#">Editar</a>
          <a href="#">Eliminar</a>
    </td>
  </tr>
</table>

2
  • Buenas, y en caso de quiera mostrar los botones cuando el cursor pase por cualquier parte de la fila, y no necesariamene por la columna de los botones como seria. Muchas gracias. Commented el 23 ene. 2019 a las 2:09
  • 1
    @YoelvisSocasBrito ya edité la pregunta agregando esa opción. Saludos!
    – Fran Islas
    Commented el 23 ene. 2019 a las 6:44
0

Soy nuevo en el foro, te dejo la solución sin js

.btn{display: none;}
    table tr:hover .btn{display: inline-block;}
<table border="1">
 <tr>
<th>Firstname</th>
<th>Lastname</th>
<th>buttons</th>
  </tr>
			<tr>
				<td>DATO</td>
				<td>DATO</td>
				<td><a href="" class="btn">boton1</a> <button class="btn">boton2</button></td>
			</tr>
			<tr>
				<td>DATO</td>
				<td>DATO</td>
				<td><a href="" class="btn">boton1</a> <button class="btn">boton2</button></td>
			</tr>
		</table>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.