JQuery - No se aplican bien los estilos de una clase a una tabla

No se aplican bien los estilos de una clase a una tabla

Publicado por Alfredo (17 intervenciones) el 29/01/2013 09:37:25

Hola,
he aplicado unos filtros similares a los de Excel a las cabeceras de un grid, para ello hago una llamada a una función en el evento onchange, que devuelve los datos resultantes, pero el problema que tengo es que se me fastidia el estilo y salen todos los datos descolocados.
Yo intento aplicarle la clase así:

tabla=document.getElementById("anyid");
$(tabla).attr("class","grid all");

De hecho, si pongo un alert ($(tabla).attr("class")); me devuelve el nombre correcto de la clase, que es "grid all".

Agradecería si alguien me pudiese dar una idea para solucionar esto.

gracias

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 1

Val: 302

No se aplican bien los estilos de una clase a una tabla

Publicado por xve (673 intervenciones) el 29/01/2013 10:57:23

Hola Alfredo, intento comentarte...

Cuando utilizas jquery, no es necesario utilizar document.get....
$("#anyid") es lo mismo que document.getElementById("anyid")

La función attr() del jquery, devuelve un atributo, no lo modifica...

Para añadir una clase, utiliza la función addClass():

$("#anyid").addClass("grid all");

http://api.jquery.com/addClass/

Espero que te sirva... coméntanos, ok?

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

No se aplican bien los estilos de una clase a una tabla

Publicado por Alfredo (17 intervenciones) el 29/01/2013 11:17:31

Hola xve,
te agradezco que me hayas contestado, lo he probado, poniendo sólamente lo que tú me dices:

he quitado estas 2 líneas:
tabla=document.getElementById("anyid");
$(tabla).attr("class","grid all");

y he puesto en su lugar:

$("#anyid").addClass("grid all");

pero me siguie sin funcionar...

Valora esta respuesta

Comentar

Pos: 1

Val: 302

No se aplican bien los estilos de una clase a una tabla

Publicado por xve (673 intervenciones) el 29/01/2013 11:55:07

Nos puedes mostrar el código entero para probarlo?
Te da algún error?

Valora esta respuesta

Comentar

No se aplican bien los estilos de una clase a una tabla

Publicado por Alfredo (17 intervenciones) el 29/01/2013 12:05:37

NO ME DA NINGÚN ERROR:
AQUI OS PASO LA FUNCION QUE UTILIZO:

$.fn.createFilterOpts = function(opciones = null){

		var $grid=$(this);

		var enc=$grid.getHeaderRow().find("tr:first > th[col!='CHK']");

		var aov=$grid.data().filteropts;

		for(var inc=0;inc<enc.length;inc++){

			var nomb=$(enc[inc]).html().replace(/<\/?[^>]+>/gi,'');

			var obj=$grid.data().rowData;

			var nombreCampo=nomb.toUpperCase()+"_SEN";

			for(var name in obj){

				var myOptions=new Array();

				var nombreCol=name.toUpperCase()+"";

				if (nombreCampo.indexOf(nombreCol)>0){

					var obj2=obj[name];

					for(var val in obj2){

						var obj3=obj2[val];

						for(var valor in obj3){

							if ($.inArray(obj3[valor], myOptions)==-1){

								myOptions.push(obj3[valor]);

					myOptions.sort()

					if($.trim(nombreCampo)=="POBLACION_SEN"){

						var onchange="operadores(this.value,this.name);";

					}else{

						var onchange="ocultaRows(this.value,this.name);";

					var htmlTh='<select style="font-weight:bold" onchange= '+onchange+' name="'+nomb+'">';

					htmlTh+='<option value="'+nomb+'" selected="">'+nomb+'</option>';

					for (var i = 0; i < myOptions.length; i++) {

						htmlTh+='<option value="'+myOptions[i]+'">'+myOptions[i]+'</option>';

			htmlTh+='</select>';

			if($.trim(nombreCampo)=="MEDIDA_SEN"){

				htmlTh+='<select style="font-weight:bold;display:none" id="med">';

				htmlTh+='<option value="Igual" selected="">Igual</option>';

				htmlTh+='<option value=">">Mayor</option>';

				htmlTh+='<option value="<">Menor</option>';

				htmlTh+='</select>';

			if($.trim(nombreCampo)=="PORCENTAJE_SEN"){

				htmlTh+='<select style="font-weight:bold;display:none" id="por">';

				htmlTh+='<option value="Igual" selected="">Igual</option>';

				htmlTh+='<option value=">">Mayor</option>';

				htmlTh+='<option value="<">Menor</option>';

				htmlTh+='</select>';

			$(enc[inc]).html(htmlTh);

Y AQUI LA FUNCION A LA QUE LLAMO DESDE EL ONCHANGE:

function ocultaRows(valorCol,nombreCol){

	var texto = "";

	for (var i=0;i<document.getElementById("anyid").rows.length;i++) {

		for (var j=0;j<document.getElementById("anyid").rows[i].cells.length;j++) {

			celda=document.getElementById("anyid").rows[i].cells[j];

			var nombreColum = $(celda).attr("col");

			var nombreColForm=nombreColum.toUpperCase()+"";

			var argColForm=nombreCol.toUpperCase()+"_SEN";

			if (argColForm.indexOf(nombreColForm)>=0){

				texto =document.getElementById("anyid").rows[i].cells[j].innerHTML;

				if (texto==valorCol){

					document.getElementById("anyid").rows[i].style.display="block";

				}else{

					if(valorCol != nombreCol){

						document.getElementById("anyid").rows[i].style.display="none";

					}else{

						document.getElementById("anyid").rows[i].style.display="block";

	$(por).css("display","none");

	$(med).css("display","none");

/*

	tabla=document.getElementById("anyid");

	$(tabla).attr("class","grid all");

*/

	$("#anyid").addClass("grid all");

	//alert ($(tabla).attr("class"));

GRACIAS

Valora esta respuesta

Comentar

Pos: 1

Val: 302

No se aplican bien los estilos de una clase a una tabla

Publicado por xve (673 intervenciones) el 29/01/2013 16:07:13

Hola Alfredo, no veo el código html donde esta el id "anyid"...
Los estilos "grid" y "all" existen, verdad?

Valora esta respuesta

Comentar

No se aplican bien los estilos de una clase a una tabla

Publicado por Alfredo (17 intervenciones) el 29/01/2013 16:15:35

Es que es una aplicación un poco compleja; el id "anyid" con el estilo "grid all" le llega de un PHP que contiene la siguiente línea:

echo '<table class="grid all" action="' . $_SESSION['URL'] . 'api/api.php?api=ajax" title="" id="anyid" cellpadding="0" cellspacing="0" style="font-family: Verdana, Arial; font-size:10px; " > ' . chr(10) . chr(13);

Valora esta respuesta

Comentar

Pos: 1

Val: 302

No se aplican bien los estilos de una clase a una tabla

Publicado por xve (673 intervenciones) el 29/01/2013 20:55:30

Hola Alfredo, pero los estilos grid y all ya están aplicados a la tabla, no?
El php que muestra la tabla, viene mediante ajax?

Valora esta respuesta

Comentar

No se aplican bien los estilos de una clase a una tabla

Publicado por Alfredo (17 intervenciones) el 29/01/2013 21:09:01

Hola xve,

Los estilos están aplicados a la tabla y funcionan bien hasta que se ejecta el evento onchange del Select; Sí, el PHP llega mediante Ajax

Valora esta respuesta

Comentar

Pos: 1

Val: 302

No se aplican bien los estilos de una clase a una tabla

Publicado por xve (673 intervenciones) el 29/01/2013 22:35:47

Hola Alfredo, si el código se carga por ajax, tienes que poner la función para cambiar el estilo después de hacer puesto el código en la web, ya que si primero pones el código javascript y luego el contenido, el código javascript no sabe de la existencia del código html entrado a posterior.

Por ejemplo, supongamos que el id "cargado" viene dado por un ajax que viene de pagina.php

$("#idcontenido").load("pagina.php");

$("#cargado").click(function(){

    alert("hola");

});

Una vez cargado el contenido de pagina.php el cual devuelve

<div id="cargado">pulsa para mostrar un alert</div>

Por mucho que se pulse en el texto, nunca se ejecutara la función click(), ya que cuando se cargo dicha función, todavía no existía el id "cargado" en el DOM de la pagina.

La manera correcta seria:

$("#idcontenido").load("pagina.php",function(){

    $("#cargado").click(function(){

...

});

});

De esta manera, una vez carga el contenido, luego carga la función click...

No se si me he sabido explicar... coméntanos, ok?

Valora esta respuesta

Comentar

No se aplican bien los estilos de una clase a una tabla

Publicado por Alfredo (17 intervenciones) el 30/01/2013 16:20:32

Ok,
lo miro y os digo algo.

gracias

Valora esta respuesta

Comentar

No se aplican bien los estilos de una clase a una tabla

Publicado por Alfredo (17 intervenciones) el 19/02/2013 09:54:55

Perdonad mi tardanza en contestar.
No tenía Ajax, me estaba liando con otra cosa; al final lo empecé todo desde el principio y me funciona perfectamente con $("#anyid").addClass("grid all");

gracias

Valora esta respuesta

Comentar

No muesta datos de un select

Slider Rango Minimo y Maximo