Autor Tema: boton editar en html  (Leído 4099 veces)

lorck

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 1
    • Ver Perfil
boton editar en html
« en: 03 de Mayo 2019, 04:39 »
hola que tal amigos estoy iniciando en la programación
necesito un poco de ayuda estoy haciendo una calculadora
la cual guarda resultados TIENE UN BOTON EDITAR PERO NO ME FUNCIONA
ESTOY CON HTML Y JS




((((AKI EL HTML ))

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>CALCULADORA</title>
  <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="./js/funciones.js"></script>
  <link rel="stylesheet" type="text/css" href="./css/estilos.css">

</head>
<body>
   <div>
     <section id="contenedor_calculadora" name="contenedor">
        <form id="calculadora">
           <label for="entrada_datos">OPERACION</label>
           <input type="text"  id="entrada_datos">
           <output id="resultado"></output>
           <input type="button" id="guardar" value="Guardar"></input>
        </form>
        
     </section>
     <section id="contenedor_resultados" name="contenedor">
        <table>
           <div class="container">
              <div class="tab tab-1">
                 <table id="consolidado_operaciones" border="">
                    
                       <th>Numero</th>
                        <th>Operación</th>
                      <th>Resultado</th>
                      <th>Editar</th>
                      <th>Eliminar</th>
                  
                </table>
             </div>
          </div>
      </table>
     </section>
   </div>
</body>

</html>




((((JS))))))

$( document ).ready(function() {
   // elementos globales
   $lista_blanca = "1234567890+-*/.()".split("");
   $tabla = $("#consolidado_operaciones");
   $numero = "";
   $operacion = null;
   $resultado = null;
   $editar = "";
   $guardar= $("#guardar");
   $guardar.hide();

   //metodos de triggers

    $( "#entrada_datos" ).keyup(function() {
       $calcular = true;
        validar($(this).val().split(""));
        if($calcular){
           $operacion=$(this).val();
           $resultado=eval($operacion);
           //$("#$resultado").text($resultado);
           $("#resultado").val($resultado);
           $guardar.show();
        }
        else{
           $guardar.hide();

        }
   });

   $( "#guardar" ).click(function() {
       
       $tabla_filas =  $tabla.find("tr");
       $tabla_filas_columnas =  $tabla_filas.find("td");

          $nueva_fila = "<tr><td>"+ $operacion +"</td> <td>"+$resultado+"</td><td><input type='button' id='editar' value='Editar'></input></td><td><input type='button' id='eliminar' value='Eliminar'></input></td>>"

          $nueva_fila= "<tr>";
          $nueva_fila= $nueva_fila+"<td>"+$numero+"</td>";
       $nueva_fila= $nueva_fila+"<td>"+$operacion+"</td>";
       $nueva_fila= $nueva_fila+"<td>"+$resultado+"</td>";
       $nueva_fila= $nueva_fila+"<td><input type='button' value='Editar'></input></td>";
       $nueva_fila= $nueva_fila+"<td><input type='button' value='Eliminar'></input></td>";
       $nueva_fila= $nueva_fila+"</tr>";
          $tabla.append($nueva_fila);

          $( 'input[type="button"]').on("click");

      $( 'input[type="button"]').click(function() {
          
          $tipo_operacion= $( this ).val();
         valores = "";
          if($tipo_operacion=="Editar"){

             valores = $(this).parents("resultado").find("operacion")
             $(this).parents("resultado").find("operacion").each(function(){
                   valores+=$(this).html()+"\n";
               });

               alert(valores)

          }
          else if($tipo_operacion=="Eliminar"){
             event.preventDefault();
             $(this).closest('tr').remove();
          }


       });


   });

});

//metodos propios

function validar($entrada_usuario){
   $.each( $entrada_usuario, function( $indice, $valor ){
       if(jQuery.inArray($valor, $lista_blanca) == -1){
          $("#resultado").text($valor + " NO ES PERMITIDO");
          $calcular=false;
       }
   });
}

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2660
    • Ver Perfil
Re:boton editar en html
« Respuesta #1 en: 04 de Mayo 2019, 11:20 »
Buenas lorck, para pegar código en los foros y para poner títulos adecuados y otras cuestiones mira el hilo https://aprenderaprogramar.com/foros/index.php?topic=1460.0

En el curso https://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206 hay ejemplos de creación de calculadoras. Puedes ver la entrega Función eval JavaScript. getElementsByClassname. Ejemplo código JavaScript calculadora simple (CU01133E)

Este curso es recomendable para adquirir los fundamentos de JavaScript antes de empezar a usar jQuery

Salu2

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".