Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   table.cells select(from,to) (https://javascript.ru/forum/dom-window/5107-table-cells-select.html)

Paguo-86PK 16.09.2009 02:34

table.cells select(from,to)
 
Всё просто: Необходимо выделить в таблице ячейки, будто их выделил пользователь.
А так же и обратно: Узнать, какие ячейки выделял пользователь.

Есть вариант с onmousedown/onmouseup и window.event.srcElement.cellIndex и т.п. Но это, сами понимаете, очень криво...

А вот как выделить скриптом группу ячеек - вопрос сложнее. Подсветка не годится: Нужно, чтобы пользователь мог реально перетащить выделение куда-нибудь...

P.S.: Пишу редактор Dump'а со встроенным Disassembler. Функционирует нормально, проблемы остались в интерфейсе: Не знаю, как узнать какую часть кода в Dump'е выделили и куда перетащили...

На данный момент нашлась:
function SelectTarget(target, from,to) {
var rng, sel;
 if ( document.createRange ) {
  rng = document.createRange();
  rng.selectNode( target )
  sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange( rng );
 } else {
  var rng = document.body.createTextRange();
  rng.moveToElementText( target );
  rng.moveStart("word", from);
  rng.moveEnd("word", to );
  rng.select();
 }
}
Похоже, осталось лишь разобраться с определением выделенных ячеек.:)

Спасибо!

e1f 16.09.2009 11:06

Для DOM можно почитать тут. Для ИЕ надо гуглить :)

Octane 16.09.2009 12:07

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
window.onload = function() {
	var table = document.getElementById("table");
	var selStart = table.tBodies[0].rows[0].cells[4];
	var selEnd = table.tBodies[0].rows[3].cells[0];
	var range;
	var ie /*@cc_on = true @*/;
	if(ie) {
		range = document.selection.createRange();
		var range2 = range.duplicate();
		range.moveToElementText(selStart);
		range2.moveToElementText(selEnd);
		range.setEndPoint("EndToEnd", range2);
		range.select();

	} else {
		range = document.createRange();
		range.selectNodeContents(selEnd);
		range.setStart(selStart, 0);
		var selection = window.getSelection();
		selection.removeAllRanges();
		selection.addRange(range);
	}
};
</script>
</head>
<body>
	<table id="table" summary="">
		<tbody>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>
			<tr>
				<td>6</td>
				<td>7</td>
				<td>8</td>
				<td>9</td>
				<td>10</td>
			</tr>
			<tr>
				<td>11</td>
				<td>12</td>
				<td>13</td>
				<td>14</td>
				<td>15</td>
			</tr>
			<tr>
				<td>16</td>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
			</tr>
		</tbody>
	</table>
</body>
</html>
Range, TextRange и Selection

Paguo-86PK 17.09.2009 00:54

Цитата:

Сообщение от e1f (Сообщение 30247)
Для DOM можно почитать тут. Для ИЕ надо гуглить :)

Спасибо!:write:
Цитата:

Сообщение от Octane (Сообщение 30258)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
...
<body>
	<table id="table" summary="">
		<tbody>
...
		</tbody>
	</table>
</body>
</html>
Range, TextRange и Selection

Спасибо большое!

Какрас-таки там я и нашёл приведённый мною способ...

А вот <tbody>...</tbody> я никогда на страницах не использовал. Он так обязателен? По стандартам W3C?

Kolyaj 17.09.2009 00:57

Цитата:

Сообщение от Paguo-86PK
А вот <tbody>...</tbody> я никогда на страницах не использовал. Он так обязателен?

Если не указать, все равно появится.

Apple 12.02.2011 01:34

А наоборот, как узнать какие ячейки таблицы выделил пользователь?


UPD.: вопрос снимаю, свою (чуть более узкую) задачу решил.


Часовой пояс GMT +3, время: 12:26.