1

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;

4 respuestas 4

2

Yo mantendría las cosas simples. Simplemente tendría un span.icon que tiene por defecto una imagen de fondo del ícono cerrado y, si le añades la clase open se cambie la imagen por la abierta.

$('.details .icon').on('click', function() {
  $(this).parent().parent().toggleClass('open');
});
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');


*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.details {
  border-radius: 2px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .25), 0 -1px 1px 0 rgba(0, 0, 0, .1);
  margin: 20px auto;
  overflow: hidden;
  width: 250px;
}

.details.open .icon {
  background-image: url('http://i.imgur.com/EwOiOd7.jpg');
}

.details.open .details-body {
  display: block;
}

.details-header {
  padding: 5px 10px;
}

.details-header .icon {
  background-image: url('http://i.imgur.com/gG37MbT.png');
  background-size: cover;
  cursor: pointer;
  display: inline-block;
  height: 20px;
  width: 30px;
}

.details-body {
  display: none;
  padding: 10px;
}

.details-body p {
  color: #555;
  font-family: 'Noto Sans';
  font-size: 14px;
  text-align: justify;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="details">
  <header class="details-header">
    <span class="icon"></span>
  </header>
  <article class="details-body">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa repellendus eveniet voluptatibus necessitatibus similique porro soluta doloribus suscipit hic. Officiis in obcaecati ea ipsam, nisi. Debitis beatae, fugit officia ullam.
    </p>
  </article>
</div>


Nota: he puesto un código HMTL de ejemplo ya que no has mostrado el HTML en tu pregunta.

2
  • El codigo es bueno y funcional pero la idea es implementar ese codigo dentro de mi codigo para que sea 100% funcional
    – JDavid
    Commented el 1 mar. 2017 a las 15:48
  • 1
    ¿Ya intentaste adaptarlo a tu código? ¿No te fue posible? Esto es únicamente una idea, puede ser representado en varias formas.
    – gugadev
    Commented el 1 mar. 2017 a las 16:24
0

Considera colocar un ID a la etiqueta de HTML de tipo imagen.

Ejemplo:

// Nota que al crear el HTML, estoy estableciendo el id al elemento "IMG":
for (var i = result.length -1; i >= 0; i--)
{
    var rowNode = db_vigencias
    .row.add([
                result[i].descripcion,
                '<center><img class="details-open" id="miImagenID_' + i + '" 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();
}

Luego, en tu código busca la imagen con determinado ID y le cambias el valor de la propiedad src; algo así como:

En tu funcíón onclick:

$('#db_vigencias tbody').on('click', '.details-open', function ()

Coloca lo siguiente:

// Aquí el Id de tu elemento "img" es "miImagenID_1".
// En este punto, le cambias el valor "SRC" del elemento "IMG".
document.getElementById('miImagenID_1').src = "../details_closed.png";
3
  • Hola @Mauricio e implementado tu codigo pero no me ha funcionado, al hacer click en la imagen o icono no pasa nada dentro de la funcion a la cual le digo que al hacer click haga lo sgte....yo pensaria que el codigo deberia de ir dentro de la sentencia del if o else pero no sabria como agregarlo....
    – JDavid
    Commented el 1 mar. 2017 a las 14:27
  • @Daniel tienes razón en que el código debería ir en la condición if/else para determinar la imagen "cerrado o abierto". Con mi sugerencia, ¿qué no te ha funcionado exáctamente, no detectas el elemento IMG o algo mas? también por favor edita tu pregunta agregando los nombres de las imágenes que corresponden a "abierto" y "cerrado". Commented el 1 mar. 2017 a las 14:42
  • el nombre de las imagenes es exactamente el publicado, la verdad es que el elemento es lo menos importante, ya que si la url de la imagen (+) es valida los mismo deberia de pasar con la imagen (-) ya que estan en la misma ruta...yo pensaria que deberia de hacer algo como un removeClass o algo asi para que cuando de click esa imagen (+) desaparezca y me muestre esta (-) e igualmente si oprimo en (-) se cierre la child.rows y me vuelva aparecer la imagen (+)...espero haberme hecho entender
    – JDavid
    Commented el 1 mar. 2017 a las 14:51
0
$(document).ready(function () {
    $(".dropdown").on("show.bs.dropdown", function (event) {
        $(this).find('.icono-desplegable').addClass("glyphicon-chevron-up");
        $(this).find('.icono-desplegable').removeClass("glyphicon-chevron-down");
    });
    $(".dropdown").on("hide.bs.dropdown", function (event) {
        $(this).find('.icono-desplegable').removeClass("glyphicon-chevron-up");
        $(this).find('.icono-desplegable').addClass("glyphicon-chevron-down");
    });
});

Yo utilizo jQuery para hacer un cambio de íconos (aunque claro, yo uso los glyphicons), aunque puedes implementar algo como esto...

$(document).ready(function () {
      $("#btn-exp").on("click", function () {
          $(this).toggleClass("icono-cerrado");
          $(this).toggleClass("glyphicon glyphicon-collapse-down");
          $(this).toggleClass("glyphicon glyphicon-collapse-up");
          $(this).toggleClass("icono-abierto");
      });
  });
#btn-exp{
  height: 50px;
  width: 50px;
}
.icono-abierto 
{
  background-color: cyan;
  background-image: url('img/icono-abierto.png');
}

.icono-cerrado 
{
  background-color: red;
  background-image: url('img/icono-cerrado.png');
}
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div id="btn-exp" class="icono-cerrado glyphicon glyphicon-collapse-down
" onclick=""></div>

incluí una porción de código para que entiendas la idea. Espero te sea de ayuda

4
  • Tu ejemplo no funciona. Pero funcionaría si usas selectores CSS más específicos que tengan prioridad sobre el negro, como #btn-exp.icono-abierto
    – ffflabs
    Commented el 1 mar. 2017 a las 15:40
  • tu codigo me podria funcionar pero la idea es implementar ese codigo dentro de mi codigo para que sea 100% funcional
    – JDavid
    Commented el 1 mar. 2017 a las 15:48
  • Tienes razón, el código no funciona... no me percaté. Commented el 1 mar. 2017 a las 15:49
  • Daniel, simplemente adapta las URL's de las imágenes en relación a tu proyecto. Aunque primero puse una porción de código que yo uso y luego puse un código pensado a tus necesidades. Es cuestión de adaptarlo un poco y te funcionará. Edito: Ya lo corregí y ya ser puede apreciar como funcionaría. Commented el 1 mar. 2017 a las 15:52
0

Yo tengo un ejemplo sencillo de cómo hacerlo, espero puedas aplicarlo de la misma manera, si estas utilizando el plugin DataTables de Jquery, y además estas llenando tu tabla de forma dinámica, puedes utilizar .parent() que lo que hace es buscarte la etiqueta padre de donde se encuentre tu icono y hacerle selección a eso, de forma que puedas manipular la etiqueta padre del botón que hiciste click.

Para que entiendas mejor un ejemplo:

$(document).ready(function () {
    $('#listadoNombres').DataTable();
    
$('#listadoNombres tbody').on('click','tr .btnPlus', function (){
  var td = $(this);
  $(td).parent().append('<button class="btn btn-sm btn-dark btnMinus" id="1"><i class="fas fa-minus"></i></button>');
$(td).hide();
});

$('#listadoNombres tbody').on('click','tr .btnMinus', function (){
  var td = $(this);
  $(td).parent().append('<button class="btn btn-sm btn-dark btnPlus" id="1"><i class="fas fa-plus"></i></button>');
$(td).hide();
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.0/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.12.1/datatables.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<h1>TABLA DINAMICA</h1>
<table id="listadoNombres" class="table table-sm table-bordered" style="font-size: 12px;">
  <thead>
    <th>Nombre</th>
    <th>Accion</th>
  </thead>
  <tbody>
     <tr>
         <td>Juan Romano</td>
         <td>
           <button class="btn btn-sm btn-dark btnPlus" id="1">
              <i class="fas fa-plus"></i>
           </button>
         </td>
     </tr>
     <tr>
         <td>Sarai Solano</td>
         <td>
           <button class="btn btn-sm btn-dark btnPlus" id="1">
              <i class="fas fa-plus"></i>
           </button>
         </td>
     </tr>
     <tr>
         <td>Elvis Perez</td>
         <td>
           <button class="btn btn-sm btn-dark btnPlus" id="1">
              <i class="fas fa-plus"></i>
           </button>
         </td>
     </tr>
  </tbody>
</table>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.12.1/datatables.min.js"></script>

Lo que hice es, hacer una seleccion del boton "+" por medio de $('#listadoNombres tbody').on('click','tr .btnPlus', function (){});

Luego extraje el boton en una variable var td = $(this); (eso te puede servir en caso necesites mandar a llamarlo desde otro lado)

Y por ultimo utilizando la variable seleccionamos la etiqueta padre (que en este caso es una etiqueta <td></td>) y sobre esa etiqueta colocamos el boton con el metodo .append()

De modo que quede asi: $(td).parent().append('<button class="btn btn-sm btn-dark btnMinus" id="1"><i class="fas fa-minus"></i></button>');

Y viceversa repites el procedimiento, pero para el botón menos "-". Esto te puede ayudar también por ejemplo si tienes un botón de adjuntar archivo. Cuando se adjunte un archivo, en vez de el botón de adjuntar, te aparecerá otro botón que te mostrara el archivo subido.

Aquí está de forma sencilla de cómo usar el .parent() espero te sirva de base para seguir con tu proyecto.

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.