7

Cada vez que presiono el botón para insertar algo en una tabla que lo hago por javascript y jquery, siempre me recarga la página y no se por qué pasa.

Tengo este código en javascript:

function insertarTabla(size) {
var row = $('<tr>');
for (var i = 0; i < size; i++) {
    row.append($('<td>').html("HOLA Q TAL :v"));
    row.append($('<td>').html("HOLA Q TAL :v"));
    row.append($('<td>').html("HOLA Q TAL :v"));
    row.append($('<td>').html("HOLA Q TAL :v"));
}
$('#myTable').append(row);}  

y este en html:

<html>
<head>
    <script type='text/javascript' src='./js/jquery-3.2.1.js'></script>
    <script id='protec' type='text/javascript' src='./js/menuscript.js'></script>
    <style>
        table, td {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="container">
        <form action="" class="form-inline">
            <div class="form-group col-md-5">
                <label for="fechaIn">Fecha de inicio:</label>
                <input class="form-control" id="fechaIn" type="date">
            </div>
            <div class="form-group col-md-5">
                <label for="fechaFin">Fecha de inicio:</label>
                <input class="form-control" id="fechaFin" type="date">
            </div>
            <button onclick="insertarTabla(1)" class="btn btn-primary" id='send'>Enviar</button>
        </form>
    </div>

    <div id="container">
        <table id="myTable">
            <thead>
                <tr>
                    <td>
                        <b>Numero Transaccion</b>
                    </td>
                    <td>
                        <b>Sede</b>
                    </td>
                    <td>
                        <b>Descripcion Procedimiento</b>
                    </td>
                    <td>
                        <b>Estado</b>
                    </td>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</body>
</html>  
2
  • 1
    Prueba sacando el botón del formulario. Commented el 28 jul. 2017 a las 15:17
  • puedes añadir onsubmit="return false" ejemplo <form onsubmit="return false">
    – Kevin
    Commented el 28 jul. 2017 a las 15:23

1 respuesta 1

6

El type por defecto de los button es submit.

Asignale un type="button" y listo.

El código:

function insertarTabla(size) {
var row = $('<tr>');
for (var i = 0; i < size; i++) {
    row.append($('<td>').html("HOLA Q TAL :v"));
    row.append($('<td>').html("HOLA Q TAL :v"));
    row.append($('<td>').html("HOLA Q TAL :v"));
    row.append($('<td>').html("HOLA Q TAL :v"));
}
$('#myTable').append(row);}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>

    <style>
        table, td {
            border: 1px solid black;
        }
    </style>
    
    <div class="container">
        <form action="" class="form-inline">
            <div class="form-group col-md-5">
                <label for="fechaIn">Fecha de inicio:</label>
                <input class="form-control" id="fechaIn" type="date">
            </div>
            <div class="form-group col-md-5">
                <label for="fechaFin">Fecha de inicio:</label>
                <input class="form-control" id="fechaFin" type="date">
            </div>
            <button onclick="insertarTabla(1)" class="btn btn-primary" id='send' type="button">Enviar</button>
        </form>
    </div>

    <div id="container">
        <table id="myTable">
            <thead>
                <tr>
                    <td>
                        <b>Numero Transaccion</b>
                    </td>
                    <td>
                        <b>Sede</b>
                    </td>
                    <td>
                        <b>Descripcion Procedimiento</b>
                    </td>
                    <td>
                        <b>Estado</b>
                    </td>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

1
  • jajaja entiendo!, gracias por la corrección!
    – DanAlvarez
    Commented el 28 jul. 2017 a las 15:30

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.