0

Tengo un input cuyo atributo tiene un valor recibido de la base de datos. Cuando en la base de datos existen distintos valores, pues se recorre el array y se insertan en el HTMLlas tablas con sus input necesarios y los valores de sus atributos son los que trae la base de datos, cada inputva dentro de una tabla. Sería de esta forma:

<table class="table-st" onmouseover="idEvento()">
<tr>
<td><input class="data-id" type="hidden" idvento='+arrayPartido[i].idEvento'></td>
</tr>
</table>

De forma que si existen en la base de datos 3 registros en el campo idEvento, el HTML quedaría así (cada inputiría dentro de una tabla distinta con igual clase):

<input class="data-id" type="hidden" idvento='+00001'>
<input class="data-id" type="hidden" idvento='+00002'>
<input class="data-id" type="hidden" idvento='+00003'>

El problema que tengo es que ahora quiero crear un evento en el cual cuando se pase el ratón por encima de cada tabla se muestre el valor de idvento en una alerta. Pero resulta que al pasar el ratón por encima de cualquiera de las tres tablas siempre me aparece el valor de la primera, en el ejemplo de arriba sería idvento=00001y yo quiero que aparezca su valor correspondiente según la tabla por la que se pase el cursor.

Adjunto el código Javascript que he utilizado:

function idEvento(){
    var id = $('input.data-id').attr('idvento')
    alert(id);
}

Cómo podría hacer para que al pasar el cursor hiciera lo que pido? Muchas gracias de antemano. Un saludo

1
  • en el método onmouseover idEvento pasa el parámetro de +arrayPartido[i].idEvento y prueba el 5 may. 2020 a las 19:56

1 respuesta 1

1

Una solución sencilla es agregar ID de evento como dataset de la tabla y enviar la tabla como parámetro a la función.

function idEvento(tabla) {
    console.log('ID de evento: ' + tabla.dataset.idevento);
}
<table class="table-st" onmouseover="idEvento(this)" data-idevento="+0001">
<tr>
<td>Tabla 1</td>
</tr>
</table>

<table class="table-st" onmouseover="idEvento(this)" data-idevento="+0002">
<tr>
<td>Tabla 2</td>
</tr>
</table>

<table class="table-st" onmouseover="idEvento(this)" data-idevento="+0003">
<tr>
<td>Tabla 3</td>
</tr>
</table>

Si aún quieres hacerlo con campo oculto, todavía debes enviar la tabla como parámetro para poder buscar el campo y, en lugar de usar un atributo no estándar, lo más adecuado es value:

function idEvento(table) {
    console.log($(table).find('input[name=idevento]').val());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <table class="table-st" onmouseover="idEvento(this)">
    <tr>
    <td>Tabla 1<input type="hidden" name="idevento" value="+0001"></td>
    </tr>
    </table>

    <table class="table-st" onmouseover="idEvento(this)">
    <tr>
    <td>Tabla 2<input type="hidden" name="idevento" value="+0002"></td>
    </tr>
    </table>

    <table class="table-st" onmouseover="idEvento(this)">
    <tr>
    <td>Tabla 3<input type="hidden" name="idevento" value="+0003"></td>
    </tr>
    </table>

Tu Respuesta

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

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