0

Tengo un problema con el mismo programa que genera, elimina y agrega filas dentro de una tabla, pero lo que quiero hacer es que cuando el usuario no ingrese uno o ningún dato dentro de la tabla me de un alert que diga: "no ha ingresado nombre de la columna por favor ingréselo" y que también no agregue la fila con el campo vacío, lo único que si hace mi programa es que no agregue una fila de más cuando tiene uno ya abierto, espero que entiendan mi problema. les muestro mi código:

$(document).ready(function() {
	
	$('#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 puedo agregar mas de una fila, por favor llene los campos');;
	  });
	  $('#bt_del').click(function() {
	    eliminar();
	  });

	  $('#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();
	}

	
	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]; }
	    });
	    reordenar()
	  }
	}

	function seleccionar(id_fila) {
	  if ($('#' + id_fila).hasClass('seleccionada')) {
	    $('#' + id_fila).removeClass('seleccionada');
	    // borrar también el id del array de filas seleccionadas
	    var existe_el_id = id_fila_selected.indexOf(id_fila); 
	    id_fila_selected.splice(existe_el_id, 1);
	  } else {
	    $('#' + id_fila).addClass('seleccionada');
	    // agregar id sólo si se hizo click
	    id_fila_selected.push(id_fila); 
	  }
	 
	}

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

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

	function eliminarTodasFilas() {
	  $('#tabla tr.selected').each(function() {
	    $(this).remove();
	  });
	}
	
	$(function () {        
		  $("table").on("dblclick", "td",function () {					
		      var OriginalContent = $(this).text();
		      $(this).addClass("cellEditing");
		      $(this).html("<input type='text' value='" + OriginalContent + "' />");
		      $(this).children().first().focus();
		      $(this).children().first().keypress(function (e) {
		          if (e.which == 13) {
		              var newContent = $(this).val();
		              $(this).parent().text(newContent);
		              $(this).parent().removeClass("cellEditing");
		              }
		          });
		      $(this).children().first().blur(function(){
		          $(this).parent().text(OriginalContent);
		          $(this).parent().removeClass("cellEditing");
		          });
		      });
		  });
#content {
  position: absolute;
  min-height: 50%;
  width: 80%;
  top: 20%;
  left: 5%;
}

.selected {
  cursor: pointer;
}

.selected:hover {
  background-color: #0585C0;
}

.seleccionada {
  background-color: #0585C0;
}
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

  <label> Tabla de Ejemplo </label>
  <br>
  <div align="center" style="width:416px;" >
		    <button id="bt_add" class="btn btn-primary">Agregar</button>
			<button id="bt_del" class="btn btn-primary">Eliminar</button>
		    <button id="bt_delall" class="btn btn-primary">Eliminar todo</button>
			 </div>
		    <table id="tabla" style= "position:absolute;top:150px;left:75px" class="table table-bordered">
		       
		    <thead>
		
<thead>
  <tr>
    <th>Nº</th>
    <th>NOMBRE</th>
    <th>AREA</th>
    <th>PUESTO</th>
    <th>EMAIL</th>
  </tr>
</thead>
  </table>
</div>

3
  • Por dios sin animo de ofender, pero me duele ver a gente que diga que es nueva en Javascript y está usando una librería como JQuery. Primero aprender a hacer todo con Javascript puro sin frameworks ni librerías y luego ya metete con JQuery. Es mejor, si no entiendes como funciona cada aspecto del lenguaje es dificil trabajar con un jquery for mucho que facilite ciertas tareas.
    – Lorthas
    el 20 jul. 2017 a las 20:49
  • @Lorthas, tienes razón en tu comentario , pero aun no se diferenciar Jquery y Javascript, ya que esto es prácticamente nuevo para mi, aun así compañero si tienes la posibilidad de ayudarme de antemano te lo agradecería.
    – Reinos Ric
    el 20 jul. 2017 a las 20:55
  • Por favor, ¿alguien que me pueda ayudar?
    – Reinos Ric
    el 20 jul. 2017 a las 21:30

2 respuestas 2

1

Tienes que filtrar que campo está vacio por ejemplo y si esta vacio sacar el error con el campo del nombre y no ejecutar la accion que quieres se ejecute solo si todo está bien. Por ejemplo yo lo he hecho del siguiente modo:

$(document).ready(function() {
	
	$('#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 puedo agregar mas de una fila, por favor llene los campos');;
	  });
	  $('#bt_del').click(function() {
	    eliminar();
	  });

	  $('#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();
	}

	
	function addToTable(e) {
	  if (e.keyCode === 13) {
	    e.preventDefault();
	    const row = e.target.parentNode.parentNode;
	    const inputs = row.querySelectorAll('input');
		console.log(inputs);
	    //const values = [].map.call(inputs, input => input.value);
		const values = [];
		let valido = [].every.call(inputs, input => {
			if (input.value.trim() === "") {
				alert("Inserta el campo "+input.id+". Si no lo ha hecho, ingreselo.");
				return false;
			}
			else {
				values.push(input.value);
				return true;
			}
		});
			
		
		
		if(valido) {
			const tds = row.querySelectorAll('td');
			[].forEach.call(tds, (td, i) => {
			  if (i === 0) { td.textContent = i + 1; }
			  else { td.innerHTML = values[i - 1]; }
			});
			reordenar();
		}
	  }
	}

	function seleccionar(id_fila) {
	  if ($('#' + id_fila).hasClass('seleccionada')) {
	    $('#' + id_fila).removeClass('seleccionada');
	    // borrar también el id del array de filas seleccionadas
	    var existe_el_id = id_fila_selected.indexOf(id_fila); 
	    id_fila_selected.splice(existe_el_id, 1);
	  } else {
	    $('#' + id_fila).addClass('seleccionada');
	    // agregar id sólo si se hizo click
	    id_fila_selected.push(id_fila); 
	  }
	 
	}

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

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

	function eliminarTodasFilas() {
	  $('#tabla tr.selected').each(function() {
	    $(this).remove();
	  });
	}
	
	$(function () {        
		  $("table").on("dblclick", "td",function () {					
		      var OriginalContent = $(this).text();
		      $(this).addClass("cellEditing");
		      $(this).html("<input type='text' value='" + OriginalContent + "' />");
		      $(this).children().first().focus();
		      $(this).children().first().keypress(function (e) {
		          if (e.which == 13) {
		              var newContent = $(this).val();
		              $(this).parent().text(newContent);
		              $(this).parent().removeClass("cellEditing");
		              }
		          });
		      $(this).children().first().blur(function(){
		          $(this).parent().text(OriginalContent);
		          $(this).parent().removeClass("cellEditing");
		          });
		      });
		  });
		#content {
		  position: absolute;
		  min-height: 50%;
		  width: 80%;
		  top: 20%;
		  left: 5%;
		}

		.selected {
		  cursor: pointer;
		}

		.selected:hover {
		  background-color: #0585C0;
		}

		.seleccionada {
		  background-color: #0585C0;
		}
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <label> Tabla de Ejemplo </label>
  <br>
  <div align="center" style="width:416px;" >
		    <button id="bt_add" class="btn btn-primary">Agregar</button>
			<button id="bt_del" class="btn btn-primary">Eliminar</button>
		    <button id="bt_delall" class="btn btn-primary">Eliminar todo</button>
			 </div>
		    <table id="tabla" style= "position:absolute;top:150px;left:75px" class="table table-bordered">
		       
		    <thead>
		
<thead>
  <tr>
    <th>Nº</th>
    <th>NOMBRE</th>
    <th>AREA</th>
    <th>PUESTO</th>
    <th>EMAIL</th>
  </tr>
</thead>
  </table>
</div>

*Esta es la parte importante que debes cambiar.

'el método every lo que hace es que en función de un callback que retorna true o false determina si todos los elementos de un array cumplen uan condicion, en este caso, cuando llega a un cmapo que retorna false por ser un campo vacio, es decir, si el string esta vacío, retorna 'false' y muestra primero el mensaje de error cogiendo el id del campo que ya dice que campo es. Si el valor del campo es correcto según los criterios que tu establezcas, lo añades al array que se va a usar más tarde y retornas 'true'.

Es decir, 'every()' retorna true si todos los valores cumplen una condición que estableces tu o false si alguno de ellos no establece esa condición.

'trim()' quita los primeros y ultimos espacios de uns tring, si metes solo espacios este los quitaría.

Así que, en cuanto el método 'every' retorne un false mediante la condición que quieras, válido es falso.

    const values = [];
    let valido = [].every.call(inputs, input => {
        if (input.value.trim() === "") {
            alert("Inserta el campo "+input.id+". Si no lo ha hecho, ingreselo.");
            return false;
        }
        else {
            values.push(input.value);
            return true;
        }
    });



    if(valido) {
        const tds = row.querySelectorAll('td');
        [].forEach.call(tds, (td, i) => {
          if (i === 0) { td.textContent = i + 1; }
          else { td.innerHTML = values[i - 1]; }
        });
        reordenar();
    }
4
  • Ya había solucionado el problema desde hace media hora, je je je pero de todos modos gracias, publicare como lo solucione
    – Reinos Ric
    el 20 jul. 2017 a las 22:06
  • Si has conseguido arreglarlo por ti mismo, perfecto y enhorabuena :) Puedes tambien publicar una respuesta con tu solución también. Siempre es bueno tener mas de una solución a un mismo problema.
    – Lorthas
    el 20 jul. 2017 a las 22:08
  • Si, de hecho la publique pero deja la edito porque por error de dedo no puse el código que pone los ALERT
    – Reinos Ric
    el 20 jul. 2017 a las 22:10
  • acabo de poner mi solución, espero que lo puedas revisar pero el tuyo me encanto.
    – Reinos Ric
    el 20 jul. 2017 a las 22:32
0

Acabo de solucionar mi problema, esta es mi respuesta:

$(document).ready(function() {

$('#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 puedo agregar mas de una fila, por favor llene los campos');;
  });



  $('#bt_del').click(function() {
    eliminar();
  });

  $('#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();
  
}


function addToTable(e) {
	
  if (e.keyCode === 13) {
    e.preventDefault();
    if($("#nombre").val() == ""){
  		  alert("Ingrese el nombre del usuario");
  		return false;
  	  }else if($("#area").val() == ""){
	 		  alert("Ingrese el nombre de la area");
	 		 return false;
  	  }else if($("#puesto").val() == ""){
	 		  alert("Ingrese el nombre del puesto");
	 		 return false;
  	  }else if($("#email").val() == ""){
	 		  alert("Ingrese su correo electronico");
	 		 return false;
  	  }
    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]; }
    });
    
    reordenar()
  }
}

function seleccionar(id_fila) {
  if ($('#' + id_fila).hasClass('seleccionada')) {
    $('#' + id_fila).removeClass('seleccionada');
  
    var existe_el_id = id_fila_selected.indexOf(id_fila); 
    id_fila_selected.splice(existe_el_id, 1);
  } else {
    $('#' + id_fila).addClass('seleccionada');
  
    id_fila_selected.push(id_fila); 
  }
 
}

function eliminar() {

  for (var i = 0; i < id_fila_selected.length; i++) {
    $('#' + id_fila_selected[i]).remove();
  }
  reordenar();
}

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

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

$(function () {        
	  $("table").on("dblclick", "td",function () {					
	      var OriginalContent = $(this).text();
	      $(this).addClass("cellEditing");
	      $(this).html("<input type='text' value='" + OriginalContent + "' />");
	      $(this).children().first().focus();
	      $(this).children().first().keypress(function (e) {
	          if (e.which == 13) {
	              var newContent = $(this).val();
	              $(this).parent().text(newContent);
	              $(this).parent().removeClass("cellEditing");
	              }
	          });
	      $(this).children().first().blur(function(){
	          $(this).parent().text(OriginalContent);
	          $(this).parent().removeClass("cellEditing");
	          });
	      });
	  });    
#content {
  position: absolute;
  min-height: 50%;
  width: 80%;
  top: 20%;
  left: 5%;
}

.selected {
  cursor: pointer;
}

.selected:hover {
  background-color: #0585C0;
}

.seleccionada {
  background-color: #0585C0;
}
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

  <label> Tabla de Ejemplo </label>
  <br>
  <div align="center" style="width:416px;" >
		    <button id="bt_add" class="btn btn-primary">Agregar</button>
			<button id="bt_del" class="btn btn-primary">Eliminar</button>
		    <button id="bt_delall" class="btn btn-primary">Eliminar todo</button>
			 </div>
		    <table id="tabla" style= "position:absolute;top:150px;left:75px" class="table table-bordered">
		       
		    <thead>
		
<thead>
  <tr>
    <th>Nº</th>
    <th>NOMBRE</th>
    <th>AREA</th>
    <th>PUESTO</th>
    <th>EMAIL</th>
  </tr>
</thead>
  </table>
</div>

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.