XHTML / CSS / Javascript способ сделать TABLE COLUMN выбираемым? - PullRequest
Новая
       21

XHTML / CSS / Javascript способ сделать TABLE COLUMN выбираемым?

0 голосов
/ 16 марта 2009

Я использую простую таблицу TABLE для отображения табличных данных, где строки должны быть выстроены, но когда дело доходит до выбора содержимого таблицы, я хочу, чтобы пользователи могли выбирать только в каждом столбце. Поведение браузера по умолчанию заключается в выборе в виде строк во всех столбцах, но нам НУЖНО каким-то образом разрешить выбор только в столбцах.

Я надеялся, что появился причудливый новый способ CSS или XHTML 1.0 для определения таблиц в виде столбцов вместо строк, и браузеры затем принудительно выбирают их. Я знаю, понимаю, что это, вероятно, не возможно, и нужно будет создать способ выбора JavaScript, чтобы отменить выбор браузера. Очевидно, что виджеты электронных таблиц javascript, такие как Google Spreadsheets, позволяют выделять строки и столбцы по мере необходимости, но я надеюсь найти виджет типа сетки, построенный на Prototype, или написать свою собственную функциональность.

Есть ли какие-либо советы или ссылки на виджеты со встроенным выбором столбцов? Есть ли уловка HTML / CSS, чтобы сделать что-то подобное?

Ответы [ 3 ]

1 голос
/ 16 марта 2009

Если вы хотите выделить столбец только когда пользователь нажимает на таблицу, вы можете легко сделать это, используя jquery 

$("table td").bind('click',function(){
            $("table td").css('background','');
            $(this).css('background','green');
         });
1 голос
/ 16 марта 2009

Использовать тег colgroup - http://www.w3schools.com/tags/tag_colgroup.asp

Вы можете применить любой стиль ко всему столбцу. Изменение стиля, когда мышь перемещается / щелкает в столбце, может быть выполнено в jquery ... вы можете использовать скрипты из других ответов здесь, но замените селектор "table td" на "table colgroup".

1 голос
/ 16 марта 2009

Я не уверен, что вы имеете в виду, но кажется, что вы хотите иметь возможность окрашивать один столбец иначе, чем другие столбцы. Самый простой способ - использовать теги colgroup и col:

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>

Код, украденный у http://www.webmasterworld.com/forum83/6826.htm

Существует только подмножество свойств CSS, которые можно установить для столбцов. W3C имеет список из этих .

...