ABM, búsqueda, ordenamiento por columnas y Selección de una tabla, edición y carga directo sobre celdas o por seudomodal (POR AJAX Y RECARGA)
Aquí todo se explica en el código, pocas cosas que no figuren en los transliterator_transliterate puntos anteriores.

ALGUNOS TIPS:
  • No olvidar el <!DOCTYPE html> si no las dimensiones de $(window) no funcionan correctamente.
  • Linea 145 en adelante, como recorrer una tabla ul-li etc. con find y bucle FOR.
  • Ver el objeto filas (tipo array) que contiene TODAS las filas de la tabla y celdas todas las celdas de cada fila por ej: la celda de la tercera fila y segunda columna sería celdas = $(filas[2]).find("td"); (índice empieza en 0) y luego $(celdas[1]).text(); pero si dentro de la celda tengo por ej una div entonces $(celdas[2]).children("div").text();
  • El secreto es que cada <tr> tenga por id el id del registro y dentro de la fila cada <td> como clase el nombre del campo que va a contener. luego con parents, find y children podemos encontrar cualquier elemento de la tabla sin tener que agregar nada más.
  • El cambio de color de las lineas al pasar sobre los íconos está en la linea comentada 40.
  • Si usamos ordenar entonces los títulos de columna deben estar en <thead> entre <th>y las filas con contenido en <tbody>
  • Si usamos ordenar entonces en cada columna numérica no puede haber nada más que el número entre <td>, o .isnumeric() fallará y los números se ordenan como strings.


						
****************JQUERY******************************************************************************************
<script>
	$(document).ready(function(){
		//centrador
		jQuery.fn.center = function () {
			this.css("position","absolute");
			this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
														$(window).scrollTop()) + "px");
			this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
														$(window).scrollLeft()) + "px");
			return this;
		} 
		//fin centrador	
		//************************EDICIÓN CLIC SOBRE LA CELDA**************************************************************
		
		var id=0;				//declaro acá para que sean globales
		var contenido;				//guarda el contenido de un campo por si no se cambia
		var temp;				//guarda toda la div para reponerla si no se cambia
		var campo;				//guarda el nombre del campo que vamos a editar
		var nuevovalor;				//guarda el valor del input si editamos o no.
		var editando=0;				//flag para saber en el click si salimos de editar

		

		$('body').on('dblclick','.entrada', function(e){//1-usamos esta y no la de abajo porque si no en la segunda 
		//	$('.entrada').on('dblclick', function(e){		dblclick no va a responder porque .entrada no se cargo en el DOM inicial						
			id= $(this).parents('tr').attr('id');   	//2-obtiene el id del <tr> o sea de la fila del clicado
			contenido= $(this).html();					//3-obtiene el contenido de la <div> clicada
			temp = $(this).parent().html();				//4-guarda el html completo de la celda por si no hay cambios
			campo = $(this).parent().attr('class');		//5-obtiene la clase = nombre del campo que contiene el <td class=>
			if(contenido==" "){					// si el contenido es   deja el input limpio si no pone su valor
				var entrada = "<input class='cambio' type='text' value='' />"; // porque si no la database lo pasa a unicode 
			}else{										// y luego falla la igualdad de 8
				var entrada = "<input class='cambio' type='text' value='" + contenido + "' />";
			}
			$(this).parent().html(entrada);				//6-convierto la div en input con contenido igual al valor de la <div> clicada
			$('.cambio').focus();						//7-le da foco al input.
			editando=1;									//8-levanto la flag para indicar que estoy en modo edición.
		});

		$('body').on('keyup','.cambio', function(e){	//8-igual que dblclick pero al oprimir una tecla	
			if (e.keyCode == 27 ) {						//9-si la tecla es ESC (keycode=27)
				$('#'+id).find('.' + campo).html(temp);	//10-vuelve al contenido original.
				editando=0;								//11-indico que terminó la edición
			}else if (e.keyCode == 13 ) {				//12-si la tecla es INTRO (keycode=13)
				nuevovalor = $(this).val();				//13-guardo el valor actual del input
				if (nuevovalor==contenido){				//14 si no cambie el valor
					$('#'+id).find('.' + campo).html(temp);	//15-vuelve al contenido original.
				}else{
					ejecutar(nuevovalor);				//16-si cambió va al AJAX para cambiar la base de datos
				}
				editando=0;								//17-en ambos casos indico fin de edición
			} 
		});

		$('body').on('blur','.cambio', function(e){		//18-igual que dblclick pero al perder foco el input
			nuevovalor = $(this).val();					//19-guardo el valor actual del input (para el click)
		});   

		$('body').on('click', function(e){						//20-igual que dblclick pero al click
			var quien= e.target.nodeName;						//21-detecto en que htlm cliqué
			if (quien != 'INPUT' && editando==1 ){				//22-si cliqué fuera del input y estoy editando 
				if (nuevovalor==contenido || nuevovalor==''){	//23- si no cambie el valor
					$('#'+id).find('.' + campo).html(temp);		//24-vuelve al contenido original si no se cambió nada (en campo=)								
				}else{
					ejecutar(nuevovalor);						//25-si cambió va al AJAX para cambiar la base de datos
				}
				editando=0;
			}
		});


		var ejecutar = function(nuevo){							//Función de EDICIÓN
			$("#sombra").css("height", $(document).height());	// 26-sombra con alto de viewport
			$("#sombra").css("width", $(document).width());		// 27-sombra con ancho de viewport
			$("#sombra").css("visibility","visible");			// 28-sombra visible
			$("#esperando").center();							// 29-centro esperando
			$("#esperando").css("visibility","visible");		// 30-esperando visible
			$.ajax({  
				type: "POST",  
				url: "tec-php-abm-tabla-procesar01.php?accion=ECE",  		//E-ditar CE-lda
				data: 'valor=' + nuevo + '&id=' + id + '&campo=' + campo, 	//31-POSTeo los pares valor/id/campo 
				dataType:'json',
				success: function(data) { 			//32-sustituyo el input por una div con el valor que devuelve procesar
					$('#'+id).find('.' + campo).html("<div class='entrada'>" + data.newvalor + "</div>");
					var genero = $('#'+id).find('.genero').children().html();  	//33-recupero el género actual para la W
					var especie = $('#'+id).find('.especie').children().html();	//34-recupero la especie actual para la W
					var linkwiki= "https://es.wikipedia.org/wiki/" + genero + "_" + especie; //35-por si editamos el genero y/o especie					
					$('#'+id).find('.wiki').children().attr('href',linkwiki);	//36-apuntamos el link a la wiki	 
					$("#sombra").css("visibility","hidden");	// 37-sombra invisible
					$("#esperando").css("visibility","hidden");	// 38-esperando invisible
					},		
				error: function(request,error) { 
					$("#msg").html("ha ocurrido un error al editar la dirección");
					$('#'+id).find('.' + campo).html(temp);		//39-si no se pudo editar repongo div con el valor antiguo
				}
			});    //fin ajax
		};

/****************************************************OPERACIONES SOBRE FILA**************************************************** */ 
		
		
		//************************CAMBIO COLOR DE FILA SEGÚN ÍCONO**************************************************************


		$('body').on('mouseover','.ficha', function(e){					// 40-si estoy sobre ficha
			$(this).parents('tr').css('background-color','#a4cce9');	// 41- color de fondo del ícono a toda la fila (tr)
			$(this).parents('tr').css('color','black');					// 42- letras negras
		});    // fin mouseover

		$('body').on('mouseover','.edicion', function(e){				// idem
			$(this).parents('tr').css('background-color','#bbbbbb');
			$(this).parents('tr').css('color','black');
		});    // fin mouseover

		$('body').on('mouseover','.borrar', function(e){				// idem
			$(this).parents('tr').css('background-color','#ee939c');
			$(this).parents('tr').css('color','black');
		});    // fin mouseover

		$('body').on('mouseout','.ficha,.edicion,.borrar', function(e){	//43- al salir de cualquiera de los tres
			$(this).parents('tr').css('background-color','white');		//44-repongo fondo
			$(this).parents('tr').css('color','#555555');				// 45-repongo color de letras
		});    // fin mouseout

		var tipoajax;       //46-global para verlas en las distintas funciones.
		
		/************************NUEVO REGISTRO **************************************************************/
		
		// El form es común a editar


		$('#nuevo').on('click', function(e){
			tipoajax='nuevo';							//47-para que GUARDAR sepa a donde mandar del script
			$("#idbloque").css('display','none');		//48- no necesito id, lo oculto 
			$("#fichar").css('display','none');			//49-no lo necesito botón para ficha, lo oculto        
			$("#idcaja").val('');						//50-pongo en blanco todos los campos					
			$("#familia").val('');
			$("#genero").val('');
			$("#especie").val('');
			$("#nombre1").val('');
			$("#nombre2").val('');
			$("#lugar").val('');
			$("#habitat").val('');
			$("#ciclo").val('');
			$("#observaciones").val('');

			$("#wikilink").css('visibility','hidden');			//51-lo invisibilizo hasta que se complete especie y género

			$("#sombra").css("height", $(document).height());	// 52-sombra con alto de viewport
			$("#sombra").css("width", $(document).width());		// 53-sombra con ancho de viewport
			$("#sombra").css("visibility","visible");			// 54-sombra visible
			$("#caja").center();								// 55- centro el form
			$("#caja").css("display","block");					// 56-muestro el form
		});
		
		//		para que se active W solo si hay texto en género y especie				
		
		$('body').on('blur','#especie,#genero', function(e){		//57-para activar W una vez cargado género y especie  
			nuevoespecie = $('#especie').val();						//58-guardo el valor del input especie
			nuevogenero = $('#genero').val();						//59-guardo el valor del input especie
			if(nuevoespecie.length!=0 && nuevogenero.length!=0){	//60-si está genero y especie
				var linkwiki= "https://es.wikipedia.org/wiki/" + nuevogenero + "_" + nuevoespecie;
				$("#wikilink").attr('href',linkwiki);				//61-apuntamos el link a la wiki
				$("#wikilink").css('visibility','visible');			//62-visibilizamos el link
			}else{
				$("#wikilink").css('visibility','hidden');			//63-si no tiene genero y especie  lo invisibilizamos
			}
		});   
		
		
		
		$('#cancelar').on('click', function(e){						// 64- si cancelo nuevo o editar
			$("#caja").css("display","none");						// 65- oculto el form
			$("#sombra").css("visibility","hidden");				// 66- oculto la sombra
		});

		
		
		$('#guardar').on('click', function(e){ 
			var idcaja = $("#idcaja").val();				// 67- recupero los valores ingresados en el form
			var familia = $("#familia").val();				// idem....
			var genero = $("#genero").val();
			var especie = $("#especie").val();
			var nombre1 = $("#nombre1").val();
			var nombre2 = $("#nombre2").val();
			var lugar = $("#lugar").val();
			var habitat = $("#habitat").val();
			var ciclo = $("#ciclo").val();
			var observaciones = $("#observaciones").val();
			if(tipoajax=='nuevo'){ 							//67 bis indico a guardar que es un registro nuevo (puse tipoajax en botón
															// guardar)
				$.ajax({  
					type: "POST",  
					url:"tec-php-abm-tabla-procesar01.php?accion=NRE",     //N-uevo RE-gistro
					data: 'tipoajax' + tipoajax + '&familia=' + familia + '&genero=' + genero + '&especie=' + especie + '&nombre1=' + nombre1 + '&nombre2=' + nombre2 + '&lugar=' + lugar + '&habitat=' + habitat + '&ciclo=' + ciclo + '&observaciones=' + observaciones, 	//28-POSTeo los pares valor/id/campo 
					dataType:'json',
					success: function(data) { 					
						if(data.id=='nulo'){		// 68- el script devuelve nulo si ya cargamos el Genero especie
							$("#msg_caja").html("La especie ya está en la base de datos");
						}else{
							var wiki = "https://es.wikipedia.org/wiki/"+ data.genero + "_" + data.especie;
							var salida = "<tr tabindex='0' id='" + data.id + "'>";	// 69- armamos la fila nueva a insertar
							salida += "<td class='filaid'>" + data.id + "<span class='ciclo' style='display:none'>" + data.ciclo +  "</span></td>";
							salida += "<td class='wiki'><a class='wlink' href='"+ wiki + "' target='_blank'><i class='fa fa-wikipedia-w' aria-hidden='true'></i></a></td>";
							salida += "<td class='familia'> <div class='entrada'>" + data.familia + "</div></td>";
							salida += "<td class='genero'> <div class='entrada'>" + data.genero + "</div></td>";
							salida += "<td class='especie'> <div class='entrada'>" + data.especie + "</div></td>";
							salida += "<td class='nombre1'> <div class='entrada'>" + data.nombre1 + "</div></td>";
							salida += "<td class='nombre2'> <div class='entrada'>" + data.nombre2 + "</div></td>";
							salida += "<td class='lugar'> <div class='entrada'>" + data.lugar + "</div></td>";
							salida += "<td class='habitat'> <div class='entrada'>" + data.habitat + "</div></td>";
							salida += "<td class='observaciones'> <div class='entrada'>" + data.observaciones + "</div></td>";
							salida += "<td class='ficha' ><a href='javascript:void(0)'><i class='fa fa-eye' aria-hidden='true' style='color:darkcyan;'></i></a></td>"
							salida += "<td class='edicion'><a href='javascript:void(0)'><i class='fa fa-pencil' aria-hidden='true'></i></a></td>";
							salida += "<td class='borrar'><a href='javascript:void(0)'><i class='fa fa-minus-circle fa-lg' aria-hidden='true' style='color:red;'></i></a></td>";
							salida += "</tr>";
							$("#tabla").append(salida);				 	// 70- agregamos el <tr> generado al final de la tabla
							$('#'+ data.id).focus();					// 71- le damos foco para que se vea
							$("#caja").css("display","none");			// 72- oculto form
							$("#sombra").css("visibility","hidden");	// 73- oculto sombra
						}
						},
					error: function(request,error) { 
						$("#msg").html("ha ocurrido un error al cargar el nuevo registro");
						$("#caja").css("display","none");			// idem si hay error
						$("#sombra").css("visibility","hidden");	// idem si hay error
					}
				});    //fin ajax
			}else{														// 74- si no es guardar tipoajax es editar
				$.ajax({  
					type: "POST",  
					url: "tec-php-abm-tabla-procesar01.php?accion=ERE",  //E-ditar RE-gistro +
					data: 'idcaja=' + idcaja + '&familia=' + familia + '&genero=' + genero + '&especie=' + especie + '&nombre1=' + nombre1 + '&nombre2=' + nombre2 + '&lugar=' + lugar + '&habitat=' + habitat + '&ciclo=' + ciclo + '&observaciones=' + observaciones, 	//28-POSTeo los pares valor/id/campo 
					dataType:'json',
					success: function(data) { 						
						if(data.id=='nulo'){							// 75- si el script devuelve nulo es que no pudo hacer el UPDATE
						$("#msg_caja").html("El registro no pudo editarse");
						}else{											// 76- si no, cambiamos el contenido de las div por el retorno de AJAX
							$('#'+idcaja).find('.familia').children().html(data.familia);	//77- ('#'+idcaja) es el <tr> porque
							$('#'+idcaja).find('.genero').children().html(data.genero);		// idcaja es el id del form que
							$('#'+idcaja).find('.especie').children().html(data.especie);	// pasamos de la fila donde clicamos
							$('#'+idcaja).find('.nombre1').children().html(data.nombre1);	// editar, ('.campo') es el <td> y
							$('#'+idcaja).find('.nombre2').children().html(data.nombre2);	//.children la <div> dentro del <td>
							$('#'+idcaja).find('.lugar').children().html(data.lugar);		// donde va el texto data.campo
							$('#'+idcaja).find('.habitat').children().html(data.habitat);
							$('#'+idcaja).find('.ciclo').html(data.ciclo);
							$('#'+idcaja).find('.observaciones').children().html(data.observaciones);
							$('#'+ idcaja).focus();											// 78- foco a la fila editada
							$("#caja").css("display","none");								// 79- oculto form
							$("#sombra").css("visibility","hidden");						// 80- oculto sombra
						}
					},		
					error: function(request,error) { 
						$("#msg").html("ha ocurrido un error al editar el registro N°: " + id);
						$("#caja").css("display","none");								// 81- oculto form
						$("#sombra").css("visibility","hidden");						// 82- oculto sombra
					}
				});    //fin ajax	
			} // fin del else
		});

		
		
		
		
		/************************BORRAR REGISTRO **************************************************************/

		$('body').on('click','.borrar', function(e){
			id= $(this).parents('tr').attr('id');   	// 83-obtiene el id del <tr> o sea de la fila del clicado para borrar
			var genero = $('#'+id).find('.genero').children().html(); 	//84- obtengo género como en 77
			var especie= $('#'+id).find('.especie').children().html();	//85- idem especie
			var condicion = "Está seguro de borrar: \n "+ genero + " " + especie + "\n ¡ESTA OPERACIÓN NO PUEDE DESHACERSE!";
			if (confirm(condicion)){									//86- si confirmo
				$.ajax({  
					type: "POST",  
					url: "tec-php-abm-tabla-procesar01.php?accion=BRE",	//B-orrar RE-gistro
					data: 'id=' + id, 									//87-POSTeo el par id/valor 
					dataType:'json',
					success: function(data) { 						
						if(data.id=='nulo'){							//88- si el script devuelve nulo es error de borrado
							$("#msg_caja").html("El registro no pudo borrarse");
						}else{
							$('#'+ data.id).remove();					//89 si fue exitoso remuevo el <tr>
							$("#msg").html("El registro de id N°: " + id + " ha sido eliminado definitivamente");
						}
					},		
					error: function(request,error) { 
						$("#msg").html("ha ocurrido un error al borrar el registro N°: " + id);
					}
				});    //fin ajax	
			}   //fin if confirm 
		});   //fin borrar


		/************************EDITAR REGISTRO **************************************************************/
				


		$('body').on('click','.edicion', function(e){
			tipoajax='edicion';											//90-para que GUARDAR sepa a donde mandar del script
			id= $(this).parents('tr').attr('id');   					// 91-obtiene el id del <tr> o sea de la fila del clicado
			var familia = $('#'+id).find('.familia').children().html();	// 92-obtengo los valores de los campos de la fila
			var genero = $('#'+id).find('.genero').children().html();	// .familia es el <td> children, el <div> (como 77)
			var especie = $('#'+id).find('.especie').children().html();	//idem....
			var nombre1 = $('#'+id).find('.nombre1').children().html();
			var nombre2 = $('#'+id).find('.nombre2').children().html();
			var lugar = $('#'+id).find('.lugar').children().html();
			var habitat = $('#'+id).find('.habitat').children().html();
			var ciclo = $('#'+id).find('.ciclo').html();
			var observaciones = $('#'+id).find('.observaciones').children().html();
			if(familia==" "){      					//93-borramos los   que se pusieron para la edición por celda
				familia="";									// solo en caso de que estén aparentemente en blanco.										
			}
			if(genero==" "){
				genero="";
			}
			if(especie==" "){
				especie="";
			}
			if(nombre1==" "){
				nombre1="";
			}
			if(nombre2==" "){
				nombre2="";
			}
			if(lugar==" "){
				lugar="";
			}
			if(habitat==" "){
				habitat="";
			}
			if(ciclo==" "){
				ciclo="";
			}
			if(observaciones==" "){
				observaciones="";
			}
			$("#idbloque").css('display','block');		//94-lo muestro por si se hizo un NUEVO que lo invisibilizó
			$("#fichar").css('display','block');		//95-lo muestro por si se hizo un NUEVO que lo invisibilizó
			$("#idcaja").val(id);						//96- cargo los input del form con los valores obtenidos de la fila en 
			$("#familia").val(familia);					// 91 y adelante
			$("#genero").val(genero);
			$("#especie").val(especie);
			$("#nombre1").val(nombre1);
			$("#nombre2").val(nombre2);
			$("#lugar").val(lugar);
			$("#habitat").val(habitat);
			$("#ciclo").val(ciclo);
			$("#observaciones").val(observaciones);
			var linkwiki= "https://es.wikipedia.org/wiki/" + genero + "_" + especie;
			$("#wikilink").attr('href',linkwiki);				// 97- apunto la href de la wiki
			$("#wikilink").css('visibility','visible');			//98-porque lo invisibilizamos en nuevo
			$("#sombra").css("height", $(document).height());	//99-sombra con alto de viewport
			$("#sombra").css("width", $(document).width());		//100- sombra con ancho de viewport
			$("#sombra").css("visibility","visible");			//101- sombra visible
			$("#caja").center();								//102- centro form
			$("#caja").css("display","block");					//103- muestro form

		});   //fin edicion

		/***********************OPERACIONES CON LAS FICHAS****************************************************** */

		
		//************************NUEVA FICHA**************************************************************
		
		
		$('body').on('click','#fichar', function(e){
			$("#cajaficha").center();									// 104- centro form ficha
			$("#cajaficha").css("display","block");						// 105-muestro form ficha ( sombra ya está desplegada)
			var idficha = $("#idcaja").val();							// 106- recupero id de form 
			$("#idcajaficha").val(idficha);								// 107- lo cargo en form ficha
			$("#cicloficha").html($("#ciclo").val());					// 108- cargo el ciclo
			$.ajax({  
					type: "POST",  
					url: "tec-php-abm-tabla-procesar01.php?accion=CFI",	//C-argar FI-cha
					data: 'idficha=' + idficha, 						//109-POSTeo el id para cargar data de la ficha Db 
					dataType:'json',
					success: function(data) { 							//110-recupero por script los campos que faltan					
						$("#planta").val(data.genero + ' ' + data.especie);	//111- cargo Género y especie (readonly)
						$("#color").val(data.color);					// 112- cargo los input con losvalores devueltos					
						$("#altura").val(data.altura);					// idem...
						$("#distancia").val(data.distancia);
						$("#siembra").val(data.siembra);
						$("#tipo_siembra").val(data.tipo_siembra);
						$("#ubicacion").val(data.ubicacion);
						$("#suelo").val(data.suelo);
						$("#riego").val(data.riego);
						$("#peso").val(data.peso);
						$("#comentarios").val(data.comentarios);
					},
					error: function(request,error) { 
						$("#msg").html("ha ocurrido un error al cargar la ficha");
					}
				});    //fin ajax	




			//++++++++++++++++++++++++++++++++++++++++++

		});   //fin ficha	

		$('body').on('click','#cancelarficha', function(e){
			$("#cajaficha").css("display","none");					// 113-hago desaparecer el form ficha
			$("#caja").css("display","none");						// 114-hago desaparecer el form editar
			$(".valficha").val('');									// 115-borro el contenido de los inputs
			$("#sombra").css("visibility","hidden");				// 116-quito la sombra
		});   //fin cancelar ficha


		//************************EDITAR FICHA**************************************************************
		
		
		
		$('body').on('click','#guardarficha', function(e){
			var idficha = $("#idcaja").val();						// 117- recupero de los inputs los valores editados
			var color = $("#color").val();							// idem.....
			var altura = $("#altura").val();
			var distancia = $("#distancia").val();
			var siembra = $("#siembra").val();
			var tipo_siembra = $("#tipo_siembra").val();
			var ubicacion = $("#ubicacion").val();
			var suelo = $("#suelo").val();
			var riego = $("#riego").val();
			var peso = $("#peso").val();
			var comentarios = $("#comentarios").val();
			$.ajax({  
					type: "POST",  
					url: "tec-php-abm-tabla-procesar01.php?accion=EFI",		//E-ditar FI-cha
					//data: 'idficha=' + idficha, 							//118-POSTeo el id para editar data de la ficha Db 
					data: 'idficha=' + idficha + '&color=' + color + '&altura=' + altura + '&distancia=' + distancia + '&siembra=' + siembra + '&tipo_siembra=' + tipo_siembra + '&ubicacion=' + ubicacion + '&suelo=' + suelo + '&riego=' + riego + '&peso=' + peso + '&comentarios=' + comentarios, 	//28-POSTeo los pares valor/id/campo 
					dataType:'json',
					success: function(data) { 						
						if(data.resultado=='exito'){						//119- mensaje de éxito o error en UPDATE
							$("#msg").html("La ficha " + idficha + "  se editó con éxito");
						}else{
							$("#msg").html("La ficha " + idficha + " NO SE PUDO EDITAR");
						}
						$("#cajaficha").css("display","none");				// 120-hago desaparecer el form ficha
						$("#caja").css("display","none");					// 121-hago desaparecer el form editar
						$(".valficha").val('');								// 122-borro el contenido de los inputs
						$("#sombra").css("visibility","hidden");			// 123-quito la sombra
					},
					error: function(request,error) { 
						$("#msg").html("ha ocurrido un error al editar la ficha");
					}
				});    //fin ajax	


		});   //fin guardarficha

			// **********************VER FICHA **********************************************************

			$('body').on('click','.ficha', function(e){
				$("#sombra").css("height", $(document).height());			// 124-sombra con alto de viewport
				$("#sombra").css("width", $(document).width());				// 125-sombra con ancho de viewport
				$("#sombra").css("visibility","visible");					// 126-sombra visible
				$("#muestraficha").center();								// 127-centro verficha
				$("#muestraficha").css("display","block");					// 128-muestro verficha
				var id= $(this).parents('tr').attr('id');   				// 129-obtiene el id del <tr> es la fila del clicado
				var genero = $('#'+id).find('.genero').children().html();	// 130-recuperogenero especie y nombre de la fila 
				var especie = $('#'+id).find('.especie').children().html();	// como en 77
				var nombre1 = $('#'+id).find('.nombre1').children().html();
				$("#fnombre1").html(nombre1);								// 131- los escribo en el form
				$("#fgenero").html(genero);									// idem...
				$("#fespecie").html(especie);
				$.ajax({  
					type: "POST",  
					url: "tec-php-abm-tabla-procesar01.php?accion=CFI",		//C-argar FI-cha
					data: 'idficha=' + id, 									//132-POSTeo el id para cargar data de la ficha Db 
					dataType:'json',
					success: function(data) { 						
						$("#fciclo").html(data.ciclo);						//133- lleno las celdas de la tabla con los valores
						$("#fcolor").html(data.color);						// devueltos por JSON
						$("#faltura").html(data.altura);
						$("#fdistancia").html(data.distancia);
						$("#fsiembra").html(data.siembra);
						$("#ftipo_siembra").html(data.tipo_siembra);
						$("#fubicacion").html(data.ubicacion);
						$("#fsuelo").html(data.suelo);
						$("#friego").html(data.riego);
						$("#fpeso").html(data.peso);
						$("#fcomentarios").html(data.comentarios);
					},
					error: function(request,error) { 
						$("#msg").html("ha ocurrido un error al cargar la ficha");
					}
				});    //fin ajax	

			});

			$('body').on('click','#salirficha', function(e){
				$("#muestraficha").css("display","none");				// 134-hago desaparecer el form ficha
				$("#sombra").css("visibility","hidden");				// 136- quito la sombra
		});   //fin salir ficha

		//**************************************************************BUSQUEDA*************************************
	
				//************************ACTIVAR FILA DE BÚSQUEDA*************************************
		
		
		$('body').on('click','#activobuscar', function(e){
			if ($(this).val()=='ACTIVAR BUSCAR'){						// 135- si activo busqueda
				$("#tbuscar").css("display","table-row");				// 136- fila buscar se hace visible (table-row NO block)
				$(this).val('DESACTIVAR BUSCAR');						// 137- cambio botón
			}else{
				$("#tbuscar").css("display","none");					// 138- si desactivo
				$(this).val('ACTIVAR BUSCAR');							// 139- cambio botón
				vertodo();												// 140-limpia los input y muestra todas las filas
			}
		});   //fin activobuscar
	
			//************************EJECUTAR LA BÚSQUEDA*************************************
		
		
		$('body').on('click','#buscar1,#buscar2', function(e){			// 141-click en cualquiera de las dos lupas
			var bfamilia = $('#tbuscar').find('#bfamilia').val();		// 142-recupero valor de INPUT familia
			var bgenero = $('#tbuscar').find('#bgenero').val();			// idem...
			var bespecie = $('#tbuscar').find('#bespecie').val();		
			var bnombre1 = $('#tbuscar').find('#bnombre1').val();
			var bnombre2 = $('#tbuscar').find('#bnombre2').val();
			var blugar = $('#tbuscar').find('#blugar').val();
			var bhabitat = $('#tbuscar').find('#bhabitat').val();
			var bobservaciones = $('#tbuscar').find('#bobservaciones').val();

			var flag0 = false;											// 143-asumimos por defecto que no hay nada para buscar
			if(bfamilia.length!=0 || bgenero.length !=0 || bespecie.length !=0 || bnombre1.length !=0 || bnombre2.length !=0|| blugar.length !=0|| bhabitat.length !=0|| bobservaciones.length !=0){
				flag0 = true;											// 144-si algun imput tiene contenido va true
			}
			var filas = $("#tabla tbody").find("tr");							//145- devuelve todas las filas de la tabla
			if(flag0){													// 146-si escribi algo en algún input de la búsqueda
				for(i=1; i<filas.length; i++){							//147-arranco en 2, porque fila 0 títulos, fila 1 buscar
					var celdas = $(filas[i]).find("td");				//148- devuelve todas las celdas de la fila i
					var cfamilia = $(celdas[2]).children("div").text();	//149- celda[2] td familia, children la div con el texto
					var cgenero = $(celdas[3]).children("div").text();	// idem...
					var cespecie = $(celdas[4]).children("div").text();
					var cnombre1 = $(celdas[5]).children("div").text();
					var cnombre2 = $(celdas[6]).children("div").text();
					var clugar = $(celdas[7]).children("div").text();
					var chabitat = $(celdas[8]).children("div").text();
					var cobservaciones = $(celdas[9]).children("div").text();
					var flagfamilia = cfamilia.includes(bfamilia) && bfamilia.length!=0;	//150- chequea si está lo buscado
					var flaggenero = cgenero.includes(bgenero) && bgenero.length!=0;		// y es distinto a vacío (largo !=0)
					var flagespecie = cespecie.includes(bespecie) && bespecie.length!=0;	// si es true lo carga en flagcampo
					var flagnombre1 = cnombre1.includes(bnombre1) && bnombre1.length!=0;
					var flagnombre2 = cnombre2.includes(bnombre2) && bnombre2.length!=0;
					var flaglugar = clugar.includes(blugar) && blugar.length!=0;
					var flaghabitat = chabitat.includes(bhabitat) && bhabitat.length!=0;
					var flagobservaciones = cobservaciones.includes(bobservaciones) && bobservaciones.length!=0;
					if(flagfamilia || flaggenero || flagespecie || flagnombre1 || flagnombre2 || flaglugar || flaghabitat || flagobservaciones){									
						$(filas[i]).css('display','table-row');	//151- si es true muestra la fila
					}else{
						$(filas[i]).css('display','none');		//152- si FALSE no la muestra
					}	//fin if cfamilia
				} //fin for 
			}else{
				vertodo();										//153- si todos los input de busqueda vacíos, vertodo 
			}   //fin if flag0
		
		}); //fin click buscar
				
		
			//************************BORRAR LA BÚSQUEDA*************************************
		
		$('body').on('click','#borrarbusqueda,#borrarbusqueda1', function(e){
			vertodo();											//154-limpia los input y muestra todas las filas
		}); //fin click borrarbusqueda							  sea gomita izq. o derecha clicada

		var vertodo = function(){	
			$('#bfamilia').val('');								// 155- en blanco toda la ficha
			$("#bgenero").val('');
			$("#bespecie").val('');
			$("#bnombre1").val('');
			$("#bnombre2").val('');
			$("#blugar").val('');
			$("#bhabitat").val('');
			$("#bobservaciones").val('');
			$('.volveraver').css('display','table-row');		// 156- muestro nuevamente todas las filas 
		}														// con data (class=volveraver)

			//************************ORDENAR LAS FILAS*************************************

			$('th').click(function() {								// 157 al clicar sobre la cabecera de cualquier columna				
				//$("#prueba").html('*' + contenido + '*' + contenido.length);
				if($(this).html().length !=0){						//157 bis si la celda está en blanco, no hago nada
					var table = $(this).parents('table').eq(0);		// 158 busca la tabla a la cual pertenece la columna
																	// .eq(0) selecciona el primer elemento del set.
					var rows = table.find('tr').slice(2).toArray(); // 159 Busca el primer tr, corta en el 2° (slice(2) lo incluye, 
																	// y convierte en array (saltea el 1°, es el de búsqueda) 
					var columna = $(this).index();					// 160 recupero el índice de la columna (empieza en cero)
					rows.sort(comparador(columna));					// 161 sort ordena el array usando la funcion comparador. 
					this.asc = !this.asc							// 162 al principio this.asc es undefined no está ordenada							
																	// así que lo niego !undefined = true . 
					if (!this.asc) {								// 163 la primera vez es !true no se efectua.
						rows = rows.reverse()						// 164 si es !false invierte el orden del array
					}
					for (var i = 0; i < rows.length; i++) {			// 165 el bucle agrega desde 0 a la última las filas ordenadas
						table.append(rows[i]);
					}
					CambiaIcono($(this), this.asc);						// 166 coloca o cambia el ícono de orden y el color del head.
				}
			})


  			function comparador(col) {							// 167 función comparador de .sort pasa el índice de columna							
    			return function(a, b) {
				  var valA = $(a).children('td').eq(col).html();// 168 Mete el valor de la celda (fila superior, columna)
				  var valB = $(b).children('td').eq(col).html();// 169 Mete el valor de la celda (fila inferior, columna)
				  if ($.isNumeric(valA) && $.isNumeric(valB)){	// 170 si ambos valores son numéricos
						return valA - valB;						// 171 los resta
				  }else{
						return valA.localeCompare(valB);		// 172 si no compara los strings con el abecedario local.
				  }
   				}
 	 		}

			function CambiaIcono(rotulo, orden) {					
				$("th").each(function(index) {					// 173 para todas las celdas cabecera quita color y flechas
					$(this).removeClass("sorting");				
					$(this).removeClass("asc");
					$(this).removeClass("desc");
				});
				rotulo.addClass("sorting");						// 174 a la celda clicada le da anaranjado.
				if (orden){										// 175 orden = this.asc true si es ascendente
					rotulo.addClass("asc");						// 176 clase con :after flecha arriba
				}else{ 
					rotulo.addClass("desc");					// 177 clase con :after flecha abajo
				}
			}

	}); //fin ready
	</script>
	******************************* CSS OBLIGATORIO PARA ORDENAR *************************************
	table tr th {
  			cursor: pointer;
		}
		.sorting {
			color:orangered;
		}
		.asc:after {
			content: ' ↑';
		}
		.desc:after {
			content: " ↓";
		}    

	******************************* CSS PARA DARLE ESTILO A LA TABLA  ********************************
	table{
			border-collapse: collapse;
			font-size: .8rem;
		}
		td{
			border: #000 solid 1px;
			margin: 0px;
			padding: 5px;
			padding-bottom:3px;
			padding-top:3px;
		}

		/* si queremos los títulos tb con borde repetir css de td en th */

	******************************* HTML Y PHP DE LA TABLA ********************************************
	<table id="tabla">
			  	<thead>
					<tr>
						<th style="width: 15px;">ID</th>
						<th style="width: 15px;"></th>
						<th style="width: 100px;">FAMILIA</th>
						<th style="width: 80px;">GÉNERO</th>
						<th style="width: 80px;">ESPECIE</th>
						<th style="width: 140px;">NOMBRE 1</th>
						<th style="width: 130px;">NOMBRE 2</th>
						<th style="width: 60px;">LUGAR</th>
						<th style="width: 180px;">HABITAT</th>
						<th style="width: 140px;">OBSERVACIONES</th>
						<th style="width: 15px;"></th>
						<th style="width: 15px;"></th>
						<th style="width: 15px;"></th>
					</tr>
				</thead>
				<tbody>
				<!-- INICIO Fila para la búsqueda-->
			<tr id="tbuscar" style="height: 20px; display:none;">
					<td><i id="borrarbusqueda" class="fa fa-eraser" aria-hidden="true"></i></td>
					<td><i id="buscar1" class="fa fa-search" aria-hidden="true"></i></td>
					<td><input id="bfamilia" class='buscar' type='text' value='' /></td>
					<td><input id="bgenero" class='buscar' type='text' value='' /></td>
					<td><input id="bespecie" class='buscar' type='text' value='' /></td>
					<td><input id="bnombre1" class='buscar' type='text' value='' /></td>
					<td><input id="bnombre2" class='buscar' type='text' value='' /></td>
					<td><input id="blugar" class='buscar' type='text' value='' /></td>
					<td><input id="bhabitat" class='buscar' type='text' value='' /></td>
					<td><input id="bobservaciones" class='buscar' type='text' value='' /></td>
					<td> </i></td>    
					<td><i id="buscar2" class="fa fa-search" aria-hidden="true"></i></td>
					<td><i id="borrarbusqueda1" class="fa fa-eraser" aria-hidden="true"></i></td>
				</tr>    
				<!-- FIN Fila para la búsqueda-->				
				<?php 
				if(conectar()){
					mysqli_set_charset($conn, "utf8mb4");
					$sqltxt = "SELECT * FROM plantas";
					$sqldevolucion = mysqli_query($conn,$sqltxt);
					if (!mysqli_num_rows($sqldevolucion)) {
						echo("Error, no se devuelven registros");
					} else {
						while ($registro = mysqli_fetch_array($sqldevolucion, MYSQLI_ASSOC)){ 
							echo("<tr class='volveraver' id='" . $registro["id"] . "'>");
								//echo("<td class='filaid'>" . $registro["id"] . " <span class='ciclo' style='display:none'>". $registro["ciclo"] .  "</span></td>" );
								echo("<td class='filaid'>" . $registro["id"] . "</td>" );
								$wiki="https://es.wikipedia.org/wiki/". $registro["genero"] . "_" .$registro["especie"];
								echo("<td class='wiki'><a class='wlink' href='". $wiki ."' target='_blank'><i class='fa fa-wikipedia-w' aria-hidden='true'></i></a></td>" );
								echo("<td class='familia'> <div class='entrada'>" . $registro["familia"] . "</div></td>" );
								echo("<td class='genero'> <div class='entrada'>" . $registro["genero"] . "</div></td>" );
								echo("<td class='especie'> <div class='entrada'>" . $registro["especie"] . "</div></td>" );
								echo("<td class='nombre1'> <div class='entrada'>" . $registro["nombre1"] . "</div></td>" );
								echo("<td class='nombre2'> <div class='entrada'>" . $registro["nombre2"] . "</div></td>" );
								echo("<td class='lugar'> <div class='entrada'>" . $registro["lugar"] . "</div></td>" );
								echo("<td class='habitat'> <div class='entrada'>" . $registro["habitat"] . "</div></td>" );
								echo("<td class='observaciones'> <div class='entrada'>" . $registro["observaciones"] . "</div></td>" );
								echo("<td class='ficha' ><a href='javascript:void(0)'><i class='fa fa-eye' aria-hidden='true' style='color:darkcyan;'></i></a> <span class='ciclo' style='display:none'>". $registro["ciclo"] . "</span>       </td>");
								echo("<td class='edicion'><a href='javascript:void(0)'><i class='fa fa-pencil' aria-hidden='true'></i></a></td>" );
								echo("<td class='borrar'><a href='javascript:void(0)'><i class='fa fa-minus-circle fa-lg' aria-hidden='true' style='color:red;'></i></a></td>" );
							echo("</tr>");
							
						}
						mysqli_free_result($sqldevolucion);	//devuelvo recurso a memoria
						mysqli_close($conn);				// cierro conexion
					}
				}else{
					echo(mysqli_error($conn));
				}
				?>
			</tbody>
			</table>

***********************************SCRIPT PHP PARA LOS AJAX********************************************


<?php
include("conexion.php");		// abre la conexión a la base de datos
global $conn;					//lo usamos en conexion, lo declaramos acá para no llamar siempre a $GLOBALS[]
if(conectar()){
	mysqli_set_charset($conn, "utf8mb4");
	$accion= $_GET["accion"];	// recupero que acción manda AJAX
	switch ($accion) {
		case"ECE":  // E-ditar CE-lda 
			$valor=$_POST["valor"];		// se recupera el valor pasado de ajax por post  
			$id=$_POST["id"];			// se recupera el id de la fila que edito
			$campo = $_POST["campo"];	// se recupera el nombre del campo que estoy editando
			if(strlen($valor)==0){
				$valor=" ";
			}
			$sqltxt="UPDATE plantas SET " . $campo . "='" . $valor . "' WHERE id=" . $id;
			$sqldevolucion = mysqli_query($conn,$sqltxt);
			$sqltxt="SELECT " . $campo . " FROM plantas WHERE id=" . $id;   //chequeo que se haya modificado
			$sqldevolucion = mysqli_query($conn,$sqltxt);
			$registro = mysqli_fetch_array($sqldevolucion, MYSQLI_ASSOC);
			$resultado = array("newvalor" => $registro[$campo]);
			mysqli_close($conn);				 // cierro conexion		
			sleep(.5);
			echo(json_encode($resultado));
		break;
		case"NRE":  //N-uevo RE-gistro
			if(strlen($_POST["familia"])==0){     //si algún campo queda vacío lo reemplazo por un  
				$f=" ";
			}else{
				$f = $_POST["familia"];
			}
			if(strlen($_POST["genero"])==0){
				$g=" ";
			}else{
				$g = $_POST["genero"];
			}
			if(strlen($_POST["especie"])==0){
				$e=" ";
			}else{
				$e = $_POST["especie"];
			}
			if(strlen($_POST["nombre1"])==0){
				$n1=" ";
			}else{
				$n1 = $_POST["nombre1"];
			}
			if(strlen($_POST["nombre2"])==0){
				$n2=" ";
			}else{
				$n2 = $_POST["nombre2"];
			}
			if(strlen($_POST["lugar"])==0){
				$n3=" ";
			}else{
				$n3 = $_POST["lugar"];
			}
			if(strlen($_POST["habitat"])==0){
				$h=" ";
			}else{
				$h = $_POST["habitat"];
			}
			if(strlen($_POST["ciclo"])==0){
				$c=" ";
			}else{
				$c = $_POST["ciclo"];
			}
			if(strlen($_POST["observaciones"])==0){
				$o=" ";
			}else{
				$o = $_POST["observaciones"];
			}
			
			$sqltxt="SELECT id FROM plantas WHERE genero='" . $g . "' AND especie='" . $e . "'";   //chequeo que no exista la especie
			$sqldevolucion = mysqli_query($conn,$sqltxt);
			if(mysqli_num_rows($sqldevolucion)!=0){  // si hay registros devuelvo en id "nulo" para poder procesarlo
				$resultado=array("id" => 'nulo');

				echo(json_encode($resultado));
			}else{
				$param= "'".$f . "','" . $g . "','" . $e . "','" . $n1 ."','".$n2 ."','".$n3 ."','".$h ."','".$c ."','".$o."'";
				$sqltxt = "INSERT INTO plantas (familia,genero,especie,nombre1,nombre2,lugar,habitat,ciclo,observaciones) VALUES(".$param.")";
				$sqldevolucion = mysqli_query($conn,$sqltxt);
				$sqltxt="SELECT * FROM plantas WHERE genero='" . $g . "' AND especie='" . $e . "'";   //chequeo que se haya modificado
				$sqldevolucion = mysqli_query($conn,$sqltxt);
				$resultado = mysqli_fetch_array($sqldevolucion, MYSQLI_ASSOC);
				mysqli_free_result($sqldevolucion);     //devuelvo recurso a memoria
				mysqli_close($conn);					// cierro conexion	
				//$resultado = array("id" => $id,"familia" => $f,"genero" =>$g,"especie" =>$e,"nombre1" =>$n1,"nombre2" =>$n2,"lugar" =>$n3,"habitat" =>$h,"observaciones" =>$o);
				echo(json_encode($resultado));
			}
		break;
		case"ERE":  //E-ditar RE-gistro
			$id = $_POST["idcaja"];					// recupero el id a editar
			if(strlen($_POST["familia"])==0){		//si algún campo queda vacío lo reemplazo por un  
				$f=" ";
			}else{
				$f = $_POST["familia"];
			}
			if(strlen($_POST["genero"])==0){
				$g=" ";
			}else{
				$g = $_POST["genero"];
			}
			if(strlen($_POST["especie"])==0){
				$e=" ";
			}else{
				$e = $_POST["especie"];
			}
			if(strlen($_POST["nombre1"])==0){
				$n1=" ";
			}else{
				$n1 = $_POST["nombre1"];
			}
			if(strlen($_POST["nombre2"])==0){
				$n2=" ";
			}else{
				$n2 = $_POST["nombre2"];
			}
			if(strlen($_POST["lugar"])==0){
				$n3=" ";
			}else{
				$n3 = $_POST["lugar"];
			}
			if(strlen($_POST["habitat"])==0){
				$h=" ";
			}else{
				$h = $_POST["habitat"];
			}
			if(strlen($_POST["ciclo"])==0){
				$c=" ";
			}else{
				$c = $_POST["ciclo"];
			}
			if(strlen($_POST["observaciones"])==0){
				$o=" ";
			}else{
				$o = $_POST["observaciones"];
			}
			$sqltxt="UPDATE plantas SET	familia = '" . $f . "', genero = '" . $g . "', especie = '" . $e . "', nombre1 = '" . $n1 . "', nombre2 = '" . $n2 . "' , lugar = '" . $n3 . "',habitat = '" . $h . "' , ciclo = '" . $c . "' , observaciones = '" . $o . "'	WHERE id = ".$id;
			$sqldevolucion = mysqli_query($conn,$sqltxt);
			$sqltxt="SELECT * FROM plantas WHERE id = ".$id;   //chequeo que se haya modificado
			$sqldevolucion = mysqli_query($conn,$sqltxt);
			$resultado = mysqli_fetch_array($sqldevolucion, MYSQLI_ASSOC);
			mysqli_free_result($sqldevolucion);					//devuelvo recurso a memoria
			mysqli_close($conn);								// cierro conexion	
			echo(json_encode($resultado));
	
 
		break;
		case"BRE":  //B-orrar RE-gistro
			$id=$_POST["id"];			// se recupera el id de la fila que voy a borrar
			$sqltxt="DELETE FROM plantas WHERE id=" . $id;
			$sqldevolucion = mysqli_query($conn,$sqltxt);
			if($sqldevolucion){
				$resultado=array("id" => $id);
			}else{
				$resultado=array("id" => 'nulo');
			}
			mysqli_close($conn);
			echo(json_encode($resultado));
		break;
		case"CFI":	//C-argar FI-cha
			$id = $_POST["idficha"];							// se recupera el id de la ficha
			$sqltxt="SELECT * FROM plantas WHERE id = ".$id;	//recupero de la tabla los datos
			$sqldevolucion = mysqli_query($conn,$sqltxt);
			$resultado = mysqli_fetch_array($sqldevolucion, MYSQLI_ASSOC);
			mysqli_free_result($sqldevolucion);					//devuelvo recurso a memoria
			mysqli_close($conn);								// cierro conexion	
			//$resultado = array("id" => $id,"familia" => $f,"genero" =>$g,"especie" =>$e,"nombre1" =>$n1,"nombre2" =>$n2,"lugar" =>$n3,"habitat" =>$h,"observaciones" =>$o);
			echo(json_encode($resultado)); 
		break;
		case"EFI":  //E-ditar FI-cha
			$id = $_POST["idficha"];							// se recupera el id de la ficha
			$c = $_POST["color"];								// se recuperan los campos enviados
			$a = $_POST["altura"];								// .....
			$d = $_POST["distancia"];
			$s = $_POST["siembra"];
			$t = $_POST["tipo_siembra"];
			$u = $_POST["ubicacion"];
			$su = $_POST["suelo"];
			$r = $_POST["riego"];
			$p = $_POST["peso"];
			$co = $_POST["comentarios"];
			$sqltxt="UPDATE plantas SET	color = '" . $c . "', altura = '" . $a . "', distancia = '" . $d . "', siembra = '" . $s . "', tipo_siembra = '" . $t . "' , ubicacion = '" . $u . "',suelo = '" . $su . "' , riego = '" . $r . "' , peso = '" . $p . "' , comentarios = '" . $co . "'	WHERE id = ".$id;
			$sqldevolucion = mysqli_query($conn,$sqltxt);
			mysqli_close($conn);								// cierro conexion	
			$resultado = array("resultado" => 'exito');			// mensaje de éxito
			echo(json_encode($resultado));
		break;	
	} 		     
}
?>
						
					
© IQSystems 2023