powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Таблица в две колонки
8 сообщений из 8, страница 1 из 1
Таблица в две колонки
    #34543009
ryasal
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Необходимо следующее в HTML:
Таблица занимает лишь половину страницы (левую), количество строк таблицы не умещается в одну страницу.Необходимо разместить таблицу на листе так, чтобы при достижении конца страницы, дальнейшие ее строки размещались на другой половине листа (правой). Т.е. должно получиться следующее:

----------------- Начало страницы 1-----------------

------------------------ * ----------------------------
1 | кол1 1 | кол2 | * 4 | кол1 1 | кол2 |
------------------------ * ----------------------------
2 | кол1 1 | кол2 | * 5 | кол1 1 | кол2 |
------------------------ * ----------------------------
3 | кол1 1 | кол2 | * 6 | кол1 1 | кол2 |
------------------------ * ----------------------------

----------------- Конец страницы 1-----------------



----------------- Начало страницы 2-----------------

------------------------ * ----------------------------
7 | кол1 1 | кол2 | * 10 | кол1 1 | кол2 |
------------------------ * ----------------------------
8 | кол1 1 | кол2 | * 11 | кол1 1 | кол2 |
------------------------ * ----------------------------
9 | кол1 1 | кол2 | * 12 | кол1 1 | кол2 |
------------------------ * ----------------------------

----------------- Конец страницы 2-----------------

Есть подозрение что это можеть быть реализовано в CSS. Или другие способы. Помогите пожалуйста
...
Рейтинг: 0 / 0
Таблица в две колонки
    #34543229
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
В броузерах нет логического деления на страницы, поэтому задавать поведение элементов в контексте "страницы" невозможно. Это просто лента с пейджбрейками.

Чтобы это сделать придется с сервера забирать страницу без текста, а потом выполнять примерно такой алгоритм:
1 добавить див высотой 21x29см (страница А4) с overflow:auto
2 добавить в див код: <table height=100% width=100%><td width=50%><table class=left></table></td><td><table class=right></table></td></table>
3 получить аяксом данные для строки (или в самом начале получить весь текст, а здесь взять нужный кусок)
4 вставить строку в левую таблицу
5 сравнить высоту таблицы и дива, если таблица>дива, то убрать строку, добавить ее в правую, и далее работать с правой
6 проверить, не стала ли и правая таблица выше дива. Если стала, повторить с пункта 1
7 и так до конца текста.
...
Рейтинг: 0 / 0
Таблица в две колонки
    #34544585
ryasal
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
по поводу пункта 5:

5 сравнить высоту таблицы и дива, если таблица>дива, то убрать строку, добавить ее в правую, и далее работать с правой

каким образом сравнить высоту таблицы и дива?
...
Рейтинг: 0 / 0
Таблица в две колонки
    #34544812
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
div.clientHeight==table.scrollHeight

И у дива вместо overflow:auto лучше написать hidden, чтобы скроллбары не мигали.
...
Рейтинг: 0 / 0
Таблица в две колонки
    #34544964
ryasal
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Я так понимаю, это сравнение на каком то языке? на каком?

Наверное надо расширить описание задачи:
данные организованы в виде XML, затем с помощью XSLT преобразования из этого XML получается HTML.
При этом возможно использование CSS, JavaScript, возможно других скриптовых языков.

На каком языке вот это сравнение div.clientHeight==table.scrollHeight?
...
Рейтинг: 0 / 0
Таблица в две колонки
    #34545069
Фотография SkyLight
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
жабаскрипт
...
Рейтинг: 0 / 0
Таблица в две колонки
    #34554697
ryasal
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Код: plaintext
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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  
    <TITLE>Разрыв страницы</TITLE>
	
    <script language="JavaScript">
	function coldivide(){
	if (div.clientHeight > leftTable.scrollHeight)
	return ("div > leftTable | div.clientHeight="+ div.clientHeight + " | leftTable.scrollHeight= "  + leftTable.scrollHeight);
	if (div.clientHeight < leftTable.scrollHeight)
	return ("div < leftTable");	
    if (div.clientHeight == leftTable.scrollHeight)
	return ("div == leftTable");		
	}
	</script>	
	
	<STYLE type="text/css">
	  DIV {width: 171mm;
			height: 258mm;
			overflow: visible;			
	  }
	</STYLE>	
	
  </HEAD>
  
  <BODY>  	
  
   <DIV id = "div">
	
    <TABLE height = "100%" width = "100%" border = "1" id = "mainTable">
		
	  <td width= 50 %>
		<table class=left id = "leftTable">						
		<tr> 1 </tr>		
		<tr> 1 </tr>
		<tr> 1 </tr>		
	    <script language="JavaScript">alert(coldivide())</script>				
		<tr> 10000000000 </tr>					
		<tr> 1 </tr>
		<tr> 1 </tr>		
		<tr> 1 </tr>	
		<tr> 1 </tr>
		<tr> 1 </tr>				
		</table> 
	  </td>
	  
	  <td>	  
	    <table class=right>		
		</table>
	  </td>
	  
	  </TABLE>	
	  
	</DIV>
	
  </BODY>
  
</HTML>

Пjсле загрузки страницы сообщение: div > leftTable | div.clientHeight=975 | leftTable.scrollHeight=0.
leftTable.scrollHeight всегда = 0, куда бы я не вставлял скрипт. clientHeight для leftTable также всегда равен 0. Как определить высоту таблицы?
...
Рейтинг: 0 / 0
Таблица в две колонки
    #34555216
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
"А вы друзья как ни садитесь, все в музыканты не годитесь" (с) Извини, не удержался =)
Не важно куда вставишь скрипт, из-за стиля overflow: visible див будет растягиваться вслед за таблицей. Я что, просто так заострял на этом внимание?
Вот готовый пример на vbs, там проще работать со строками.

Код: plaintext
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.
70.
71.
72.
73.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<style>
	div {width: 171mm;
			height: 50mm;
			overflow: hidden;
			border: black 2px solid;
			display:block;
	}
	
	td {border: black 1px solid}
</style>
<script>/*r1c1, r1c2;	r2c1, r2c2;	r3c1, r3c2;	r4c1, r4c2;	r5c1, r5c2;	r6c1, r6c2;
	r7c1, r7c2;	r8c1, r8c2;	r9c1, r9c2;	r10c1, r10c2;	r12c1, r12c2;	r13c1, r13c2;
	r14c1, r14c2;	r15c1, r15c2;	r16c1, r16c2;	r17c1, r17c2;	r18c1, r18c2;	r19c1, r19c2;
	r20c1, r20c2;	r21c1, r21c2;	r22c1, r22c2;	r23c1, r23c2;	r24c1, r24c2;	r25c1, r25c2;
	r26c1, r26c2;	r27c1, r27c2;	r28c1, r28c2;	r29c1, r29c2;	r30c1, r30c2;	r31c1, r31c2;
	r32c1, r32c2;	r33c1, r33c2;	r34c1, r34c2;	r35c1, r35c2;	r36c1, r36c2;	r37c1, r37c2;
	r38c1, r38c2;	r39c1, r39c2;	r40c1, r40c2;	r41c1, r41c2;	r42c1, r42c2;	r43c1, r43c2;
	r44c1, r44c2;	r45c1, r45c2;	r46c1, r46c2;	r47c1, r47c2;	r48c1, r48c2;	r49c1, r49c2;
	r50c1, r50c2;	r51c1, r51c2;	r52c1, r52c2;	r53c1, r53c2;	r54c1, r54c2;	r55c1, r55c2;
	r56c1, r56c2;	r57c1, r57c2;	*/
	</script>
<script language=vbscript>
	sub BuildList()
		on error resume next
		dim text,lines,cols,x
		dim div, ctbl, tr, td
		text = replace(Replace(Replace(document.scripts( 0 ).text,"/*",""),"*/",""),vbCrLf,"")
		lines = Split(text,";")
		set div = CreateDiv()
		set ctbl=div.children( 0 ).children( 0 ).children( 0 ).children( 0 ).children( 0 )
		for x= 0  to UBound(lines)
			cols=split(lines(x),",")
			set tr=ctbl.children( 0 ).appendChild(document.createElement("tr"))
			set td=tr.appendChild(document.createElement("td"))
			td.innerText = cols( 0 )
			set td=tr.appendChild(document.createElement("td"))
			td.innerText = cols( 1 )
			if div.clientHeight- 30 <=ctbl.scrollHeight then
				ctbl.removeChild tr
				if ctbl.className="left" then
					set ctbl = div.children( 0 ).children( 0 ).children( 0 ).children( 1 ).children( 0 )
				else
					set div = CreateDiv()
					set ctbl=div.children( 0 ).children( 0 ).children( 0 ).children( 0 ).children( 0 )
				end if
				x=x- 1 
			end if
		next
	end sub
	
	function CreateDiv()
		dim div, tr, td
		set div=document.createElement("div")
		set tr = document.body.children( 0 ).children( 0 ).appendChild(document.createElement("tr"))
		set td = tr.appendChild(document.createElement("td"))
		td.appendChild div
		div.innerHTML = "<table height=100% width=100% border=1	><td width=50% valign=top><table class=left></table></td><td valign=top><table class=right></table></td></table>"
		set CreateDiv = div
	end function
</script>
</head>
<body>
	<table><tr><td>
	<input type=button value=Тынц onclick="vbscript:BuildList()">
	</td></tr>
	</table>
</body>
</html>
...
Рейтинг: 0 / 0
8 сообщений из 8, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Таблица в две колонки
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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