1

Buenas, estoy realizando una tabla que muestra el contenido de mi base de datos.

Estoy usando este codigo: Jquery 1.4.2

    $(function() {
   function moveRow(row, targetTable, newLinkText){
       $(row)
           .appendTo(targetTable)
           .find("a")
               .text(newLinkText);
   }

   $("#idfirst a").live("click", function(){
       moveRow($(this).parents("tr"), $("#idsecond"), " Agregar");
   });

   $("#idsecond a").live("click", function(){
       moveRow($(this).parents("tr"), $("#idfirst"), " Eliminar");

   });
});

Y mi tabla:

    <div id="table-wrapper">
        <div id="table-scroll">
            <table id="idsecond" class="table table-bordered table-hover">
                  <thead>
                    <tr>

                        <th>Articulo</th>
                        <th>Unidad M.</th>
                        <th>Valor</th>
                        <th>Categoria</th>
                        <th>P.Unitario</th>
                        <th>Imagen</th>
                        <th>Accion</th>

                    </tr>
                  </thead>
                  <tbody>
                        <?php 
                            if ($result2->num_rows > 0) {

                                while($row = $result2->fetch_assoc()) {

                            echo '<tr><td>'.$row["nombre"].
                            '</td><td>'.$row["unidad_medida"].
                            '</td><td>'.$row["peso"].
                            '</td><td>'.$row["categoria"].
                            '</td><td>S/ '.$row["precio"].
                            '</td><td><img height="100" width="100" src="php/'.$row["imagen"].'" alt="img01" />
                            </td><td>
                            <button type="button" id="idbtnagregar" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-plus" ></i>
                            <a href="#" style="text-decoration:none;color:white;">&nbsp;Agregar</a>
                            </button>
                            </td></tr>';

                                }
                            } else {
                                echo "0 results";
                            }

                            $conn->close();
                        ?>
                  </tbody>
              </table>
        </div>
    </div>

Lo que hace el codigo jquery es pasar datos de una tabla(idsecond) hacia otra tabla(idfirst):

<table id="idfirst" class="table table-bordered table-hover">
// Se agregan de otra tabla
//ademas que se genera el botón de eliminar, para cada fila
</table>

El problema es que yo quiero que el boton de eliminar cambie su background-color cuando es para eliminar, y ademas me agregue una columna con un input text para cada fila.

También me gustaría saber como podría hacer que al ingresar un valor en cada text field, calcule un total(multiplicando lo ingresado en el text field y el precio unitario P.Unitario de cada fila) y se muestre en otra fila. Para posteriormente ingresarlo en mi base de datos.

Alguna idea de como hacerlo? Gracias de antemano.

2
  • Una recomendación, no es la solución a tu problema, pero es mejor que utilizes una version mas nueva de jquery, 1.11 o la 2.1 o incluso la 3.0
    – user9099
    Commented el 21 jun. 2016 a las 12:08
  • lo estoy, y al principio usar varias librerías me generaba conflicto, pero al parecer el fragmento de codigo jquery que uso solo me funciona con esa librería.
    – Raphael
    Commented el 21 jun. 2016 a las 12:16

1 respuesta 1

2

Para cambiar el color de fondo de un botón por jquery, lo puedes hacer de dos maneras:

1- Mediante la propiedad css de Jquery:

$("#idBoton").css( "background-color", "red" );

2- Añadiendo y quitando clases con Jquery

$("#idBoton").addClass( "fondo-rojo" );
$("#idBoton").removeClass( "fondo-rojo" );

Espero que te sirva

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.