I do not add the row in the table by Jquery

Question

I do not add the row in the table by Jquery

Navigation

#1 by (2 votes)

3

I must add rows to a table using Jquery, I have not been able to see the error in the console, the picture shows what I should do after clicking the add button of the modal form:

$(document).ready(function(){
    $("#add").click(function(){
        addRow();
    });
});

//Adiciona una fila con los datos a la tabla
function addRow() { 
    const row = createRow({    
          firstName: $('first-name').val(),
          lastName:  $('last-name').val(),  
          celPhone:  $('mobile-number').val(),
          confirmed: $('confirmed').val()});   
    $('tbody').prepend(row);  
    clean(); 
  } 

//Crea los datos de la fila de la tabla
function createRow(data) {  return (    
       '<tr>' +     
         '<td>${data.firstName}</td>' +    
         '<td>${data.lastName}</td>' +   
         '<td>${data.celphone}</td>' +    
         '<td>${data.confirmed}</td>' +  
       '</tr>'  
      ); 
}

//Limpia los dato que ingresa el usuario
function clean() {
  $('#firstName').val('');
  $('#lasttName').val('');
  $('#celPhone').val('');
  $('#confirmed').val('');
  $('#firstName').focus();
}

action {
  margin-bottom: 20px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Lista de Invitados</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-10 col-sm-offset-1">
        <h1>Lista de Invitados</h1>

        <div class="action text-right">
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#new-guest">Nuevo Invitado</button>
        </div>

        <table class="table bordered-table table-striped">
          <thead>
            <tr>
              <th>Nombre</th>
              <th>Apellido</th>
              <th class="text-center">Celular</th>
              <th class="text-center">Confirmado</th>
            </tr>
          </thead>
          <tbody>
               
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- Modal -->
  <div class="modal fade" id="new-guest" tabindex="-1" role="dialog" aria-labelledby="new-guest">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">Nuevo Invitado</h4>
        </div>
        <form class="form-horizontal">
          <div class="modal-body">
            <div class="form-group">
              <label for="first-name" class="col-sm-3 control-label">Nombre:</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" id="first-name" autofocus>  
              </div>
            </div>
            <div class="form-group">
              <label for="last-name" class="col-sm-3 control-label">Apellido:</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" id="last-name">
              </div>
            </div>
            <div class="form-group">
              <label for="mobile-number" class="col-sm-3 control-label">Celular:</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" id="mobile-number">
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-3 col-sm-8">
                <div class="checkbox">
                  <label>
                    <input type="checkbox" id="confirmed"> Confirmado
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
            <button type="submit" id="add" class="btn btn-primary">Agregar Invitado</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

javascript jquery html5

asked by García Henry 06.05.2018 в 19:03

source

1 answer

Order by not working - PHP .htaccess error when uploading to server

score 2 · Accepted Answer

The problem is basically that when you add the row, the form that is inside the modal is sent. for which the closest solution is to eliminate this label, since it is not necessary for this particular process.

Then you have another error in the function addRow() I assume that you try to get the values of the input , for this you must refer to your id so you need the # .

In the createRow() function when you try to access the phone's value, the letter p is capitalized celPhone . In the function clean() you also have errors when you select the elements and clean their content. For the checkbox you should use .prop('checked', false); for "deschecked".

For the option of check in the table you can use a ternary operator to know if you selected the checkbox .is(':checked') if so, add a span with the class fa fa-check otherwise show nothing (can show a span with another class too)

($('#confirmed').val())?'<span class="fa fa-check"></span>':''

Complete Ejm

$(function() {
   $("#add").click(function(){
      addRow();
  });
});

//Adiciona una fila con los datos a la tabla
function addRow() { 
    const row = createRow({    
          firstName: $('#first-name').val(),
          lastName:  $('#last-name').val(),  
          celPhone:  $('#mobile-number').val(),
          confirmed: ($('#confirmed').is(':checked'))?'<span class="fa fa-check"></span>':''
        });   
    $('tbody').prepend(row);  
    clean(); 
  } 

//Crea los datos de la fila de la tabla
function createRow(data) {  return (    
       '<tr>' +     
         '<td>${data.firstName}</td>' +    
         '<td>${data.lastName}</td>' +   
         '<td>${data.celPhone}</td>' +    
         '<td>${ data.confirmed}</td>' +  
       '</tr>'  
      ); 
}

//Limpia los dato que ingresa el usuario
function clean() {
  $('#first-name').val('');
  $('#last-name').val('');
  $('#mobile-number').val('');
  $('#confirmed').prop('checked', false);
  $('#first-name').focus();
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<div class="container">
    <div class="row">
      <div class="col-sm-10 col-sm-offset-1">
        <h1>Lista de Invitados</h1>

        <div class="action text-right">
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#new-guest">Nuevo Invitado</button>
        </div>

        <table class="table bordered-table table-striped">
          <thead>
            <tr>
              <th>Nombre</th>
              <th>Apellido</th>
              <th class="text-center">Celular</th>
              <th class="text-center">Confirmado</th>
            </tr>
          </thead>
          <tbody>
               
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- Modal -->
  <div class="modal fade" id="new-guest" tabindex="-1" role="dialog" aria-labelledby="new-guest">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">Nuevo Invitado</h4>
        </div>
   
          <div class="modal-body">
            <div class="form-group">
              <label for="first-name" class="col-sm-3 control-label">Nombre:</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" id="first-name" autofocus>  
              </div>
            </div>
            <div class="form-group">
              <label for="last-name" class="col-sm-3 control-label">Apellido:</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" id="last-name">
              </div>
            </div>
            <div class="form-group">
              <label for="mobile-number" class="col-sm-3 control-label">Celular:</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" id="mobile-number">
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-3 col-sm-8">
                <div class="checkbox">
                  <label>
                    <input type="checkbox" id="confirmed"> Confirmado
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
            <button type="submit" id="add" class="btn btn-primary">Agregar Invitado</button>
          </div>
 
      </div>
    </div>
  </div>

If you can not modify the code HTML for various reasons, simply to the previous implementation you should avoid the behavior of submit with the typical e.preventDefault()

$(function() {
   $("#add").click(function(e){
      addRow();
      //Linea adicional con la etiqueta Form
      e.preventDefault();
  });
});