[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Возможно ли такое выделение
Форум PHP программистов > JavaScript
Strannik
17.03.2009 - 12:30
Здраствуйте. Недавно возник вопрос.

Допустим у нас есть таблица 50 строк на 50 столбцов.
Возможно ли выделение мышкой нескольких ячеек, чтобы они при выделении меняли цвет , а их id отображались чуть ниже таблицы(или сбоку - без разницы в принципе)?

А также возможно ли зная id ячеек выделить их одним цветом?

Если кто знает как это сделать подс кажите, потому что сам сутки в нете просидел, но инфы по данному вопросу не нашел(...



Спустя 17 минут, 55 секунд (17.03.2009 - 11:48) waldicom написал(а):
Если давать каждой ячейке (td) свой айди и использовать событие onclick, то тогда наверное можно.

Спустя 45 минут, 19 секунд (17.03.2009 - 12:34) sergeiss написал(а):
Цитата (waldicom @ 17.03.2009 - 11:48)
Если давать каждой ячейке (td) свой айди и использовать событие onclick, то тогда наверное можно.

Меня вопрос тоже заинтересовал smile.gif Попробовал кое-чего...
onclick, также как и onmousedown помогает отловить нажатие. А вот где конечная ячейка выборки...
Я думал, что onmouseup (для ячейки) должно помочь - фигвам!

Только для таблицы onmouseup срабатывает. Но при этом не понятно, в какой ячейку мышУ отпустили.

Спустя 3 минуты, 46 секунд (17.03.2009 - 12:37) Strannik написал(а):
вот и мне пока не ясно. код на PHP который формирует дальнейшие ссылки придумать просто, а как указать для какой ячейки? сутки думал, не придумал(.

Спустя 1 минута, 38 секунд (17.03.2009 - 12:39) sergeiss написал(а):
Подожди... Ты на ПХП или на ДжаваСкрипт это хочешь???
Ежели выборка в браузере - то при чем тут ПХП?

Спустя 10 минут, 34 секунды (17.03.2009 - 12:50) Strannik написал(а):
php код срабатывает позднее-он к данному вопросу не имеет значения.
Данный вопрос нужно решить на JavaScript или на Ajax.
Просто я не знаю как написать.

Спустя 38 минут, 24 секунды (17.03.2009 - 13:28) waldicom написал(а):
Вот пример с помощью jquery только для одной td-шки

HTML
<table border="1">
<tr>
<td id="t1">1</td>
<td id="t2">2</td>
<td id="t3">3</td>
</tr>
</table>

<input id="b1" type="button"/>

<script>
$(document).ready(function(){
$('#t1').click(function(){
alert('1');
});
});
</script>

Спустя 16 минут, 27 секунд (17.03.2009 - 13:44) Strannik написал(а):
Я новичек на JavaScript пояните как работает приведеннный скрипт?
P.S.: в html он просто создает таблицу и кнопку, никаких действий не выполняет...

Спустя 1 минута, 47 секунд (17.03.2009 - 13:46) waldicom написал(а):
Цитата (Strannik @ 17.03.2009 - 11:44)
Я новичек на JavaScript пояните как работает приведеннный скрипт?
P.S.: в html он просто создает таблицу и кнопку, никаких действий не выполняет...

Необходимо подключить библиотеку jquery, чтобы пример заработал.
Читать тут: http://jquery.com/

Я привел пример с алертом, но естественно можно и поменять фон и вывести айди и прочее прочее...

пысы. необязательно делать с jquery, но с ней удобнее и быстрее.

Спустя 10 минут, 35 секунд (17.03.2009 - 13:57) sergeiss написал(а):
Для одной ячейки - это не то же самое, что для выделения ячеек. Для одной всё делается и так за 3 секунды smile.gif, безо всяких jquery.

Спустя 5 минут, 31 секунда (17.03.2009 - 14:02) waldicom написал(а):
Цитата (sergeiss @ 17.03.2009 - 11:57)
Для одной ячейки - это не то же самое, что для выделения ячеек. Для одной всё делается и так за 3 секунды smile.gif, безо всяких jquery.

Насчет выделения я понял так:
кликаем на ячейку - она меняет цвет и выводится её имя.
Я неправильно понял?

Спустя 3 минуты, 1 секунда (17.03.2009 - 14:05) Strannik написал(а):
мне для нескольких ячеек надо.

Спустя 6 минут, 1 секунда (17.03.2009 - 14:11) sergeiss написал(а):
Цитата (waldicom @ 17.03.2009 - 14:02)
Насчет выделения я понял так:
кликаем на ячейку - она меняет цвет и выводится её имя.
Я неправильно понял?

Автор изначально спросил так:

Цитата
Возможно ли выделение мышкой нескольких ячеек, чтобы.......

Спустя 4 минуты, 44 секунды (17.03.2009 - 14:16) sergeiss написал(а):
На мой взгляд, тут только такой вариант прокатит:
Сначала запоминаем, где было сделано первое нажатие, а затем заново кликаем в конце выборки.
И уже затем, зная угловые ячейки выборки, работать со всей выборкой. Там уже что хочешь делай: и цвет меняй, и текст создавай на основе данных из ячеек, и что угодно другое. Тут неважно будет, как выбрано: строка, строчка, или область.

Спустя 7 минут, 7 секунд (17.03.2009 - 14:23) Viking написал(а):
я бы покопал именно в сторону функций выделения явыскрипт, getSelection createRange там всякие

Спустя 14 минут, 59 секунд (17.03.2009 - 14:38) Alchemist написал(а):
Viking, фигню говоришь. Это же методы для работы с текстом. Какие нафиг "selection" и "range" у таблиц ?

Я сам давно уже не работал с event'ами, но если бы я пытался сделать что-то подобное, я бы пробовал либо "drag'n'drop", либо на уровне окна ловил бы координаты "mousedown" и "mouseup".

Спустя 24 минуты, 46 секунд (17.03.2009 - 15:03) Sylex написал(а):
onmousemove event

Спустя 15 минут, 19 секунд (17.03.2009 - 15:18) sergeiss написал(а):
Вот мой вариант, 100% рабочий smile.gif Проверенный, протестированный.

Кликаем в любой точке таблицы, потом в любой другой. И производится изменение свойств.
Кто не согласен - свой вариант в студию!!! smile.gif

HTML
<script language="javascript">
var selection_started=false;
var start_x;
var start_y;
function set_selection( id, x, y ) // скопировать таблицу в буфер обмена винды
{
if( !selection_started )
{
start_x=x;
start_y=y;
selection_started=true;
alert( 'Выборка начата' );
return;
}

var tab=document.getElementById( id );
var rows=tab.rows.length;
if( y < 0 || y > rows || start_y < 0 || start_y > rows) return;
var row;
var cols;

if( start_x > x ) { tmp_x=x; x=start_x; start_x=tmp_x; }
if( start_y > y ) { tmp_y=y; y=start_y; start_y=tmp_y; }

for( i=start_y; i <= y; i++)
{
row=tab.rows[ i ];
if( x < 0 || x > row.cells.length || start_x < 0 || start_y > rows ) return;

for( j=start_x; j<=x; j++)
{
row.cells[j].style="background-color:#cc0033";
}
}
selection_started=false;
alert( 'Выборка завершена' );
}

</script>

<body>
<table width="50%" border="1" id="tst_table" >
<tr>
<td id="td00" onclick="set_selection('tst_table', 0,0);" > 0 0 </td>
<td id="td10" onclick="set_selection('tst_table', 1,0);" > 1 0 </td>
<td id="td20" onclick="set_selection('tst_table', 2,0);" > 2 0 </td>
</tr>
<tr>
<td id="td01" onclick="set_selection('tst_table', 0,1);" > 0 1 </td>
<td id="td11" onclick="set_selection('tst_table', 1,1);" > 1 1 </td>
<td id="td21" onclick="set_selection('tst_table', 2,1);" > 2 1 </td>
</tr>
<tr>
<td id="td02" onclick="set_selection('tst_table', 0,2);" > 0 2 </td>
<td id="td12" onclick="set_selection('tst_table', 1,2);" > 1 2 </td>
<td id="td22" onclick="set_selection('tst_table', 2,2);" > 2 2</td>
</tr>

</table>
</body>


PS. При создании такой таблицы на ПХП заложить вызов этой функции - элементарно.

Спустя 9 минут, 59 секунд (17.03.2009 - 15:28) waldicom написал(а):
Что будет, если мне надо выделить только ячейки a1, a3 и b5 (координаты ячеек как например в таблице excel )

Спустя 22 минуты, 22 секунды (17.03.2009 - 15:51) sergeiss написал(а):
Цитата (waldicom @ 17.03.2009 - 15:28)
Что будет, если мне надо выделить только ячейки a1, a3 и b5 (координаты ячеек как например в таблице excel )

Для этого надо функцию переписывать. Моя функция берет непрерывный диапазон.
Да и, собственно, я ее "на коленке" написал, из другой похожей функции сделал. Для реальных нужд ее надо "доводить до ума".
Я показал только сам принцип, дальше пусть модифицирует тот, кому это нужно.

Спустя 3 часа, 16 минут, 54 секунды (17.03.2009 - 19:08) Strannik написал(а):
Цитата (sergeiss @ 17.03.2009 - 12:18)
Вот мой вариант, 100% рабочий smile.gif Проверенный, протестированный.

Кликаем в любой точке таблицы, потом в любой другой. И производится изменение свойств.
Кто не согласен - свой вариант в студию!!! smile.gif

HTML
<script language="javascript">
var selection_started=false;
var start_x;
var start_y;
function set_selection( id, x, y ) // скопировать таблицу в буфер обмена винды
{
if( !selection_started )
{
  start_x=x;
  start_y=y;
  selection_started=true;
  alert( 'Выборка начата' );
  return;
}

var tab=document.getElementById( id );
var rows=tab.rows.length;
if( y < 0 || y > rows || start_y < 0 || start_y > rows) return;
var row;
var cols;

if( start_x > x ) { tmp_x=x; x=start_x; start_x=tmp_x; }
if( start_y > y ) { tmp_y=y; y=start_y; start_y=tmp_y; }

for( i=start_y; i <= y; i++)
{
  row=tab.rows[ i ];
  if( x < 0 || x > row.cells.length || start_x < 0 || start_y > rows ) return;
 
  for( j=start_x; j<=x; j++)
  {
  row.cells[j].style="background-color:#cc0033";
  }
}
selection_started=false;
alert( 'Выборка завершена' );
}

</script>

<body>
<table width="50%" border="1" id="tst_table" >
<tr>
  <td id="td00" onclick="set_selection('tst_table', 0,0);" > 0 0 </td>
  <td id="td10" onclick="set_selection('tst_table', 1,0);" > 1 0 </td>
  <td id="td20" onclick="set_selection('tst_table', 2,0);" > 2 0 </td>
</tr>
<tr>
  <td id="td01" onclick="set_selection('tst_table', 0,1);" > 0 1 </td>
  <td id="td11" onclick="set_selection('tst_table', 1,1);" > 1 1 </td>
  <td id="td21" onclick="set_selection('tst_table', 2,1);" > 2 1 </td>
</tr>
<tr>
  <td id="td02" onclick="set_selection('tst_table', 0,2);" > 0 2 </td>
  <td id="td12" onclick="set_selection('tst_table', 1,2);" > 1 2 </td>
  <td id="td22" onclick="set_selection('tst_table', 2,2);" > 2 2</td>
</tr>

</table>
</body>


PS. При создании такой таблицы на ПХП заложить вызов этой функции - элементарно.

при щелчке в любом месте таблицы - пишет сообщение выбрка начата, а потом ничего не пишет(сообщения выборка завершена нет). Что не так?

Спустя 3 часа, 35 минут, 53 секунды (17.03.2009 - 22:43) sergeiss написал(а):
Ты знаешь... В Опере этот код работает, а в Эксплорере - нет.

Вот так попробуй - проверил и в Опере, и в 7-м Эксплорере. Заодно и пару ошибок исправил по ходу дела, в провере корректности граничных условий smile.gif.

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

HTML
<script language="javascript">
var selection_started=false;
var start_x;
var start_y;
function set_selection( id, x, y )
{
if( !selection_started )
{
start_x=x;
start_y=y;
selection_started=true;
alert( 'Выборка начата' );
return;
}

var tab=document.getElementById( id );
var rows=tab.rows.length;
if( y < 0 || y > rows || start_y < 0 || start_y > rows) return;
var row;
var cols;

if( start_x > x ) { tmp_x=x; x=start_x; start_x=tmp_x; }
if( start_y > y ) { tmp_y=y; y=start_y; start_y=tmp_y; }

var txt='';
// alert( 'test' );
for( i=start_y; i <= y; i++)
{
row=tab.rows[ i ];
if( x < 0 || x > row.cells.length || start_x < 0 || start_x > row.cells.length ) return;
for( j=start_x; j<=x; j++)
{
txt += ' ('+i+','+j+')';
}
}
selection_started=false;
document.getElementById( 'info' ).value=txt;
alert( 'Выборка завершена' );
}

</script>

<body>
<table width="50%" border="1" id="tst_table" >
<tr>
<td id="td00" onclick="set_selection('tst_table', 0,0);" > 0 0 </td>
<td id="td10" onclick="set_selection('tst_table', 1,0);" > 1 0 </td>
<td id="td20" onclick="set_selection('tst_table', 2,0);" > 2 0 </td>
</tr>
<tr>
<td id="td01" onclick="set_selection('tst_table', 0,1);" > 0 1 </td>
<td id="td11" onclick="set_selection('tst_table', 1,1);" > 1 1 </td>
<td id="td21" onclick="set_selection('tst_table', 2,1);" > 2 1 </td>
</tr>
<tr>
<td id="td02" onclick="set_selection('tst_table', 0,2);" > 0 2 </td>
<td id="td12" onclick="set_selection('tst_table', 1,2);" > 1 2 </td>
<td id="td22" onclick="set_selection('tst_table', 2,2);" > 2 2</td>
</tr>

</table>
<input type="text" id="info" />
</body>


Эксплорер вот эту строчку
HTML
row.cells[j].style="background-color:#cc0033";
не захотел понять.

Спустя 55 минут, 2 секунды (17.03.2009 - 23:38) Strannik написал(а):
теперь все нормально. только последний вопрос.- допустим мы выбрали 3 элемента, в строке написало их id. А как их узнать? т.е написать дальнеюшую функцию уже только для выбранных ячеек.
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2025 Invision Power Services, Inc.