2011-10-02 25 views
8

Tengo una tabla con varias columnas. Quiero que el contenido de cada columna se seleccione de forma individual. Cuando empiezo a seleccionar la primera columna, segundo, tercero ... se seleccionan automáticamente. Cuando selecciono una columna, quiero que otras columnas no sean seleccionables.Columnas no seleccionables en la tabla HTML

He intentado aplicar la siguiente clase a los elementos y funcionó bien en FF. No importa desde dónde comiences la selección, nunca es seleccionable.

.unselectable { 
    user-select: none; /* CSS3 */ 
    -moz-user-select: none; 
    -khtml-user-select: none; 
} 

Para IE He tratado propiedad llamada unselectable="on", en Internet Explorer, todavía se puede seleccionar si la selección comienza fuera. Quiero evitar la selección de ciertas columnas, incluso la selección comienza desde afuera.

He intentado usar onselectionstart y onmouseover, pero como la selección se inicia fuera del elemento, no se activan.

¿Tengo alguna esperanza?

Gracias de antemano.

+0

¿Cuál es su propósito para seleccionar cada columna individualmente? Creé una tabla con texto dentro y seleccioné el texto sin encontrar el problema. También puede por favor proporcionar más detalles sobre por qué esto es un problema? ¿Podría darnos un fragmento o todo su código para que podamos probarlo? – b28c92e5ff1

+0

Su mejor opción es, probablemente, seleccionar las celdas de la tabla a través de jquery (selectores fáciles y limpios) y establecer las clases CSS correspondientes para cambiar el comportamiento. Es posible que desee utilizar el atributo de estilo en su lugar, por lo que estas propiedades no se pueden sobrescribir con archivos css de usuario personalizados de navegadores. – Smamatti

Respuesta

1

Creo que por ahora no hay una solución pura de CSS.

Puede sonar raro, pero podría clonar el contenido de la columna que desea que el usuario seleccione en una tabla separada que será positioned: absolutely sobre la columna original.

0

Podría ser útil incluir un TH con un atributo SCOPE. No puedo decir que funcionará, pero sí una tabla más semántica. CSS puede conectar el atributo, por lo que una solución DOM no puede estar tan lejos.

1

vez de reinventar la rueda ... echa un vistazo a http://www.datatables.net/

Este es un plug-in mesa de jQuery que va a golpear sus calcetines.

Parece que ya está haciendo lo que le gustaría hacer y es gratis.

+0

Las tablas de datos son maravillosas :) simplificarán la tarea para usted @Gopal de hecho –

+1

No resuelve el problema, y ​​parece un enchufe. -1 –

Cuestiones relacionadas