VPF::Выбор нескольких ячеек таблцицы

Wowa

Дата 12.2.2006, 20:21 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Админ
Сообщений: 15017
Регистрация: 14.9.2000
Где: Винград

Репутация: 1
Всего: 290

Если таблица, в которой кратко перечислены услуги, которые предлагает моя фирма. Человек должен мочь с помощью мышки выделить нужную услугу для заказа.
Я бы поставил чекбоксы рядом, но проблема в том, что услуга состоит из: платны за установку(в первой колонке) и месячного платежа(вторая колонка). Т.к. ставить чек бокс только в столбик с ценой за установку как-то глупо.

Как посоветуете быть?

	Schüler / Auszubildende / Studenten	Erwerbstätige
	Установка	В месяц	Установка	В месяц
Einzelpersonen	95 €	9 €	170 €	17 €
Ensembles / Gruppen bis 3 Personen	170 €	17 €	230 €	21 €
Ensembles / Gruppen ab 4 Personen	230 €	21 €	380 €	27 €

Добавлено @ 20:22
я выделил желто-коричневым цветом - выбранный тариф. Как видно - должны отмечаться оба столбца. Как это можно сделать?

Destruction

Дата 12.2.2006, 21:30 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 23
Регистрация: 12.2.2006

Репутация: нет
Всего: нет

Событие клаца и невидимый чекбокс (можно впринципе в один стринг через запятую).

12345c

Дата 12.2.2006, 22:47 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Визуально объединить 2 столбца границей с более широким пробелом, и к ним в группу 3-й столбец с чекбоксом ("Выбрать").
А где указывается, за сколько месяцев платит? Или эта колонка чисто для информации?

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

Wowa

Дата 12.2.2006, 22:55 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Админ
Сообщений: 15017
Регистрация: 14.9.2000
Где: Винград

Репутация: 1
Всего: 290

Цитата(12345c @ 12.2.2006, 20:47

)

А где указывается, за сколько месяцев платит? Или эта колонка чисто для информации?

Контракт на год. Платят все всегда ежемесячно.
Добавлено @ 22:58

Цитата(12345c @ 12.2.2006, 20:47

)

Визуально объединить 2 столбца границей с более широким пробелом

Да, может быть их засунуть еще в одну таблицу.........

Alx

Дата 13.2.2006, 18:43 (ссылка)

(нет голосов)

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78

Wowa,
http://soft.flyweb.in/small/cell_sel.html smile

Это сообщение отредактировал(а) Alx - 13.2.2006, 18:49

--------------------

Wowa

Дата 13.2.2006, 18:47 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Админ
Сообщений: 15017
Регистрация: 14.9.2000
Где: Винград

Репутация: 1
Всего: 290

Alx, классно!

Но единственный недостаток - непривычно для пользователя. Не все могут додуматься...

Alx

Дата 13.2.2006, 18:48 (ссылка)

(нет голосов)

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78

дык ты ж сам так просил? или всё-тки должны быть чекбоксы?

--------------------

Wowa

Дата 13.2.2006, 19:32 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Админ
Сообщений: 15017
Регистрация: 14.9.2000
Где: Винград

Репутация: 1
Всего: 290

Цитата(Alx @ 13.2.2006, 16:48

)

дык ты ж сам так просил? или всё-тки должны быть чекбоксы?

чекбоксы - нет. Нужно, чтобы только один вариант можно было выбрать. Т.е. радио-буттон подошел бы.
Как лучше сделать - я сам не знаю. Главное, чтобы максимально просто и наглядно было для человека, который заказ захочет на сайте сделать..
В основном это будут музыканты. Т.е. люди не часто работающие с компьютером. Именно поэтому еще интерфейс максимально понятен должен быть.

Alx

Дата 13.2.2006, 20:04 (ссылка)

(нет голосов)

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78

ну тогда тебе в Web-дизайн или Верстку нужно smile

а потом сюда - на исполнение smile

но тот вариант что я сделал, только с позможностью выбора только одного параметра вот:

http://soft.flyweb.in/small/cell_sel_single.html

и с чекбоксами:

http://soft.flyweb.in/small/cell_sel_many.html

Это сообщение отредактировал(а) Alx - 13.2.2006, 20:05

--------------------

12345c

Дата 14.2.2006, 06:03 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Wowa, Такой вариант (вот) я имел в виду (демо работает в IE only). Если понравится, то тройки колонок сгруппировать с помощью дизайна HTML и написать скрипт на все браузеры.

http://js2.ru/example/table.htm

Это сообщение отредактировал(а) 12345c - 3.3.2008, 18:03

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

Wowa

Дата 14.2.2006, 12:37 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Админ
Сообщений: 15017
Регистрация: 14.9.2000
Где: Винград

Репутация: 1
Всего: 290

Цитата(12345c @ 14.2.2006, 04:03

)

Wowa, Такой вариант (вот) я имел в виду (демо работает в IE only). Если понравится, то тройки колонок сгруппировать с помощью дизайна HTML и написать скрипт на все браузеры.

О, очень понравилось! Проясни, пожалуйста, про группировку. Как нужно сгруппировать, чтобы под всеми браузерами работало?

12345c

Дата 14.2.2006, 18:52 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Имел в виду разделить группы более широкими белыми полосами. Пример 2, работающий везде (ie, ff, opera). Показалось, что будет эффектнее подсвечивать заодно по наведению мыши, хотя в "задании" этого не было. Оно работает не очень надёжно при быстрых движениях мыши (обычная проблема). Для ответственных приложений лучше убрать или усовершенствовать скрипт.

Заодно код выложу здесь - понадобится, когда кто-то будет делать подобное.

Код

<html><head><title>Выбор нескольких заданных ячеек в таблице с подсветкой по наведению.</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script>
    //группы ячеек именуются классом "select<число>", где <число> - номер группы
    colorFon='#d3e0ec'    //цвет фона ячеек
    colorHigh='#D6E6BA' //'#D3E2B0';    //цвет выделения по наведению мыши
    colorPick='#ead5a8'    //Цвет выделения по клику (и по выбору радиокнопки)
document.onclick=function(e){t=document.all?event.srcElement:e.target;
    if(t.tagName=='INPUT'||t.tagName=='TD'&&t.className.indexOf('select')==0){
        l=document.getElementById('t1').getElementsByTagName('TD');
    for(i=0;i<l.length;i++){
        if(l[i].className=='select'+t.className.charAt(6)) l[i].style.backgroundColor=colorPick;
        else if(l[i].className&& l[i].className.indexOf('select')==0) l[i].style.backgroundColor=colorFon;
    }}    //--красим строку в цвет выделения по клику и отмечаем радиокнопку
    if(t.tagName!='INPUT')
        for(j=0;j<document.getElementsByName('vybor').length;j++)
            if(document.getElementsByName('vybor')[j].value==t.className.charAt(6))
                document.getElementsByName('vybor')[j].checked=!0;
}
document.onmouseover=document.onmouseout=function(e){t=document.all?event.srcElement:e.target;
    if(t.tagName=='INPUT'||t.tagName=='TABLE'||t.tagName=='BODY'||t.tagName=='TD'&&t.className.indexOf('select')==0){
        l=document.getElementById('t1').getElementsByTagName('TD');
    for(i=0;i<l.length;i++){    c=l[i].style.backgroundColor;
        if(c!=colorPick&&c!='rgb(234, 213, 168)')    //здесь хорошо бы перекодировку для FF
            if(l[i].className=='select'+t.className.charAt(6)) l[i].style.backgroundColor=colorHigh;
             else if(l[i].className.indexOf('select')==0)l[i].style.backgroundColor=colorFon;
    }}    //--красим строку в другой цвет выделения по наведению мыши
}
</script>
<style>    
    td,th{padding:2 6 4 5;background-color:#d3e0ec;}/* формат ячеек, в которых отмечен colorFon*/
    .whiteLine{padding:0;background-color:#ffffff;}/*формат таблицы и просветов между группами ячеек*/
</style>
</head><body>
    <!--Текст таблицы, на которой проверяется пример. 2 группы по 3 столбца -->
<table id=t1><tr><td class=whiteLine>
<TABLE class=whiteLine cellSpacing=2 cellP adding=3 width=799 border=0>
  <TBODY>
    <TR>
      <TH class=whiteLine width=37%> </TH>
         <TD class=whiteLine width=1><img src=1.gif width=1 height=1></TD>
     <TH colSpan=3 width=35% nowrap>Schuler / Auszubildende / Studenten </TH>
        <TD class=whiteLine width=1><img src=1.gif width=1 height=1></TD>
      <TH colSpan=3 width=31%>Erwerbstatige </TH>
        <TD class=whiteLine width=1><img src=1.gif width=1 height=1></TD>
    </TR>
    <TR align="center">
      <TH class=whiteLine> </TH>
        <TD class=whiteLine width=1><img src=1.gif width=1 height=1></TD>
      <td>Установка</td>
      <td>В месяц</td>
      <TH width=1%>Выбор</TH>
        <TD class=whiteLine width=1><img src=1.gif width=1 height=1></TD>
      <td>Установка</td>
      <td>В месяц</td>
      <TH width=1%>Выбор</TH>
        <TD class=whiteLine width=1><img src=1.gif width=1 height=1></TD>
    </TR>
    <TR align="center">
        <TD class=whiteLine colspan=10 width=1><img src=1.gif width=1 height=1></TD>
    </TR>    
    <TR align="center">
      <TD height=30 align="left"><STRONG>Einzelpersonen</STRONG></TD>
        <TD class=whiteLine width=1><img src=1.gif width=1 height=1></TD>
      <TD class=select1>95 ?</TD>
      <TD class=select1>9 ?</TD>
      <TD class=select1><input class=select1 type=radio value=1 name=vybor></TD>
        <TD class=whiteLine width=1><img src=1.gif width=1 height=1></TD>
      <TD class=select4>170 ?</TD>
      <TD class=select4>17 ?</TD>
      <TD class=select4><input class=select4 type=radio value=4 name=vybor></TD>
        <TD class=whiteLine width=1><img src=1.gif width=1 height=1></TD>
    </TR>
    <TR align="center">
      <TD height=30 align="left"><STRONG>Ensembles / Gruppen bis 3 Personen</STRONG></TD>
         <TD class=whiteLine width=1><img src=1.gif width=1 height=1></TD>
     <TD class=select2>170 ?</TD>
      <TD class=select2>17 ?</TD>
      <TD class=select2><input class=select2 type=radio value=2 name=vybor></TD>
        <TD class=whiteLine width=1><img src=1.gif width=1 height=1></TD>
      <TD class=select5>230 ?</TD>
      <TD class=select5>21 ?</TD>
      <TD class=select5><input class=select5 type=radio value=5 name=vybor></TD>
        <TD class=whiteLine width=1><img src=1.gif width=1 height=1></TD>
    </TR>
    <TR align="center">
      <TD height=30 align="left"><STRONG>Ensembles / Gruppen ab 4 Personen</STRONG></TD>
         <TD class=whiteLine width=1><img src=1.gif width=1 height=1></TD>
     <TD class=select3>230 ?</TD>
      <TD class=select3>21 ?</TD>
      <TD class=select3><input class=select3 type=radio value=3 name=vybor></TD>
        <TD class=whiteLine width=1><img src=1.gif width=1 height=1></TD>
      <TD style=background-color:#ead5a8 class=select6>380 ?</TD>
      <TD style=background-color:#ead5a8 class=select6>27 ?</TD>
      <TD style=background-color:#ead5a8 class=select6>
         <input class=select6 type=radio value=6 name=vybor></TD>
        <TD class=whiteLine width=1><img src=1.gif width=1 height=1></TD>
    </TR>
  </TBODY>
</TABLE>
<br><br>... <!--здесь желательно иметь пару пустых строчек таблицы, на которых будет гаситься подсветка групп.
    при быстрых движениях мыши она не гасится; сильнее заметно в FF-->
</td></tr></table>

Ссылка на демонстрацию работы - http://js2.ru/example/JsPrimeryCode-58.htm .

Это сообщение отредактировал(а) 12345c - 3.3.2008, 18:06

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »