ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Таблица с не полным текстом
8 сообщений из 8, страница 1 из 1
Таблица с не полным текстом
    #38655997
akimov_aleks
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
akimov_aleks
Участник
Добрый день подскажите плиз в какую сторону капать чтоб реализовать задачу.
есть таблица с ней длинный текст и получается не красивая. как сделать чтоб текст был коротким а при наведении мышки или щелчке отображалось полный текст
...
Рейтинг: 0 / 0
29.05.2014, 15:47
| Ответить | Цитировать | Написать  
Таблица с не полным текстом
    #38656127
carrotik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
carrotik
Участник
akimov_aleksДобрый день подскажите плиз в какую сторону капать чтоб реализовать задачу.
есть таблица с ней длинный текст и получается не красивая. как сделать чтоб текст был коротким а при наведении мышки или щелчке отображалось полный текст

...например:
http://getbootstrap.com/javascript/#popovers
...
Рейтинг: 0 / 0
29.05.2014, 16:46
| Ответить | Цитировать | Написать  
Таблица с не полным текстом
    #38656885
akimov_aleks
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
akimov_aleks
Участник
возможно ли скрыть часть текста ячейки
допустим текст (Добро пожаловать в форум) а нужно чтоб отображалось в ячейки (Добро )
при наведении мышки видим (Добро пожаловать в форум)
...
Рейтинг: 0 / 0
30.05.2014, 12:19
| Ответить | Цитировать | Написать  
Таблица с не полным текстом
    #38657070
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
akimov_aleks,

как вариант, в каждую ячейку - небольшой ширины div , со свойством overflow: hidden Тогда в ячейке будет отображаться короткий текст.
Ну а при наведении/щелчке мышью показывать полный текст.
...
Рейтинг: 0 / 0
30.05.2014, 14:26
| Ответить | Цитировать | Написать  
Таблица с не полным текстом
    #38657701
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
akimov_aleks,
 
так пойдет?   (подсказка всплывает, если текст не помещается в ячейке)
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
<!DOCTYPE html>
<html>
<head> <meta charset="windows-1251">
<style>
* {font:10pt arial,sans-serif;}
table {border-collapse:collapse;}
#data td,th {
	border:1px solid #c0c0c0;
	padding:0;
}
th {
	background:#4682B4;
	color:#fff;
	font-weight:700;
	padding:4px;
}
#data td div {
	width:105px;
	height:17px;
	padding:2px 4px;
	word-break:break-all;
	overflow:hidden;
}
#MyHint {
	background:#FAFAD2;
	height:17px;
	padding:2px 4px;
	border:1px solid #c0c0c0;
	position:absolute;
	display:none;
}
</style>
</head>
<body>
<table id="data">
	<tr> <th>The Asylum</th> <th>20th Century Fox</th> <th>Просто так</th> </tr>
	<tr> <td><div>Король затерянного мира</div></td> <td><div>Star Wars (части 1-6)</div></td> <td><div>Оперативно-тактическое решение</div></td> </tr>
	<tr> <td><div>Терминаторы</div></td> <td><div>Аватар</div></td> <td><div>Выполнение поставленных боевых задач</div></td></tr>
	<tr> <td><div>Угроза из прошлого</div></td> <td><div>Люди икс</div></td> <td><div>Защитить исследовательский центр Парения</div></td> </tr>
	<tr> <td><div>Андроид-полицейский</div></td> <td><div>Хищник</div></td> <td><div>Освободить комплекс по добыче воды</div></td> </tr>
	<tr> <td><div>Помпеи: апокалипсис</div></td> <td><div>Секретные материалы</div></td> <td><div>Dark Reign - 2</div></td> </tr>
</table>
<div id="MyHint"></div>
</body>

<script>
var tbl = document.getElementById('data');
var MyHint = document.getElementById('MyHint');

tbl.onmouseover = function(e) {
	e = e || event;
	var el = e.target || e.srcElement;
	if (el.tagName.toUpperCase() != 'DIV') {return;}

	var box = el.getBoundingClientRect();
	MyHint.style.left = box.left - 1 + 'px';
	MyHint.style.top = box.top - 1 + 'px';
	MyHint.innerHTML = el.innerHTML;
	MyHint.style.display = 'block';
	if (MyHint.offsetWidth < el.offsetWidth) {MyHint.style.display = 'none';}
}

MyHint.onmouseout = function(e) {
	e = e || event;
	var el = e.target || e.srcElement;
	MyHint.style.display = 'none';
}
</script>
</html>

...
Рейтинг: 0 / 0
31.05.2014, 15:34
| Ответить | Цитировать | Написать  
Таблица с не полным текстом
    #38657814
akimov_aleks
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
akimov_aleks
Участник
user89akimov_aleks,
 
так пойдет?   (подсказка всплывает, если текст не помещается в ячейке)
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
<!DOCTYPE html>
<html>
<head> <meta charset="windows-1251">
<style>
* {font:10pt arial,sans-serif;}
table {border-collapse:collapse;}
#data td,th {
	border:1px solid #c0c0c0;
	padding:0;
}
th {
	background:#4682B4;
	color:#fff;
	font-weight:700;
	padding:4px;
}
#data td div {
	width:105px;
	height:17px;
	padding:2px 4px;
	word-break:break-all;
	overflow:hidden;
}
#MyHint {
	background:#FAFAD2;
	height:17px;
	padding:2px 4px;
	border:1px solid #c0c0c0;
	position:absolute;
	display:none;
}
</style>
</head>
<body>
<table id="data">
	<tr> <th>The Asylum</th> <th>20th Century Fox</th> <th>Просто так</th> </tr>
	<tr> <td><div>Король затерянного мира</div></td> <td><div>Star Wars (части 1-6)</div></td> <td><div>Оперативно-тактическое решение</div></td> </tr>
	<tr> <td><div>Терминаторы</div></td> <td><div>Аватар</div></td> <td><div>Выполнение поставленных боевых задач</div></td></tr>
	<tr> <td><div>Угроза из прошлого</div></td> <td><div>Люди икс</div></td> <td><div>Защитить исследовательский центр Парения</div></td> </tr>
	<tr> <td><div>Андроид-полицейский</div></td> <td><div>Хищник</div></td> <td><div>Освободить комплекс по добыче воды</div></td> </tr>
	<tr> <td><div>Помпеи: апокалипсис</div></td> <td><div>Секретные материалы</div></td> <td><div>Dark Reign - 2</div></td> </tr>
</table>
<div id="MyHint"></div>
</body>

<script>
var tbl = document.getElementById('data');
var MyHint = document.getElementById('MyHint');

tbl.onmouseover = function(e) {
	e = e || event;
	var el = e.target || e.srcElement;
	if (el.tagName.toUpperCase() != 'DIV') {return;}

	var box = el.getBoundingClientRect();
	MyHint.style.left = box.left - 1 + 'px';
	MyHint.style.top = box.top - 1 + 'px';
	MyHint.innerHTML = el.innerHTML;
	MyHint.style.display = 'block';
	if (MyHint.offsetWidth < el.offsetWidth) {MyHint.style.display = 'none';}
}

MyHint.onmouseout = function(e) {
	e = e || event;
	var el = e.target || e.srcElement;
	MyHint.style.display = 'none';
}
</script>
</html>




огромное вам СПАСИБО .
...
Рейтинг: 0 / 0
31.05.2014, 22:20
| Ответить | Цитировать | Написать  
Таблица с не полным текстом
    #38658156
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
akimov_aleks,

кстати, функцию MyHint.onmouseout можно сократить до одной строки, и она будет выглядеть так:
Код: javascript
1.
2.
3.
MyHint.onmouseout = function(e) {
	MyHint.style.display = 'none';
}
...
Рейтинг: 0 / 0
01.06.2014, 22:17
| Ответить | Цитировать | Написать  
Таблица с не полным текстом
    #38939752
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
 
Более универсальный вариант
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
<!DOCTYPE html>
<html>
<head> <meta charset="windows-1251">
<title>Hint подсказка всплывает, если текст не помещается в ячейке</title>
<style>
* {font:10pt arial,sans-serif;}
table {border-collapse:collapse;}
#data td,th {
	border:1px solid #c0c0c0;
	padding:2px 4px;
}
th {
	background:#4682B4;
	color:#fff;
	font-weight:700;
}
#data td a {
	display:block;
	max-width:105px;
	white-space:nowrap;
	overflow:hidden;
}
#MyHint {
	background:#FAFAD2;
	border:1px solid #c0c0c0;
	position:absolute;
	display:none;
}
</style>
</head>
<body onload="ShowLongText('data')">
<table id="data">
	<tr> <th>The Asylum</th> <th>20th Century Fox</th> <th>Просто так</th> </tr>
	<tr> <td><a>Король затерянного мира</a></td> <td><a>Star Wars (части 1-6)</a></td> <td><a>Оперативно-тактическое решение</a></td> </tr>
	<tr> <td><a>Терминаторы</a></td> <td><a>Аватар</a></td> <td><a>Выполнение поставленных боевых задач</a></td></tr>
	<tr> <td><a>Угроза из прошлого</a></td> <td><a>Люди икс</a></td> <td><a>Защитить исследовательский центр Парения</a></td> </tr>
	<tr> <td><a>Андроид-полицейский</a></td> <td><a>Хищник</a></td> <td><a>Освободить комплекс по добыче воды</a></td> </tr>
	<tr> <td><a>Помпеи: апокалипсис</a></td> <td><a>Секретные материалы</a></td> <td><a>Dark Reign - 2</a></td> </tr>
</table>
<div id="MyHint"></div>

<script>
function gid(idx) {return document.getElementById(idx);}

function ShowLongText(idx) {
	var tbl = gid(idx);
	var MyHint = gid('MyHint');

	tbl.onmouseover = function(e) {
		e = e || event;
		var el = e.target || e.srcElement;
		if (el.tagName.toUpperCase() != 'A') {return;}

		var st = getComputedStyle(el.parentNode);
		MyHint.style.paddingTop = st.paddingTop; MyHint.style.paddingBottom = st.paddingBottom;
		MyHint.style.paddingLeft = st.paddingLeft; MyHint.style.paddingRight = st.paddingRight;
		var box = el.getBoundingClientRect();
		MyHint.style.left = box.left - parseInt(st.paddingLeft) - 1 + 'px';
		MyHint.style.top = box.top - parseInt(st.paddingTop) - 1 + 'px';
		MyHint.innerHTML = el.innerHTML;
		MyHint.style.display = 'block';
		if (MyHint.offsetWidth < el.offsetWidth) {MyHint.style.display = 'none';}
	}
	MyHint.onmouseout = function(e) {MyHint.style.display = 'none';}
}
</script>
</body>
</html>

...
Рейтинг: 0 / 0
18.04.2015, 08:11
| Ответить | Цитировать | Написать  
8 сообщений из 8, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Таблица с не полным текстом
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38656885&tid=1446080]:
 0ms
get settings:
 9ms
get forum list:
 18ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 176ms
get topic data:
 7ms
get forum data:
 2ms
get page messages:
 30ms
get tp. blocked users:
 1ms
others: 240ms
total:  489ms
созд. / загр.: 489ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]