1

vengo aquí con una pregunta algo simple tal vez. Estoy iniciando con el desarrollo web y tenía la duda de como hacer funcionar este código porque al parecer algo está saliendo mal.

Cabe destacar que tengo la librería de jQuery importada al proyecto. El código es el siguiente:

<form role="form" class="form-inline">
<div class="form-group" style="padding-left: 20px;">
    <label for="nomproy" style="padding-right: 10px;">Proyecto </label>
    <input type="text" id="addproy" class="form-control">
    <button style="padding-left: 10px; background-color: transparent; background-repeat: no-repeat; border: none; cursor: pointer; overflow: hidden; outline: none;" class="btn btn-white add">
        <h2><i class="pe-7s-plus"></i></h2>
    </button>
</div>

<!-- HTML Tabla-->
  <div class="table-responsive" style="padding-left: 15px; padding-right: 15px;" id="proytab">
      <table class="table table-striped " id="tab-proy-adm">
           <thead>
              <tr>
              <th>#</th>
              <th>Proyecto</th>
              <th></th>
              </tr>
           </thead>
         <tbody>
         </tbody>   
       </table>
  </div>

Y para la parte del jQuery es:

$('.add').click(function(){
    var table = document.getElementById("tab-proy-adm");
    var nombrep = document.getElementById("addproy").value;
    if (nombrep === "" || nombrep === null){
    swal("", "No hay datos para añadir", "warning");
    return false;
    } else{

    var row = table.insertRow(1);
    var cell0 = row.insertCell(0);
    var cell1 = row.insertCell(1);

    cell0.innerHTML = nombrep;
    cell1.innerHTML = '<input type="button" class="borrar" value="borrar"/>';
    sortTable();
}
}),

$('.borrar').click(function (event) {
    event.preventDefault();
    $(this).closest('tr').remove();
}),



function sortTable() {
    var table, rows, switching, i, x, y, shouldSwitch;
    table = document.getElementById("tab-proy-adm");
    switching = true;

    while (switching) {

    switching = false;
    rows = table.getElementsByTagName("tr");

    for (i = 1; i < (rows.length - 1); i++) {

        shouldSwitch = false;
        x = rows[i].getElementsByTagName("td")[0];
        y = rows[i + 1].getElementsByTagName("td")[0];

        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
            shouldSwitch = true;
            break;
        }
    }
    if (shouldSwitch) {
        rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
        switching = true;
        }
    }
};

Terminando con esta parte, el comentario que añado es que registra el dato pero lo borra al momento sin permitir recuperar la información.

Muchas gracias.

6
  • No me quedó muy claro lo que dices, ¿cual es tu error ? ... Consejo: si estas importando jQuery asegúrate de utilizarlo, para que hacer cosas como esta document.getElementById ? Commented el 11 oct. 2017 a las 21:17
  • 1
    Ese código del form "que has colocado como imagen", colócalo (en vez de una imagen) colócalo como código fuente (así como hiciste con el código javascript). Cuando dices registra el dato pero lo borra al momento sin permitir recuperar la información = ¿a qué te refieres, que la información no se mantiene en pantalla?. Commented el 11 oct. 2017 a las 21:17
  • @CamiloVasquez El problema es que la información que se guarda del form se añade a la tabla pero se elimina al instante.
    – Eliza
    Commented el 11 oct. 2017 a las 21:19
  • @MauricioAriasOlave Sí, digamos que cuando añades información a la tabla por medio de ese input, si se añade en orden pero se borra al mismo tiempo que se añade (tiene un delay como de 1 segundo).
    – Eliza
    Commented el 11 oct. 2017 a las 21:21
  • @Eliza, disculpa, pero no entiendo cuando dices "se borra al mismo tiempo", ¿se borra de la base de datos, de la pantalla? editar tu pregunta aclarando esto ya que los comentarios son temporales. Ah y por cierto, bienvenida a Stack Overflow en Español. Commented el 11 oct. 2017 a las 21:22

1 respuesta 1

0

Tu problema es el botón de tu formulario, si te fijas bien en tu error la página se está recargando al dar click lo que significa que el formulario "se está enviando", tienes dos formas de solucionar esto:

  1. Decirle al botón que es un botón

<button type="button" style="padding-left: 10px; background-color: transparent; background-repeat: no-repeat; border: none; cursor: pointer; overflow: hidden; outline: none;" class="btn btn-white add">
    <h2><i class="pe-7s-plus"></i></h2>
</button>

  1. En la función colocar un preventDefault() para que toda acción predeterminada quede inmediatamente cancelada

$('.add').click(function(e){
    e.preventDefault();
        var table = document.getElementById("tab-proy-adm");
        var nombrep = document.getElementById("addproy").value;
        if (nombrep === "" || nombrep === null){
        swal("", "No hay datos para añadir", "warning");
        return false;
    }else{
        var row = table.insertRow(1);
        var cell0 = row.insertCell(0);
        var cell1 = row.insertCell(1);

        cell0.innerHTML = nombrep;
        cell1.innerHTML = '<input type="button" class="borrar" value="borrar"/>';
        sortTable();
    }
})

Ah otra cosa, las comas que tienes al finalizar las funciones add y borrar quitalas !

0

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.