pasar fila de tabla a otra con jquery

publicado por: Anonymous

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.

solución

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

Respondido por: user9099

Leave a Reply

Your email address will not be published. Required fields are marked *