Añadir ID a una tabla

dipone · #1 (**permalink**) 28/11/2008, 05:45

Hola, tengo un problemilla.
Estoy empezando con el jquery, aparte de que me gustaria saber si existe un manual bueno de jquery en español, el problema que tengo es que me gustaria ponerle un id a una table.

No se la puedo poner directamente con el codigo por lo que necesitaria saber si se puede con jquery.
Solo tengo esa tabla por lo que habia probado
$("table").attr('id', 'sorter');
pero no va.Riendo

seria como $("table").addClass("sortable");
pero con el ID en vez de la class.

Me seria muy util gracias

killerangel · #2 (**permalink**) 28/11/2008, 09:54

$("table").attr('id', 'sorter');

le coloca el id a todas las tablas que tengas en ese momento en el DOM si hay sólo una funciona si hay varias tendrías q identificarla con

$("table :first").attr('id', 'sorter'); si es para la primera o

$("table").eq(2).attr('id', 'sorter'); para la tercera, por ejemplo....

otra cosa... de preferencia usa comillas dobles a simples, las simples déjalas para cuando tengas que colocar algo entre las dobles.

salu2

dipone · #3 (**permalink**) 01/12/2008, 02:03

Esto lo habia probado pero luego como afecta esto al Javascript?¿?

Es que esto document.getElementbyId ni esto getElementsByTagName no me lo coje.

No se muy bien porque.

Si me podeis explicar como lo hace exactamente y si esto no deberia funcionar.

Es que creo que despues de poner eso no lo coje bien o no lo reconoce o no se porque no va.

TresPuntoDos · #4 (**permalink**) 01/12/2008, 05:41

En principio no tendria porque dar ningun problema siempre y cuando llames a tu funcion javascript despues de haber ejecutado la funcion de poner los Id's

Aun asi si estas usando jQuery puedes hacer $("#tuId") que es lo mismo que getElementById

dipone · #5 (**permalink**) 01/12/2008, 06:31

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table Sorter</title>
<link rel="stylesheet" href="style.css" />
<script src="jquery-1.2.6.pack.js" type="text/javascript">
</script>
<script type="text/javascript">
    $(document).ready(function (){
        //Aqui asignamos el click al elemento <a>
      
		$("table").addClass("sortable");
	
        $("table").attr('id', 'sorter');
	
 
    
	
    });
	
</script>

<style type="text/css">
* {margin:0; padding:0}
body {font:10px Verdana,Arial}
#wrapper {width:825px; margin:50px auto}
.tabla_a_ordenar {width:823px; border:1px solid #ccc; border-bottom:none}
.tabla_a_ordenar th {padding:4px 6px 6px; background:#444; color:#fff; text-align:left; color:#ccc}
.tabla_a_ordenar td {padding:2px 4px 4px; background:#fff; border-bottom:1px solid #ccc}
.tabla_a_ordenar .head {background:#666 url(Images/sort.gif) 6px center no-repeat; cursor:pointer; padding-left:18px}
.tabla_a_ordenar .desc {background:#600 url(Images/desc.gif) 6px center no-repeat; cursor:pointer; padding-left:18px}
.tabla_a_ordenar .asc {background:#600 url(Images/asc.gif) no-repeat 6px center; cursor:pointer; padding-left:18px}
.tabla_a_ordenar .head:hover, .tabla_a_ordenar .desc:hover, .tabla_a_ordenar .asc:hover {color:#fff}
.tabla_a_ordenar .even td {background:#EDDEDC}
.tabla_a_ordenar .odd td {background:#fff}
</style>
<script language="javascript">
var table=function(){
	function sorter(n){
		this.n=n; this.t; this.b; this.r; this.d; this.p; this.w; this.a=[]; this.l=0
	}
	sorter.prototype.init=function(t,f){
		this.t=document.getElementById(t);
		this.b=this.t.getElementsByTagName('tbody')[0];
		this.r=this.b.rows; var l=this.r.length;
		for(var i=0;i<l;i++){
			if(i==0){
				var c=this.r[i].cells; this.w=c.length;
				for(var x=0;x<this.w;x++){
					if(c[x].className!='nosort'){
						c[x].className='head';
						c[x].onclick=new Function(this.n+'.work(this.cellIndex)')
					}
				}
			}else{
				this.a[i-1]={}; this.l++;
			}
		}
		if(f!=null){
			var a=new Function(this.n+'.work('+f+')'); a()
		}
	}
	sorter.prototype.work=function(y){
		this.b=this.t.getElementsByTagName('tbody')[0]; this.r=this.b.rows;
		var x=this.r[0].cells[y],i;
		for(i=0;i<this.l;i++){
			this.a[i].o=i+1; var v=this.r[i+1].cells[y].firstChild;
			this.a[i].value=(v!=null)?v.nodeValue:''
		}
		for(i=0;i<this.w;i++){
			var c=this.r[0].cells[i];
			if(c.className!='nosort'){c.className='head'}
		}
		if(this.p==y){
			this.a.reverse(); x.className=(this.d)?'asc':'desc';
			this.d=(this.d)?false:true
		}else{
			this.p=y; this.a.sort(compare); x.className='asc'; this.d=false
		}
		var n=document.createElement('tbody');
		n.appendChild(this.r[0]);
		for(i=0;i<this.l;i++){
			var r=this.r[this.a[i].o-1].cloneNode(true);
			n.appendChild(r); r.className=(i%2==0)?'even':'odd'
		}
		this.t.replaceChild(n,this.b)
	}
	function compare(f,c){
		f=f.value,c=c.value;
		var i=parseFloat(f.replace(/(\$|\,)/g,'')),n=parseFloat(c.replace(/(\$|\,)/g,''));
		if(!isNaN(i)&&!isNaN(n)){f=i,c=n}
		return (f>c?1:(f<c?-1:0))
	}
	return{sorter:sorter}
}();
</script>

</head>
<body>
<div id="wrapper">
	<table cellpadding="0" cellspacing="0" border="0" >
		<tr>
			<th>ID</th>
			<th>Name</th>
			<th>Phone</th>
			<th>Email</th>
			<th>City</th>
			<th>State</th>
			<th>Zip Code</th>
		</tr>
		<tr>
			<td>1</td>
			<td>Kaseem Huber</td>
			<td>(587) 117-5521</td>
			<td>[email protected]</td>
			<td>Burlington</td>
			<td>DE</td>
			<td>81070</td>
		</tr>
		<tr>
			<td>2</td>
			<td>Oleg Michael</td>
			<td>(539) 184-8550</td>
			<td>[email protected]</td>
			<td>Covina</td>
			<td>SC</td>
			<td>48758</td>
		</tr>
		<tr>
			<td>3</td>
			<td>Kibo Ochoa</td>
			<td>(837) 601-9918</td>
			<td>[email protected]</td>
			<td>Placentia</td>
			<td>UT</td>
			<td>09075</td>
		</tr>
		
		
	</table>
</div>
<script type="text/javascript">
var sorter=new table.sorter("sorter");
sorter.init("sorter",1);
</script>
</body>
</html>

Yo pongo cambio lo subrayado por <table cellpadding="0" cellspacing="0" border="0" id="sorter"> y quito lo de $("table").attr('id', 'sorter');
funciona perfectamente. Es que me estoy aqui ya volviendo loco y nos se que probar.

GRACIAS POR LAS RESPUESTAS

#6 (**permalink**) 01/12/2008, 07:22

Lo que ocurre es lo siguiente:

Cuando haces:

Código javascript:

Ver original$(document).ready(function (){
    $("table").addClass("sortable");
    $("table").attr('id', 'sorter');
});

Esto se ejecuta cuando el documento está terminado de cargar (cuando el "document" está "ready"). Hasta ese momento no se ejecuta, claro.

Cuando haces:

Código html:

Ver original...
    <script type="text/javascript">
        var sorter=new table.sorter("sorter");
        sorter.init("sorter",1);
    </script>
  </body>
</html>

Ese Javascript se ejecuta ahí, inmediatamente, justo antes de cerrar el documento. Es decir antes de que el documento esté terminado. Es decir, antes que el otro código.

Así que es normal, que si buscas el id antes de haberlo puesto, no esté.

dipone · #7 (**permalink**) 01/12/2008, 09:31

Cita:

Iniciado por venkman

Lo que ocurre es lo siguiente:

Cuando haces:

Código javascript:

Ver original$(document).ready(function (){
    $("table").addClass("sortable");
    $("table").attr('id', 'sorter');
});

Esto se ejecuta cuando el documento está terminado de cargar (cuando el "document" está "ready"). Hasta ese momento no se ejecuta, claro.

Cuando haces:

Código html:

Ver original...
    <script type="text/javascript">
        var sorter=new table.sorter("sorter");
        sorter.init("sorter",1);
    </script>
  </body>
</html>

Ese Javascript se ejecuta ahí, inmediatamente, justo antes de cerrar el documento. Es decir antes de que el documento esté terminado. Es decir, antes que el otro código.

Así que es normal, que si buscas el id antes de haberlo puesto, no esté.

Entonces como lo puedo hacer. De jquery estoy un poco pez y he hecho un poco copy paste.

#8 (**permalink**) 01/12/2008, 10:45

Ya veo. Pues la verdad es que no he mirado mucho tu "sorter" pero me imagino que puedes hacer dos cosas:

1. Poner la llamada esa de new table.sorter y sorter.init dentro del $(document).ready() después de haberle añadido el id a la tabla.

2. Si el nombre de "table.sorter" se refiere a que sirve para ordenar tablas, existee algún plugin de JQuery para hacer eso mismo.
Este http://docs.jquery.com/Plugins/Tablesorter o http://tablesorter.com/docs/ es sencillo.

dipone · #9 (**permalink**) 03/12/2008, 04:50

Gracias por ayudarme ya lo resolvi.

GRACIAS A TODOS