XHTML/CSS/Javascript Weg, um eine TABELLE Spalte wählbar?

Question

Ich verwende eine einfache TABLE, um tabellarische Daten anzuzeigen, wo die Zeilen ausgerichtet werden müssen, aber wenn es um die Auswahl des Tabelleninhalts geht, möchte ich nur, dass Benutzer innerhalb jeder Spalte auswählen können. Das Standardverhalten des Browsers besteht darin, als Zeilen in allen Spalten auszuwählen, aber wir NEED können die Auswahl nur innerhalb von Spalten zulassen.

Ich hatte gehofft, dass es eine neue CSS oder XHTML 1.0 Möglichkeit gab, Tabellen als Spalten statt als Zeilen zu definieren und Browser würden dann die Auswahl in ihnen erzwingen. Ich weiß, dass dies wahrscheinlich nicht möglich ist und muss eine JavaScript-Auswahlmöglichkeit aufbauen, um die Browserauswahl zu umgehen. Natürlich erlauben Javascript Tabellenkalkulations-Widgets wie Google Spreadsheets die Auswahl innerhalb von Zeilen und Spalten, wie ich es benötige, aber ich hoffe, ein Gitter-Typ-Widget zu finden, das auf Prototype aufgebaut ist oder meine eigene Funktionalität schreibt.

Alle Tipps oder Links zu Widgets mit dieser Spaltenauswahl eingebaut? Gibt es einen HTML/CSS-Trick, damit so etwas funktioniert?

Answer 1

Ich bin mir nicht sicher, was Sie meinen, aber es scheint, als ob Sie in der Lage sein würden, eine einzelne Spalte anders als andere Spalten zu färben. Der einfachste Weg wäre es, die colgroup und col-Tags zu verwenden:

css

.name {width:5em;background:#ccc;} 
.value {width:3em;text-align:center;color:#f00;} 
.comment {text-align:right;} 

HTML

<table> 
<caption>My Test Table</caption> 
<col class="name"> 
<colgroup class="value" span="3"></colgroup> 
<col class="comment"> 
</colgroup> 
<tr> 
<th>Name</th> 
<th>Value 1</th> 
<th>Value 2</th> 
<th>Value 3</th> 
<th>Comment</th> 
</tr> 
<tr> 
<td>Bob</td> 
<td>Yes</td> 
<td>No</td> 
<td>42</td> 
<td>I like cheese</td> 
</tr> 
<tr> 
<td>Susan</td> 
<td>No</td> 
<td>Yes</td> 
<td>42</td> 
<td>Sharp Cheddar</td> 
</tr> 
</table> 

-Code gestohlen http://www.webmasterworld.com/forum83/6826.htm

Es gibt nur eine Teilmenge von CSS Eigenschaften, kann auf Spalten gesetzt werden. W3C hat eine list of those.

Answer 2

Wenn Sie nur eine Spalte markieren, wenn der Benutzer auf den Tisch klickt, können Sie ganz einfach tun, dass mit jquery

$("table td").bind('click',function(){ 
      $("table td").css('background',''); 
      $(this).css('background','green'); 
     }); 

Answer 3

Verwenden Sie den colgroup tag - http://www.w3schools.com/tags/tag_colgroup.asp

Sie jede mögliche Art anwenden können Sie wollen zur ganzen Spalte. Das Ändern des Stils, wenn die Maus in der Spalte bewegt/geklickt wird, kann in jquery erreicht werden ... Sie könnten hier die Skripte aus den anderen Antworten verwenden, aber den "table td" Selektor durch "table colgroup" ersetzen.