2011-10-02 17 views
8

Ho una tabella con più colonne. Voglio che il contenuto di ogni colonna sia selezionato individualmente. Quando inizio a selezionare la prima colonna, la seconda, la terza ... vengono automaticamente selezionate. Quando seleziono una colonna, voglio rendere non selezionabili altre colonne.Colonne non selezionabili nella tabella HTML

Ho provato ad applicare la seguente classe sugli elementi e ha funzionato correttamente in FF. Non importa dove si avvia la selezione, non è mai selezionabile.

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

Per IE ho cercato proprietà chiamata unselectable="on", In Internet Explorer, è comunque selezionabile se la selezione si avvia fuori. Voglio impedire la selezione di alcune colonne, anche la selezione inizia dall'esterno.

Ho provato a utilizzare onselectionstart e onmouseover ma poiché la selezione inizia all'esterno dell'elemento, questi non vengono attivati.

Ho qualche speranza?

Grazie in anticipo.

+0

Qual è lo scopo della selezione di ogni colonna singolarmente? Ho creato una tabella con del testo al suo interno e ho selezionato il testo senza incontrare il tuo problema. Puoi inoltre fornire ulteriori dettagli sul motivo per cui questo è un problema? Potresti darci uno snippet o tutto il tuo codice in modo che possiamo testarlo? – b28c92e5ff1

+0

La scelta migliore è probabilmente selezionare le celle della tabella tramite jquery (selettori semplici e puliti) e impostare le corrispondenti classi css per modificare il comportamento. Potresti invece voler usare l'attributo style, quindi queste proprietà non possono essere sovrascritte dai file css dell'utente personalizzati dai browser. – Smamatti

risposta

1

Credo che per ora non ci sia una soluzione CSS pura.

Può sembrare strano, ma è possibile clonare il contenuto della colonna che si desidera venga selezionato dall'utente in una tabella separata che sarà positioned: absolutely sulla colonna originale.

0

Potrebbe essere utile includere un TH con un attributo SCOPE. Non posso dire che funzionerà, ma rende per una tabella più semantica. I CSS possono agganciare l'attributo, quindi una soluzione DOM non può essere così lontana.

1

Invece di reinventare la ruota ... check out http://www.datatables.net/

Questa è una tabella JQuery plug-in che ti lasciarti.

Sembra che stia già facendo ciò che vorresti fare ed è gratuito.

+0

I datatables sono meravigliosi :) semplificheranno il compito per voi @Gopal infatti –

+1

Non risolve il problema e sembra una spina. -1 –

Problemi correlati