Tengo una tabla la cual le he puesto una imagen con forma de icono (+) <--"abrir"
, la cual al oprimir ahí me arroja una child.rows
mostrando mas información, lo que quiero es que al hacer click automáticamente me cambie la imagen o icono por (-) <--"cerrar"
y de igual forma si cierro que vuelva aparecer la imagen o icono anterior (+)
...
CODIGO
Aquí muestro el arreglo de los datos traídos de mysql
for (var i = result.length -1; i >= 0; i--)
{
var rowNode = db_vigencias
.row.add([
result[i].descripcion,
'<center><img class="details-open" src="../template/images/details_open.png"></center>',<--Esta es la imagen con forma de icono (+) -->
result[i].vigencia_inicial,
result[i].vigencia_final,
])
.draw()
.node();
}
Acá digo, que cuando haga click en el icono la cual seria la clase "details-open" me haga una validación para que en una función me muestre los datos que requiero..
$('#db_vigencias tbody').on('click', '.details-open', function ()
{
var tr = $(this).closest('tr');
var row = db_vigencias.row( tr );
if ( row.child.isShown() ) {
// Esta fila ya está abierta - cerrarla
row.child.hide();
tr.removeClass('shown');
}
else {
// Abrir esta fila
row.child( format(row.data()) ).show();
tr.addClass('shown')//intente poner o agregar este pedazo pero no funciono//.css('background','url(' + imageUrl + ')');
}
} );
Aca ya muestro todos los datos que necesito..
function format ( data ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td><b>DESCRIPCION:</b></td>'+
'<td>'+data[0]+'</td>'+
'</tr>'+
'</table>';
}
Agradecería su colaboración...
details-open.png = imagen icono (+) abrir;
details-closed.png = imagen icono (-) cerrado;