1

Soy nuevo en Javascript y estoy haciendo un programa donde en una tabla le puedas agregar filas, escribir sus datos y insertarlos en la tabla misma, lo que deseo que me haga es que cuando ingrese una fila no se ingrese otra fila:

Por ejemplo:

Doy click al botón de "agregar una fila", pero no he agregado ningún dato a esta y al dar click nuevamente en el botón "agregar una fila" me lo impida y me salga un alert que me indique que no se me agregara una fila si no lleno los campos requeridos (Nombre, Área, Puesto y Email)...

Este es mi código JavaScript:

$(document).ready(function() {
  $('#bt_add').click(function() {
    agregar();
  });
  $('#bt_del').click(function() {
    eliminar(id_fila_selected);
  });

  $('#bt_delall').click(function() {
    eliminarTodasFilas();

  });


});
var cont = 0;
var id_fila_selected = [];

function agregar() {
  cont++;
  var fila =

    '<tr class="selected" id="fila' + cont + '" onclick="seleccionar(this.id);"><td>&nbsp;</td>' +

    '<td><input type="text" id="nombre"></td>' +

    '<td><input type="text" id="area"></td>' +

    '<td><input type="text" id="puesto"></td>' +

    '<td><input type="text" id="email" onkeyup="addToTable(event)"></td></tr>';


  $('#tabla').append(fila);
  reordenar();
}

/*
 * Esta función agrega lo ingresado a la tabla
 */
function addToTable(e) {
  if (e.keyCode === 13) {
    e.preventDefault();
    const row = e.target.parentNode.parentNode;
    const inputs = row.querySelectorAll('input');
    const values = [].map.call(inputs, input => input.value);
    const tds = row.querySelectorAll('td');
    [].forEach.call(tds, (td, i) => {
      if (i === 0) { td.textContent = i + 1; }
      else { td.innerHTML = values[i - 1]; }
    });
  }
}

function seleccionar(id_fila) {
  if ($('#' + id_fila).hasClass('seleccionada')) {
    $('#' + id_fila).removeClass('seleccionada');
  } else {
    $('#' + id_fila).addClass('seleccionada');
  }
  //2702id_fila_selected=id_fila;
  id_fila_selected.push(id_fila);
}

function eliminar(id_fila) {
  /*$('#'+id_fila).remove();
  reordenar();*/
  for (var i = 0; i < id_fila.length; i++) {
    $('#' + id_fila[i]).remove();
  }
  reordenar();
}

function reordenar() {
  var num = 1;
  $('#tabla tbody tr').each(function() {
    $(this).find('td').eq(0).text(num);
    num++;
  });
}

function eliminarTodasFilas() {
  $('#tabla tbody tr').each(function() {
    $(this).remove();
  });

}
2
  • ¿Cuál es el problema de tu código?
    – Rubén
    Commented el 18 jul. 2017 a las 22:35
  • Creo que ninguno Rubén, pero no sabe como hacer la validación. Commented el 18 jul. 2017 a las 22:35

3 respuestas 3

2

Puedes agregar una revisión cuando se de click en bt_add

$('#bt_add').click(function() {
  var check = [];
  $("#tabla").find('.selected').find('td').each(function(){
    if($.trim($(this).text()) === "")
      check.push($(this).attr('id'));
  });
  if(check.length === 0)
    agregar();
  else
    alert('No se me agregara una fila si no lleno los campos requeridos (Nombre, Área, Puesto y Email)...');
});

Utilizas un array para ver meter los IDs de los campos que no esten llenos y al final preguntas si el array esta vacío, si está vacío significa que todos los datos están llenos. El problema con este es que revisará todas las filas, ya te encargo la manera de que puedas revisar sólo la última fila, eso ya te toca.

1
  • Hola @ Alberto Siurob, otra pregunta sobre limitar filas, en tu código que agrego para que también me limite a no editar campos de dos filas diferentes, como un ejemplo: tengo dos filas en mi tabla, y en la fila uno abro el campo nombre para editar, pero mientras tengo este campo abierto abro el campo de email de la fila 2 y quiero que me salga un mensaje que diga: "No puede editar campos de filas diferentes"
    – Reinos Ric
    Commented el 27 jul. 2017 a las 15:10
0

Busca en el ultimo TR los input y checa que value no esté vacío

function agregar() {
//....
var valido = true;
$("#tabla").find("tr").last().find("input").each(function(){
    if( this.value == "" ){
        valido = false;
    }
});
if(!valido){
   alert("Se tienen que llenar todos los campos");
   return;
}
cont++;
var fila =......

En tu código vas a tener los ID de los inputs repetidos por cada row, ten cuidado con eso

  var fila =

'<tr class="selected" id="fila' + cont + '" onclick="seleccionar(this.id);"><td>&nbsp;</td>' +

'<td><input type="text" id="nombre"></td>' + //repetiras idnombre

'<td><input type="text" id="area"></td>' + //repetiras area

'<td><input type="text" id="puesto"></td>' + //repetiras puesto

'<td><input type="text" id="email" onkeyup="addToTable(event)"></td></tr>'; //repetiras email
0

Agregar id's únicos para cada input y revisar sólo esos id's.

$(document).ready(function() {
  $('#bt_add').click(function() {
    cont ? agregar() : agregarPrimerFila(); // primera fila (sin esto no funciona)
  });
  $('#bt_del').click(function() {
    eliminar(id_fila_selected);
  });

  $('#bt_delall').click(function() {
    eliminarTodasFilas();

  });


});
var cont = 0;
var id_fila_selected = [];
function agregarPrimerFila(){
    cont = 1;
    var fila = crearFila();
    $('#tabla').append(fila);
    reordenar();
  
}
function crearFila(){
  var tr = '<tr class="selected" id="fila' + cont + '" onclick="seleccionar(this.id);"><td>&nbsp;</td>' +

    '<td><input type="text" id="nombre'+cont+'"></td>' +

    '<td><input type="text" id="area'+cont+'"></td>' +

    '<td><input type="text" id="puesto'+cont+'"></td>' +

    '<td><input type="text" id="email'+cont+'" onkeyup="addToTable(event)"></td></tr>';
    return tr;
}

function agregar() {
//Verificar que estos id's están completos, si quieres puedes separarlos en else if para que se sepa cuál falta
  if ($($("#nombre"+cont)).val() && $($("#area"+cont)).val() && $($("#puesto"+cont)).val() && $($("#email"+cont)).val()){
    cont++;
    var fila = crearFila();
    $('#tabla').append(fila);
    reordenar();
  }
  else 
    alert("Faltan datos por llenar");
}

/*
 * Esta función agrega lo ingresado a la tabla
 */
function addToTable(e) {
  if (e.keyCode === 13) {
    e.preventDefault();
    const row = e.target.parentNode.parentNode;
    const inputs = row.querySelectorAll('input');
    const values = [].map.call(inputs, input => input.value);
    const tds = row.querySelectorAll('td');
    [].forEach.call(tds, (td, i) => {
      if (i === 0) { td.textContent = i + 1; }
      else { td.innerHTML = values[i - 1]; }
    });
  }
}

function seleccionar(id_fila) {
  if ($('#' + id_fila).hasClass('seleccionada')) {
    $('#' + id_fila).removeClass('seleccionada');
  } else {
    $('#' + id_fila).addClass('seleccionada');
  }
  //2702id_fila_selected=id_fila;
  id_fila_selected.push(id_fila);
}

function eliminar(id_fila) {
  /*$('#'+id_fila).remove();
  reordenar();*/
  for (var i = 0; i < id_fila.length; i++) {
    $('#' + id_fila[i]).remove();
  }
  reordenar();
}

function reordenar() {
  var num = 1;
  $('#tabla tbody tr').each(function() {
    $(this).find('td').eq(0).text(num);
    num++;
  });
}

function eliminarTodasFilas() {
  $('#tabla tbody tr').each(function() {
    $(this).remove();
  });
}
<div id="content">
  <label> Tabla de Ejemplo </label>
  <br>
  <button id="bt_add" class="btn btn-default">Agregar</button>
  <button id="bt_del" class="btn btn-default">Eliminar</button>
  <button id="bt_delall" class="btn btn-default">Eliminar todo</button>

  <table id="tabla" class="table table-bordered">
    <thead>
      <tr>
        <td>Nº</td>
        <td>NOMBRE</td>
        <td>AREA</td>
        <td>PUESTO</td>
        <td>EMAIL</td>
      </tr>
    </thead>
  </table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

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.