Препроводительная ведомость или не стоит связываться с бухгалтерией. Особенно если у вас их четыре.

По заявке водителям были нерешенные вопросы, решения на которые в силу недостатка знаний было проблематично реализовать. Изучать же что-то пытаясь довести до совершенства проект, который используется парой человек, да и писался в первую очередь для себя — очень скучное занятие.

Хватало более актуальных вопросов, например таких:

У нас 60 торговых объектов, у которых 4 юрлица со своими бухгалтериями. Они все сдают выручки в банки, причем разные. При сдаче выручки в банк необходимо печатать препроводительную ведомость. В перспективе у нас планируется перевод на линукс всего что только возможно. Т.е. те документы что есть сейчас, работать не будут. Более того сейчас абсолютно неунифицированный формат ведомости. Все они написаны в экселе, есть торговые объекты где используется libreoffice под который я переписал эту самую препроводительную(например сумму прописью). Периодически вносятся какие-то изменения, где-то остается старый образец, где-то заведующий торговым объектом по глупости заблокировал ячейку ввода или еще что. В общем весь этот бред почему-то падал на техническую поддержку. И даже когда был разработал унифицированный шаблон и выдан всем бухгалтериям, проблема не ушла. Итак, было решено перевести эту часть в веб. Ну или точнее говоря написать первый более менее что-то из себя представляющий проект.

Имея некоторое представление о структуре DOM первым делом я сел и составил план. Он был таков:
1)препроводительная ведомость состоит из лицевой и тыльной части, при этом каждую из них можно условно поделить на три половинки листа А4. Каждая из этих трех «половинок» лицевой стороны имеет в своей структуре один и тот же шаблон. Две «половинки» тыльной стороны имеют схожий между собой шаблон, третья значительно отличается. Итого мне нужно создать 3 части лицевой стороны, которые будут управляться одним файлом стилей. И 2 части тыльной, которые будут управляться другим файлом стилей. Чтобы не плодить эти самые файлы, было решено использовать два: для лицевой и тыльной стороны. Т.о. DOM должен имет в каждой из половинок элементы с одинаковыми идентификаторами.
Все эти «половинки» будут склеены в одну страничку путем вставки в нее фреймов.
2)имея опыт некрасивой работы с пользователем с помощью генерации страницы бэкэндом и понимая что бэкэнд перекладывает нагрузку с браузера на сервер, было решено по максимуму использовать javascript, который будет обновлять элементы DOM. бэкэнд же будет просто отдавать данные из базы и позволит их менять при необходимости. Скорее случайно, но отметив на будущее, понял что не ошибся с п.1 ведь, присвоив элементом DOM одноименные идентификаторы в последствии проще с ними работать путем копипаста кусков кода.
3)были оценены все поля, которые должны быть динамическими. Каждый раз изменялось количество купюр, а также номер сумки. Также каждому торговому объекту необходимо было изменять 6 полей(позже оказалось, что достаточно было бы и пяти) — юрлицо, торговый объект, дебет, кредит, банк получатель. Эти настройки должны были быть вынесены в отдельную кнопку.

для понимания, внешний вид препроводительной:

4)В ходе бета-тестирования были внесены предложения: добавить возможность менять дату, а также сохранять номер препроводительной из предыдущего значения.

5)Кроссплатформенность.

Итак, начали с того что накидали в макромедии два шаблона(лицевая и обратная сторона). Почему в макромедии — хз, просто она уже стояла, а как в ней работать я уже честно говоря не помнил, да и в другом ничем не работал. До сих пор пишу большую часть в notepad++. Ну как накидали. С обратным шаблоном проблем не было, а вот с лицевым оказалось муторно. Вышло под сотку div-ов. Ну да, в качестве изучения, да и вообще было решено делать все от начала до конца блоками. Общий вид был таков:

Показать

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<TITLE>Препроводительная ведомость</TITLE><link rel="stylesheet" href="prepro.css" type="text/css">
<style type="text/css">
<!--
.style1 {font-size: 14px}
.style2 {
	font-size: 14;
	font-weight: bold;
}
.style3 {
	font-size: 16px;
	font-weight: bold;
}
-->
</style>
</HEAD>
<div class="form">
 
<div id="text1">1-ый экз.</div> 
 
<div id="text2"><div><strong>ПРЕПРОВОДИТЕЛЬНАЯ ВЕДОМОСТЬ №</strong></div>
</div>
<div id="text3"><div><strong>3124231412</strong></div>
</div>
<div id="text4"><div>0402090005</div>
</div>
 
<div id="text5"><strong>к сумке с денежной выручкой</strong></div>
 
<div id="text6"><div><strong>17 января 2017г.</strong></div>
</div>
<div id="text7"><div>ДЕБЕТ</div>
</div>
<div id="text8"><div>Сумма</div>
</div>
 
<div id="text9"><div>От(кого)</div>
</div>
<div id="text10"><div><strong>Аптека №1 ООО "Не Ска"</strong></div>
</div>
<div id="text11"><div>счет № 342324523453</div>
</div>
<div id="text12">
  <div></div>
</div>
<div id="text13">
  <div><strong>ООО "НеСка"</strong></div>
</div>
<div id="text14">
  <div>КРЕДИТ</div>
</div>
<div id="text15">
  <div>Для зачисления на счет</div>
</div>
<div id="text16">
  <div><strong>0 руб., 00 коп.</strong></div>
</div>
<div id="text17">
  <div>наличными</div>
</div>
<div id="text18">
  <div>счет № 3012133570017 </div>
</div>
<div id="text19">
  <div>Банк получатель</div>
</div>
<div id="text20">
  <div><strong>ОАО "Технобанк", код 182 г.Минск</strong></div>
</div>
<div id="text21">
  <div></div>
</div>
<div id="text22">
  <div>Сумма прописью (руб.)</div>
</div>
<div id="text23">
  <div class="style3">Ноль рублей 00 копеек </div>
</div>
<div id="text24">
  <div>Код отчетности</div>
</div>
<div id="text25">
  <div>сумма</div>
</div>
<div id="text26">
  <div>код</div>
</div>
<div id="text27">
  <div>Получатель</div>
</div>
<div id="text28">
  <div>
    <p><strong>Руководитель организации</strong><strong>(индивидуальный предприниматель)</strong></p>
    </div>
</div>
<div id="text29">
  <div>
    <p><strong>Кассир</strong></p>
    </div>
</div>
<div id="text30">
  <div><strong>0,00</strong></div>
</div>
<div id="text31">
  <div><strong>2004</strong></div>
</div>
<div id="text32">
  <div class="style1">Указанная выше сумма принята полностью.</div>
</div>
<div id="text33">
  <div class="style1">Кассир</div>
</div>
<div id="text34">
  <div class="style2">АКТ "___" _______________200__г.</div>
</div>
<div id="text35">
  <div class="style1">Контролер</div>
</div>
<div id="text36">
  <div>При вскрытии сумки и пересчете вложений оказалось:</div>
</div>
<div id="text37">
  <div>Назначе- ние платежа</div>
</div>
<div id="text38">
  <div>
    <p>торговая выручка</p>
    </div>
</div>
<div id="text39">
  <div>наличными (руб.) ____________________</div>
</div>
<div id="text40">
  <div>чеками (руб.) ____________________</div>
</div>
<div id="text41">
  <div><strong>Подписи банка:</strong></div>
</div>
<div id="text42">
  <div>недостача</div>
</div>
<div id="text43">
  <div>излишек</div>
</div>
<div id="text44">
  <div>(руб.)</div>
</div>
<div id="text45">
  <div>____________________</div>
</div>
<div id="text46">
  <div>недостача</div>
</div>
<div id="text47">
  <div>излишек</div>
</div>
<div id="text48">
  <div>(руб.)</div>
</div>
<div id="text49">
  <div>____________________</div>
</div>
<div id="text50">
  <div><strong>Кассир</strong></div>
</div>
<div id="text51">
  <div><strong>Контролер</strong></div>
</div>
<div id="text52">
  <div>неплатежных</div>
</div>
<div id="text53">
  <div>и сомнительных</div>
</div>
<div id="text54">
  <div>(руб.)</div>
</div>
<div id="text55">
  <div>дефектных</div>
</div>
<div id="text56">
  <div>(руб.)</div>
</div>
<div id="text57">
  <div><strong>Кассир</strong></div>
</div>
<div id="text58">
  <div><strong>Контролер</strong></div>
</div>
<div id="text59">
  <div><strong>Представитель клиента</strong></div>
</div>
<div id="text60">
  <div>____________________</div>
</div>
<div id="text61">
  <div>____________________</div>
</div>
<div id="text62">
  <div></div>
</div>
<div id="text63">
  <div></div>
</div>
<div id="text64">
  <div></div>
</div>
<div id="text65">
  <div></div>
</div>
<div id="text66">
  <div></div>
</div>
<div id="text67">
  <div></div>
</div>
<div id="text68">
  <div><strong>0,00</strong></div>
</div>
<div id="text69">
  <div>чеками со счетов по перечню на обороте</div>
</div>
<div id="text70">
  <div>_______</div>
</div>
<div id="text71">
  <div>____________</div>
</div>
<div id="text72">
  <div>_______</div>
</div>
 
</div>
</HTML>

И файл стилей:

Показать

.form {
	font-family: Arial;
	font-size: 16px;
	height: 610px;
	width: 860px;
}
.form #text1 {
	font-size: 12px;
	overflow: auto;
	position: absolute;
	left: 10px;
	top: 25px;
}
.form #text2 div {
	position: absolute;
	overflow: auto;
	left: 22px;
	top: 62px;
	text-align: right;
	width: 398px;
}
.form #text3 div {
	position: absolute;
 
 
	overflow: auto
	left: 135px;
	top: 62px;
	left: 424px;
	width: 113px;
	border: 1px solid #000000;
	text-align: center;
}
.form #text4 div {
	position: absolute;
 
 
	overflow: auto
	left: 42px;
	top: 62px;
	left: 770px;
	width: 98px;
	border: 1px solid #000000;
	text-align: right;
}
.form #text6 div {
	position: absolute;
	overflow: auto
	left: 481px;
	top: 118px;
	width: 163px;
	left: 11px;
}
.form #text5 {
	overflow: auto;
	position: absolute;
	left: 125px;
	top: 85px;
}
 
.form #text7 div {
	position: absolute;
 
	overflow: auto
	left: 297px;
	top: 118px;
	left: 551px;
}
.form #text8 div {
	position: absolute;
	overflow: auto
	left: 102px;
	top: 118px;
	left: 765px;
}
.form #text9 div {
	position: absolute;
	overflow: auto
	left: 155px;
	top: 142px;
	left: 11px;
}
.form #text10 div {
	position: absolute;
 
	overflow: auto
	left: 351px;
	top: 142px;
	left: 83px;
	width: 353px;
	height: 17px;
	border-left-style: none;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
}
.form #text11 div {
	position: absolute;
 
 
 
	overflow: auto
	left: 101px;
	top: 142px;
	left: 439px;
	width: 287px;
	border: 1px solid #000000;
	text-align: center;
	font-size: 14px;
}
.form #text12 div {
	position: absolute;
	overflow: auto
	left: 278px;
	top: 141px;
	left: 728px;
	width: 140px;
	height: 79px;
	margin: 0px;
	border: 1px solid #000000;
}
.form #text68 div {
	overflow: auto;
	position: absolute;
	left: 763px;
	top: 170px;
	width: 76px;
	height: 26px;
}
.form #text69 div {
	overflow: auto;
	position: absolute;
	left: 499px;
	top: 230px;
	width: 171px;
	height: 57px;
}
 
 
.form #text13 div {
	position: absolute;
 
	overflow: auto
	left: 400px;
	top: 170px;
	left: 107px;
	width: 325px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
}
.form #text14 div {
	position: absolute;
 
 
	overflow: auto
	left: 400px;
	top: 170px;
	left: 545px;
}
.form #text15 div {
	position: absolute;
	overflow: auto
	left: 400px;
	top: 198px;
	left: 11px;
}
.form #text16 div {
	position: absolute;
 
 
	overflow: auto
	left: 400px;
	top: 198px;
	left: 196px;
	width: 156px;
	text-align: center;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
}
.form #text17 div {
	position: absolute;
 
 
	overflow: auto
	left: 400px;
	top: 198px;
	left: 353px;
	width: 84px;
	height: 19px;
}
.form #text18 div {
	position: absolute;
 
 
 
 
	overflow: auto
	left: 400px;
	top: 198px;
	left: 439px;
	width: 287px;
	border: 1px solid #000000;
	text-align: center;
	font-size: 14px;
}
.form #text19 div {
	position: absolute;
	overflow: auto
	left: 400px;
	top: 222px;
	left: 10px;
}
.form #text20 div {
	position: absolute;
 
	overflow: auto
	left: 400px;
	top: 222px;
	left: 142px;
	width: 299px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
}
.form #text21 div {
	position: absolute;
 
 
	overflow: auto
	left: 400px;
	top: 221px;
	left: 444px;
	width: 282px;
	height: 70px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
}
.form #text22 div {
	position: absolute;
	overflow: auto
	left: 400px;
	top: 262px;
	left: 10px;
}
.form #text23 div {
	position: absolute;
 
 
	overflow: auto
	left: 400px;
	top: 262px;
	left: 185px;
	width: 254px;
	height: auto;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
	text-align: center;
}
.form #text24 div {
	position: absolute;
 
	overflow: auto
	left: 400px;
	top: 222px;
	left: 728px;
	width: 140px;
	height: 22px;
	border: 1px solid #000000;
}
.form #text25 div {
	position: absolute;
 
 
 
	overflow: auto
	left: 400px;
	top: 245px;
	left: 728px;
	width: 80px;
	height: 22px;
	border: 1px solid #000000;
	text-align: center;
}
.form #text26 div {
	position: absolute;
 
 
 
	overflow: auto
	left: 400px;
	top: 245px;
	left: 809px;
	width: 59px;
	height: 22px;
	border: 1px solid #000000;
	text-align: center;
}
.form #text27 div {
	position: absolute;
	overflow: auto
	left: 400px;
	top: 170px;
	left: 11px;
}
.form #text28 div {
	position: absolute;
 
	overflow: auto
	left: 400px;
	top: 304px;
	left: 12px;
	width: 430px;
	height: 58px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
}
.form #text29 div {
	position: absolute;
 
	overflow: auto
	left: 400px;
	top: 304px;
	left: 443px;
	width: 229px;
	height: 58px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
}
.form #text30 div {
	position: absolute;
 
 
	overflow: auto
	left: 400px;
	top: 268px;
	left: 728px;
	width: 80px;
	border: 1px solid #000000;
	text-align: center;
}
.form #text31 div {
	position: absolute;
 
 
	overflow: auto
	left: 400px;
	top: 268px;
	left: 809px;
	width: 59px;
	border: 1px solid #000000;
	text-align: center;
}
.form #text32 div {
	position: absolute;
	overflow: auto
	left: 400px;
	top: 366px;
	left: 10px;
}
.form #text33 div {
	position: absolute;
	overflow: auto
	left: 400px;
	top: 366px;
	left: 442px;
}
.form #text34 div {
	position: absolute;
 
 
	overflow: auto
	left: 400px;
	top: 386px;
	left: 105px;
	width: 283px;
	height: 24px;
}
.form #text35 div {
	position: absolute;
	overflow: auto
	left: 400px;
	top: 386px;
	left: 442px;
}
.form #text36 div {
	position: absolute;
	overflow: auto
	left: 400px;
	top: 420px;
	left: 10px;
	font-size: 14px;
}
.form #text37 div {
	position: absolute;
 
 
	overflow: auto
	left: 400px;
	top: 347px;
	left: 728px;
	font-size: 14px;
	width: 63px;
	height: 50px;
	border: 1px solid #000000;
	text-align: center;
}
.form #text38 div {
	position: absolute;
 
	overflow: auto
	left: 400px;
	top: 347px;
	left: 792px;
	font-size: 14px;
	width: 76px;
	height: 50px;
	border: 1px solid #000000;
}
.form #text39 div {
	position: absolute;
	overflow: auto
	left: 400px;
	top: 448px;
	left: 11px;
	font-size: 14px;
}
.form #text40 div {
	position: absolute;
	overflow: auto
	left: 400px;
	top: 448px;
	left: 359px;
	font-size: 14px;
}
.form #text41 div {
	position: absolute;
 
	overflow: auto
	left: 400px;
	top: 408px;
	left: 679px;
	width: 192px;
}
.form #text42 div {
	position: absolute;
	overflow: auto
	left: 400px;
	top: 468px;
	left: 359px;
	font-size: 14px;
	width: 71;
}
.form #text43 div {
	position: absolute;
	overflow: auto
	left: 400px;
	top: 485px;
	left: 359px;
	font-size: 14px;
	width: 71;
}
.form #text44 div {
	position: absolute;
 
 
	overflow: auto
	left: 400px;
	top: 505px;
	left: 442px;
	font-size: 14px;
	width: 41px;
	text-align: center;
}
.form #text70 div {
	overflow: auto;
	position: absolute;
	left: 360px;
	top: 467px;
	text-align: center;
}
.form #text71 div {
	overflow: auto;
	position: absolute;
	left: 12px;
	top: 503px;
	text-align: center;
}
.form #text72 div {
	overflow: auto;
	position: absolute;
	left: 11px;
	top: 467px;
	text-align: center;
}
 
.form #text45 div {
	position: absolute;
	overflow: auto
	left: 400px;
	top: 484px;
	left: 125px;
	font-size: 14px;
	width: 161px;
	height: 17px;
}
.form #text46 div {
	position: absolute;
	overflow: auto
	left: 400px;
	top: 468px;
	left: 12px;
	font-size: 14px;
	width: 71;
}
.form #text47 div {
	position: absolute;
	overflow: auto
	left: 400px;
	top: 485px;
	left: 12px;
	font-size: 14px;
	width: 71px;
}
.form #text48 div {
	position: absolute;
	overflow: auto
	left: 400px;
	top: 474px;
	left: 84px;
	font-size: 14px;
	width: 38px;
	height: 21px;
}
.form #text49 div {
	position: absolute;
	overflow: auto
	left: 400px;
	top: 521px;
	left: 177px;
	font-size: 14px;
}
.form #text50 div {
	position: absolute;
	overflow: auto
	left: 400px;
	top: 545px;
	left: 10px;
}
.form #text51 div {
	position: absolute;
	overflow: auto
	left: 400px;
	top: 545px;
	left: 177px;
}
.form #text52 div {
	position: absolute;
	overflow: auto
	left: 400px;
	top: 505px;
	left: 12px;
	font-size: 14px;
	width: 115px;
}
.form #text53 div {
	position: absolute;
	overflow: auto
	left: 400px;
	top: 521px;
	left: 12px;
	font-size: 14px;
	width: 115px;
}
.form #text54 div {
	position: absolute;
	overflow: auto
	left: 400px;
	top: 475px;
	left: 431px;
	font-size: 14px;
	width: 38px;
	height: 20px;
}
.form #text55 div {
	position: absolute;
 
	overflow: auto
	left: 400px;
	top: 505px;
	left: 359px;
	font-size: 14px;
	width: 81px;
}
.form #text56 div {
	position: absolute;
	overflow: auto
	left: 400px;
	top: 512px;
	left: 129px;
	font-size: 14px;
	height: 20px;
	width: 43px;
}
.form #text57 div {
	position: absolute;
	overflow: auto
	left: 400px;
	top: 484px;
	left: 679px;
}
.form #text58 div {
	position: absolute;
	overflow: auto
	left: 400px;
	top: 505px;
	left: 679px;
}
.form #text59 div {
	position: absolute;
	overflow: auto
	left: 400px;
	top: 545px;
	left: 359px;
}
.form #text60 div {
	position: absolute;
	overflow: auto
	left: 600px;
	top: 484px;
	left: 473px;
	font-size: 14px;
}
.form #text61 div {
	position: absolute;
	overflow: auto
	left: 600px;
	top: 505px;
	left: 486px;
	font-size: 14px;
}
.form #text62 div {
	position: absolute;
 
 
 
	overflow: auto
	left: 600px;
	top: 287px;
	left: 728px;
	width: 80;
	height: 19px;
	border: 1px solid #000000;
}
.form #text63 div {
	position: absolute;
 
 
 
	overflow: auto
	left: 600px;
	top: 287px;
	left: 809px;
	width: 59;
	height: 19px;
	border: 1px solid #000000;
}
.form #text64 div {
	position: absolute;
 
 
 
	overflow: auto
	left: 600px;
	top: 307px;
	left: 728px;
	width: 80;
	height: 19;
	border: 1px solid #000000;
}
.form #text65 div {
	position: absolute;
 
 
 
	overflow: auto
	left: 600px;
	top: 307px;
	left: 809px;
	width: 59;
	height: 19;
	border: 1px solid #000000;
}
.form #text66 div {
	position: absolute;
 
 
 
	overflow: auto
	left: 600px;
	top: 327px;
	left: 728px;
	width: 80;
	height: 19;
	border: 1px solid #000000;
}
.form #text67 div {
	position: absolute;
 
 
 
	overflow: auto
	left: 600px;
	top: 327px;
	left: 809px;
	width: 59;
	height: 19;
	border: 1px solid #000000;
}
.form #text73 div {
	position: absolute;
	overflow: auto
	left: 600px;
	top: 378px;
	left: 314px;
}
.form #text74 div {
	position: absolute;
 
	overflow: auto
	left: 600px;
	top: 410px;
	left: 12px;
	width: 212px;
}
.form #text75 div {
	position: absolute;
 
	overflow: auto
	left: 600px;
	top: 433px;
	left: 12px;
	width: 148px;
}
.form #text76 div {
	position: absolute;
	overflow: auto
	left: 600px;
	top: 421px;
	left: 381px;
}
.form #text77 div {
	position: absolute;
	overflow: auto
	left: 600px;
	top: 433px;
	left: 175px;
}
.form #text78 div {
	position: absolute;
 
	overflow: auto
	left: 600px;
	top: 478px;
	left: 12px;
	width: 102px;
}
.form #text79 div {
	position: absolute;
	overflow: auto
	left: 600px;
	top: 478px;
	left: 125px;
}
.form #text80 div {
	position: absolute;
 
	overflow: auto
	left: 600px;
	top: 499px;
	left: 253px;
	width: 176px;
}
.form #text81 div {
	position: absolute;
	overflow: auto
	left: 600px;
	top: 523px;
	left: 12px;
}
.form #text82 div {
	position: absolute;
	overflow: auto
	left: 600px;
	top: 574px;
	left: 12px;
}
.form #text83 div {
	position: absolute;
	overflow: auto
	left: 600px;
	top: 599px;
	left: 84px;
}

На основе данной html и с привязкой к данному файлу стилей были созданы еще две странички(так называемые «половинки»), первая:

Показать

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<TITLE>Препроводительная ведомость</TITLE><link rel="stylesheet" href="prepro.css" type="text/css">
<style type="text/css">
<!--
.style1 {font-size: 14px}
.style2 {
	font-size: 14;
	font-weight: bold;
}
.style3 {
	font-size: 16px;
	font-weight: bold;
}
-->
</style>
</HEAD>
<div class="form">
 
<div id="text1">2-ый экз.</div> 
 
<div id="text2"><div><strong>НАКЛАДНАЯ №</strong></div>
</div>
<div id="text3"><div><strong>3124231412</strong></div>
</div>
<div id="text4"><div>0402090005</div>
</div>
 
<div id="text5"><strong>к сумке с денежной выручкой</strong></div>
 
<div id="text6"><div><strong>17 января 2017г.</strong></div>
</div>
<div id="text7"><div>ДЕБЕТ</div>
</div>
<div id="text8"><div>Сумма</div>
</div>
 
<div id="text9"><div>От(кого)</div>
</div>
<div id="text10"><div><strong>Аптека №1 ООО "Не Ска"</strong></div>
</div>
<div id="text11"><div>счет № 342324523453</div>
</div>
<div id="text12">
  <div></div>
</div>
<div id="text13">
  <div><strong>ООО "НеСка"</strong></div>
</div>
<div id="text14">
  <div>КРЕДИТ</div>
</div>
<div id="text15">
  <div>Для зачисления на счет</div>
</div>
<div id="text16">
  <div><strong>0 руб., 00 коп.</strong></div>
</div>
<div id="text17">
  <div>наличными</div>
</div>
<div id="text18">
  <div>счет № 3012133570017 </div>
</div>
<div id="text19">
  <div>Банк получатель</div>
</div>
<div id="text20">
  <div><strong>ОАО "Технобанк", код 182 г.Минск</strong></div>
</div>
<div id="text21">
  <div></div>
</div>
<div id="text22">
  <div>Сумма прописью (руб.)</div>
</div>
<div id="text23">
  <div class="style3">Ноль рублей 00 копеек</div>
</div>
<div id="text24">
  <div>Код отчетности</div>
</div>
<div id="text25">
  <div>сумма</div>
</div>
<div id="text26">
  <div>код</div>
</div>
<div id="text27">
  <div>Получатель</div>
</div>
<div id="text28">
  <div>
    <p><strong>Руководитель организации</strong><strong>(индивидуальный предприниматель)</strong></p>
    </div>
</div>
<div id="text29">
  <div>
    <p><strong>Кассир</strong></p>
    </div>
</div>
<div id="text30">
  <div><strong>0,00</strong></div>
</div>
<div id="text31">
  <div><strong>2004</strong></div>
</div>
<div id="text32">
  <div class="style1">Указанная выше сумма принята полностью.</div>
</div>
<div id="text33">
  <div class="style1">Кассир</div>
</div>
<div id="text34">
  <div class="style2">АКТ "___" _______________200__г.</div>
</div>
<div id="text35">
  <div class="style1">Контролер</div>
</div>
<div id="text36">
  <div>При вскрытии сумки и пересчете вложений оказалось:</div>
</div>
<div id="text37">
  <div>Назначе- ние платежа</div>
</div>
<div id="text38">
  <div>
    <p>торговая выручка</p>
    </div>
</div>
<div id="text39">
  <div>наличными (руб.) ____________________</div>
</div>
<div id="text40">
  <div>чеками (руб.) ____________________</div>
</div>
<div id="text41">
  <div><strong>Подписи банка:</strong></div>
</div>
<div id="text42">
  <div>недостача</div>
</div>
<div id="text43">
  <div>излишек</div>
</div>
<div id="text44">
  <div>(руб.)</div>
</div>
<div id="text45">
  <div>____________________</div>
</div>
<div id="text46">
  <div>недостача</div>
</div>
<div id="text47">
  <div>излишек</div>
</div>
<div id="text48">
  <div>(руб.)</div>
</div>
<div id="text49">
  <div>____________________</div>
</div>
<div id="text50">
  <div><strong>Кассир</strong></div>
</div>
<div id="text51">
  <div><strong>Контролер</strong></div>
</div>
<div id="text52">
  <div>неплатежных</div>
</div>
<div id="text53">
  <div>и сомнительных</div>
</div>
<div id="text54">
  <div>(руб.)</div>
</div>
<div id="text55">
  <div>дефектных</div>
</div>
<div id="text56">
  <div>(руб.)</div>
</div>
<div id="text57">
  <div><strong>Кассир</strong></div>
</div>
<div id="text58">
  <div><strong>Контролер</strong></div>
</div>
<div id="text59">
  <div><strong>Представитель клиента</strong></div>
</div>
<div id="text60">
  <div>____________________</div>
</div>
<div id="text61">
  <div>____________________</div>
</div>
<div id="text62">
  <div></div>
</div>
<div id="text63">
  <div></div>
</div>
<div id="text64">
  <div></div>
</div>
<div id="text65">
  <div></div>
</div>
<div id="text66">
  <div></div>
</div>
<div id="text67">
  <div></div>
</div>
<div id="text68">
  <div><strong>0,00</strong></div>
</div>
<div id="text69">
  <div>чеками со счетов по перечню на обороте</div>
</div>
<div id="text70">
  <div>_______</div>
</div>
<div id="text71">
  <div>____________</div>
</div>
<div id="text72">
  <div>_______</div>
</div>
 
</div>
</HTML>

И вторая:

Показать

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<TITLE>Препроводительная ведомость</TITLE><link rel="stylesheet" href="prepro.css" type="text/css">
<style type="text/css">
<!--
.style3 {
	font-size: 16px;
	font-weight: bold;
}
.style4 {font-size: 12px}
-->
</style>
</HEAD>
<div class="form">
 
<div id="text1">3-й экз.</div> 
 
<div id="text2"><div><strong>КОПИЯ ПРЕПРОВОДИТЕЛЬНОЙ ВЕДОМОСТИ №</strong></div>
</div>
<div id="text3"><div><strong>3124231412</strong></div>
</div>
<div id="text4"><div>0402090005</div>
</div>
 
<div id="text5"><strong>к сумке с денежной выручкой</strong></div>
 
<div id="text6"><div><strong>17 января 2017г.</strong></div>
</div>
<div id="text7"><div>ДЕБЕТ</div>
</div>
<div id="text8"><div>Сумма</div>
</div>
 
<div id="text9"><div>От(кого)</div>
</div>
<div id="text10"><div><strong>Аптека №1 ООО "Не Ска"</strong></div>
</div>
<div id="text11"><div>счет № 342324523453</div>
</div>
<div id="text12">
  <div></div>
</div>
<div id="text13">
  <div><strong>ООО "НеСка"</strong></div>
</div>
<div id="text14">
  <div>КРЕДИТ</div>
</div>
<div id="text15">
  <div>Для зачисления на счет</div>
</div>
<div id="text16">
  <div><strong>0 руб., 00коп.</strong></div>
</div>
<div id="text17">
  <div>наличными</div>
</div>
<div id="text18">
  <div>счет № 3012133570017 </div>
</div>
<div id="text19">
  <div>Банк получатель</div>
</div>
<div id="text20">
  <div><strong>ОАО "Технобанк", код 182 г.Минск</strong></div>
</div>
<div id="text21">
  <div></div>
</div>
<div id="text22">
  <div>Сумма прописью (руб.)</div>
</div>
<div id="text23">
  <div class="style3">Ноль рублей 00 копеек</div>
</div>
<div id="text24">
  <div>Код отчетности</div>
</div>
<div id="text25">
  <div>сумма</div>
</div>
<div id="text26">
  <div>код</div>
</div>
<div id="text27">
  <div>Получатель</div>
</div>
<div id="text28">
  <div>
    <p><strong>Руководитель организации</strong><strong>(индивидуальный предприниматель)</strong></p>
    </div>
</div>
<div id="text29">
  <div>
    <p><strong>Кассир</strong></p>
    </div>
</div>
<div id="text30">
  <div><strong>0,00</strong></div>
</div>
<div id="text31">
  <div><strong>2004</strong></div>
</div>
<div id="text32"></div>
<div id="text33"></div>
<div id="text34"></div>
<div id="text35"></div>
<div id="text36"></div>
<div id="text37">
  <div>Назначе- ние платежа</div>
</div>
<div id="text38">
  <div>
    <p>торговая выручка</p>
    </div>
</div>
<div id="text39"></div>
<div id="text40"></div>
<div id="text41"></div>
<div id="text42"></div>
<div id="text43"></div>
<div id="text44"></div>
<div id="text45"></div>
<div id="text46"></div>
<div id="text47"></div>
<div id="text48"></div>
<div id="text49"></div>
<div id="text50"></div>
<div id="text51"></div>
<div id="text52"></div>
<div id="text53"></div>
<div id="text54"></div>
<div id="text55"></div>
<div id="text56"></div>
<div id="text57"></div>
<div id="text58"></div>
<div id="text59"></div>
<div id="text60"></div>
<div id="text61"></div>
<div id="text62">
  <div></div>
</div>
<div id="text63">
  <div></div>
</div>
<div id="text64">
  <div></div>
</div>
<div id="text65">
  <div></div>
</div>
<div id="text66">
  <div></div>
</div>
<div id="text67">
  <div></div>
</div>
<div id="text68">
  <div><strong>0,00</strong></div>
</div>
<div id="text69">
  <div>чеками со счетов по перечню на обороте</div>
</div>
<div id="text70"></div>
<div id="text71"></div>
<div id="text72"></div>
<div id="text73">
  <div><strong>РАСПИСКА</strong></div>
</div>
<div id="text74">
  <div>Опломбированную сумку № </div>
</div>
<div id="text75">
  <div>принял инкассатор</div>
</div>
<div id="text76">
  <div>без пересчета вложенных в нее наличных денег</div>
</div>
<div id="text77">
  <div>______________________</div>
</div>
<div id="text78">
  <div><strong>Инкассатор</strong></div>
</div>
<div id="text79">
  <div>________________________________________________</div>
</div>
<div id="text80">
  <div class="style4">подпись разборчивая</div>
</div>
<div id="text81">
  <div>Печать службы инкассации с обозначением номера маршрута.</div>
</div>
<div id="text82">
  <div>_______________________</div>
</div>
<div id="text83">
  <div>дата</div>
</div>
 
</div>
</HTML>

Аналогично была создана таблица для обратной стороны(тут все оказалось попроще в отношении css, таблица ведь ровная). Ее html:

Показать

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<TITLE>Обратная сторона</TITLE><link rel="stylesheet" href="preproback.css" type="text/css">
</HEAD>
<div class="formback">
 
<div id="textback1">
	<div><strong>Купюрная опись сдаваемых наличных денег</strong></div>
</div>
<div id="textback2">
	<div><strong>Перечень представленных чеков</strong></div>
</div>
<div id="textback3" class="txbck1 st1">
	<div>наименование достоинств</div>
</div>
<div id="textback4" class="txbck1 st2">
	<div>количество</div>
</div>
<div id="textback5" class="txbck1 st3">
	<div>сумма</div>
</div>
<div id="textback6" class="txbck1 st4">
	<div>номера чеков и серии</div>
</div>
<div id="textback7" class="txbck1 st5">
	<div>номера счетов и наимено-вание чекодателя</div>
</div>
<div id="textback8" class="txbck1 st6">
	<div>сумма</div>
</div>
<div id="textback9" class="txbck1 st7">
	<div>отметки о дефектных чеках</div>
</div>
<div id="textback10" class="txbck2 st1">
	<div>1</div>
</div>
<div id="textback11" class="txbck2 st2">
	<div>2</div>
</div>
<div id="textback12" class="txbck2 st3">
	<div>3</div>
</div>
<div id="textback13" class="txbck2 st4">
	<div>4</div>
</div>
<div id="textback14" class="txbck2 st5">
	<div>5</div>
</div>
<div id="textback15" class="txbck2 st6">
	<div>6</div>
</div>
<div id="textback16" class="txbck2 st7">
	<div>7</div>
</div>
<div id="textback17" class="txbck2 st1">
	<div>0 руб. 01 коп.</div>
</div>
<div id="textback18" class="txbck2 st2">
	<div>0</div>
</div>
<div id="textback19" class="txbck2 st3">
	<div>0 руб. 00 коп.</div>
</div>
<div id="textback20" class="txbck2 st4">
	<div></div>
</div>
<div id="textback21" class="txbck2 st5">
	<div></div>
</div>
<div id="textback22" class="txbck2 st6">
	<div></div>
</div>
<div id="textback23" class="txbck2 st7">
	<div></div>
</div>
<div id="textback24" class="txbck2 st1">
	<div>0 руб. 02 коп.</div>
</div>
<div id="textback25" class="txbck2 st2">
	<div>0</div>
</div>
<div id="textback26" class="txbck2 st3">
	<div>0 руб. 00 коп.</div>
</div>
<div id="textback27" class="txbck2 st4">
	<div></div>
</div>
<div id="textback28" class="txbck2 st5">
	<div></div>
</div>
<div id="textback29" class="txbck2 st6">
	<div></div>
</div>
<div id="textback30" class="txbck2 st7">
	<div></div>
</div>
<div id="textback31" class="txbck2 st1">
	<div>0 руб. 05 коп.</div>
</div>
<div id="textback32" class="txbck2 st2">
	<div>0</div>
</div>
<div id="textback33" class="txbck2 st3">
	<div>0 руб. 00 коп.</div>
</div>
<div id="textback34" class="txbck2 st4">
	<div></div>
</div>
<div id="textback35" class="txbck2 st5">
	<div></div>
</div>
<div id="textback36" class="txbck2 st6">
	<div></div>
</div>
<div id="textback37" class="txbck2 st7">
	<div></div>
</div>
<div id="textback38" class="txbck2 st1">
	<div>0 руб. 10 коп.</div>
</div>
<div id="textback39" class="txbck2 st2">
	<div>0</div>
</div>
<div id="textback40" class="txbck2 st3">
	<div>0 руб. 00 коп.</div>
</div>
<div id="textback41" class="txbck2 st4">
	<div></div>
</div>
<div id="textback42" class="txbck2 st5">
	<div></div>
</div>
<div id="textback43" class="txbck2 st6">
	<div></div>
</div>
<div id="textback44" class="txbck2 st7">
	<div></div>
</div>
<div id="textback45" class="txbck2 st1">
	<div>0 руб. 20 коп.</div>
</div>
<div id="textback46" class="txbck2 st2">
	<div>0</div>
</div>
<div id="textback47" class="txbck2 st3">
	<div>0 руб. 00 коп.</div>
</div>
<div id="textback48" class="txbck2 st4">
	<div></div>
</div>
<div id="textback49" class="txbck2 st5">
	<div></div>
</div>
<div id="textback50" class="txbck2 st6">
	<div></div>
</div>
<div id="textback51" class="txbck2 st7">
	<div></div>
</div>
<div id="textback52" class="txbck2 st1">
	<div>0 руб. 50 коп.</div>
</div>
<div id="textback53" class="txbck2 st2">
	<div>0</div>
</div>
<div id="textback54" class="txbck2 st3">
	<div>0 руб. 00 коп.</div>
</div>
<div id="textback55" class="txbck2 st4">
	<div></div>
</div>
<div id="textback56" class="txbck2 st5">
	<div></div>
</div>
<div id="textback57" class="txbck2 st6">
	<div></div>
</div>
<div id="textback58" class="txbck2 st7">
	<div></div>
</div>
<div id="textback59" class="txbck2 st1">
	<div>1 руб. 00 коп.</div>
</div>
<div id="textback60" class="txbck2 st2">
	<div>0</div>
</div>
<div id="textback61" class="txbck2 st3">
	<div>0 руб. 00 коп.</div>
</div>
<div id="textback62" class="txbck2 st4">
	<div></div>
</div>
<div id="textback63" class="txbck2 st5">
	<div></div>
</div>
<div id="textback64" class="txbck2 st6">
	<div></div>
</div>
<div id="textback65" class="txbck2 st7">
	<div></div>
</div>
<div id="textback66" class="txbck2 st1">
	<div>2 руб. 00 коп.</div>
</div>
<div id="textback67" class="txbck2 st2">
	<div>0</div>
</div>
<div id="textback68" class="txbck2 st3">
	<div>0 руб. 00 коп.</div>
</div>
<div id="textback69" class="txbck2 st4">
	<div></div>
</div>
<div id="textback70" class="txbck2 st5">
	<div></div>
</div>
<div id="textback71" class="txbck2 st6">
	<div></div>
</div>
<div id="textback72" class="txbck2 st7">
	<div></div>
</div>
<div id="textback73" class="txbck2 st1">
	<div>5 руб. 00 коп.</div>
</div>
<div id="textback74" class="txbck2 st2">
	<div>0</div>
</div>
<div id="textback75" class="txbck2 st3">
	<div>0 руб. 00 коп.</div>
</div>
<div id="textback76" class="txbck2 st4">
	<div></div>
</div>
<div id="textback77" class="txbck2 st5">
	<div></div>
</div>
<div id="textback78" class="txbck2 st6">
	<div></div>
</div>
<div id="textback79" class="txbck2 st7">
	<div></div>
</div>
<div id="textback80" class="txbck2 st1">
	<div>10 руб. 00 коп.</div>
</div>
<div id="textback81" class="txbck2 st2">
	<div>0</div>
</div>
<div id="textback82" class="txbck2 st3">
	<div>0 руб. 00 коп.</div>
</div>
<div id="textback83" class="txbck2 st4">
	<div></div>
</div>
<div id="textback84" class="txbck2 st5">
	<div></div>
</div>
<div id="textback85" class="txbck2 st6">
	<div></div>
</div>
<div id="textback86" class="txbck2 st7">
	<div></div>
</div>
<div id="textback87" class="txbck2 st1">
	<div>20 руб. 00 коп.</div>
</div>
<div id="textback88" class="txbck2 st2">
	<div>0</div>
</div>
<div id="textback89" class="txbck2 st3">
	<div>0 руб. 00 коп.</div>
</div>
<div id="textback90" class="txbck2 st4">
	<div></div>
</div>
<div id="textback91" class="txbck2 st5">
	<div></div>
</div>
<div id="textback92" class="txbck2 st6">
	<div></div>
</div>
<div id="textback93" class="txbck2 st7">
	<div></div>
</div>
<div id="textback94" class="txbck2 st1">
	<div>50 руб. 00 коп.</div>
</div>
<div id="textback95" class="txbck2 st2">
	<div>0</div>
</div>
<div id="textback96" class="txbck2 st3">
	<div>0 руб. 00 коп.</div>
</div>
<div id="textback97" class="txbck2 st4">
	<div></div>
</div>
<div id="textback98" class="txbck2 st5">
	<div></div>
</div>
<div id="textback99" class="txbck2 st6">
	<div></div>
</div>
<div id="textback100" class="txbck2 st7">
	<div></div>
</div>
<div id="textback101" class="txbck2 st1">
	<div>100 руб. 00 коп.</div>
</div>
<div id="textback102" class="txbck2 st2">
	<div>0</div>
</div>
<div id="textback103" class="txbck2 st3">
	<div>0 руб. 00 коп.</div>
</div>
<div id="textback104" class="txbck2 st4">
	<div></div>
</div>
<div id="textback105" class="txbck2 st5">
	<div></div>
</div>
<div id="textback106" class="txbck2 st6">
	<div></div>
</div>
<div id="textback107" class="txbck2 st7">
	<div></div>
</div>
<div id="textback108" class="txbck2 st1">
	<div>200 руб. 00 коп.</div>
</div>
<div id="textback109" class="txbck2 st2">
	<div>0</div>
</div>
<div id="textback110" class="txbck2 st3">
	<div>0 руб. 00 коп.</div>
</div>
<div id="textback111" class="txbck2 st4">
	<div></div>
</div>
<div id="textback112" class="txbck2 st5">
	<div></div>
</div>
<div id="textback113" class="txbck2 st6">
	<div></div>
</div>
<div id="textback114" class="txbck2 st7">
	<div></div>
</div>
<div id="textback115" class="txbck2 st1">
	<div>500 руб. 00 коп.</div>
</div>
<div id="textback116" class="txbck2 st2">
	<div>0</div>
</div>
<div id="textback117" class="txbck2 st3">
	<div>0 руб. 00 коп.</div>
</div>
<div id="textback118" class="txbck2 st4">
	<div></div>
</div>
<div id="textback119" class="txbck2 st5">
	<div></div>
</div>
<div id="textback120" class="txbck2 st6">
	<div></div>
</div>
<div id="textback121" class="txbck2 st7">
	<div></div>
</div>
<div id="textback133" class="txbck2 st1">
	<div></div>
</div>
<div id="textback134" class="txbck2 st2">
	<div></div>
</div>
<div id="textback135" class="txbck2 st3">
	<div></div>
</div>
<div id="textback136" class="txbck2 st4">
	<div></div>
</div>
<div id="textback137" class="txbck2 st5">
	<div></div>
</div>
<div id="textback138" class="txbck2 st6">
	<div></div>
</div>
<div id="textback139" class="txbck2 st7">
	<div></div>
</div>
<div id="textback122" class="txbck2 st1">
	<div></div>
</div>
<div id="textback123" class="txbck2 st2">
	<div><strong>Итого: </strong></div>
</div>
<div id="textback124" class="txbck2 st3">
	<div><strong>0 руб. 00 коп.</strong></div>
</div>
<div id="textback125" class="txbck2 st4">
	<div></div>
</div>
<div id="textback126" class="txbck2 st5">
	<div></div>
</div>
<div id="textback127" class="txbck2 st6">
	<div></div>
</div>
<div id="textback128" class="txbck2 st7">
	<div></div>
</div>
 
</div>
</HTML>

Ну и файл стилей:

Показать

.formback {
	height: 610px;
	width: 860px;
	font-family: Arial;
	font-size: 16px;
	text-align: center;
}
.formback #textback1 {
	float: left;
	width: 427px;
	border: 1px solid #000000;
	height: 25px;
	margin-top: 0px;
}
.formback #textback1 div {
	margin-top: 4px;
}
.formback #textback2 div {
	margin-top: 4px;
}
 
.formback #textback2 {
	float: left;
	width: 429px;
	border: 1px solid #000000;
	height: 25px;
}
.txbck1 {
	height: 70px;
	border: 1px solid #000000;
}
.formback #textback3 div {
	overflow: auto;
	position: absolute;
	left: 13px;
	top: 59px;
	height: 38px;
	width: 160;
}
.formback #textback4 div {
	overflow: auto;
	position: absolute;
	left: 177px;
	top: 70px;
	height: 21px;
	width: 86px;
}
.formback #textback5 div {
	overflow: auto;
	position: absolute;
	left: 324px;
	top: 70px;
	width: 53px;
	height: 25px;
}
.formback #textback6 div {
	overflow: auto;
	position: absolute;
	left: 437px;
	top: 50px;
	width: 80;
}
.formback #textback7 div {
	overflow: auto;
	position: absolute;
	left: 526px;
	top: 50px;
	width: 155px;
}
.formback #textback8 div {
	overflow: auto;
	position: absolute;
	left: 714px;
	top: 70px;
}
.formback #textback9 div {
	overflow: auto;
	position: absolute;
	left: 784px;
	top: 50px;
	width: 84px;
}
.txbck2 {
	height: 25px;
	border: 1px solid #000000;
}
.txbck2 div{
	margin-top: 4px;
}
 
.st1 {
	clear: left;
	float: left;
	width: 165px;
}
.st2 {
	float: left;
	width: 86px;
}
.st3 {
	float: left;
	width: 172px;
}
.st4 {
	float: left;
	width: 86px;
}
.st5 {
	float: left;
	width: 172px;
}
.st6 {
	float: left;
	width: 79px;
}
.st7 {
	float: left;
	width: 86px;
}
.formback #textback122 {
	border-top-color: #000000;
	border-right-color: #FFFFFF;
	border-bottom-color: #000000;
	border-left-color: #000000;
}
.formback #textback123 {
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #FFFFFF;
} 
.formback #textback129 {
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #FFFFFF;
	border-bottom-color: #000000;
	border-left-color: #000000;
}
.formback #textback130 {
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #FFFFFF;
	border-bottom-color: #000000;
	border-left-color: #FFFFFF;
}
.formback #textback131 {
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #FFFFFF;
	border-bottom-color: #000000;
	border-left-color: #FFFFFF;
}
.formback #textback132 {
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #FFFFFF;
}
.formback #textback130 div {
	overflow: auto;
	position: absolute;
	left: 490px;
	width: 290px;
	top: 460px;
} 
.formback #textback133 {
	border-top-color: #000000;
	border-right-color: #FFFFFF;
	border-bottom-color: #000000;
	border-left-color: #000000;
}
.formback #textback134 {
	border-top-color: #000000;
	border-right-color: #FFFFFF;
	border-bottom-color: #000000;
	border-left-color: #FFFFFF;
}
.formback #textback135 {
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #FFFFFF;
} 
.formback2 {
	height: 610px;
	width: 860px;
	font-family: Arial;
	font-size: 16px;
}
.formback2 #textback139 {
	float: left;
	height: 608px;
	width: 428px;
	border: 1px solid #000000;
}
.formback2 #textback140 {
	float: right;
	height: 608px;
	width: 428px;
	text-align: center;
	border: 1px solid #000000;
}
.formback2 #textback141 {
	overflow: auto;
	position: absolute;
	left: 87px;
	top: 591px;
	font-size: 14px;
}
.formback2 #textback139 div {
	text-align: center;
}
.formback2 #textback139 strong {
	overflow: auto;
	position: absolute;
	left: 107px;
	top: 45px;
	font-size: 18px;
}
.formback2 #textback140 div {
	overflow: auto;
	position: absolute;
	left: 534px;
	top: 243px;
	width: 258px;
	height: 88px;
}
 
.formback2 #textback139 text {
	overflow: auto;
	position: absolute;
	left: 32px;
	top: 148px;
	width: 371px;
	height: 301px;
}
@-moz-document url-prefix() {
 
	.formback {
		width: 900px;
	}
	.formback #textback130 div { top: 431px;  border-left: 0px; border-top: 0px; }
	.formback #textback1 { width: 426px; border-right: 0px solid #000000; }
	.formback #textback2 { width: 426px; }
	.formback #textback3 div { height: 40px; 	top: 55px; }
	.formback #textback4 div { left: 175px; }
	.formback #textback6 div { top: 40px; }
	.formback #textback7 div { top: 40px; }
	.formback #textback9 div { top: 40px; left: 778px; }
	.txbck1, .txbck2 {
		border-left: 0px solid #000000;
		border-top: 0px solid #000000;
	} 
	.st1 {
		border-left: 1px solid #000000;
	}
	.formback {
		width: 900px;
	}
}

На основе нее и с привязкой к этому файлу стилей была создана еще одна половинка:

Показать

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<TITLE>Обратная сторона</TITLE><link rel="stylesheet" href="preproback.css" type="text/css">
</HEAD>
<div class="formback">
 
<div id="textback1">
	<div><strong>Купюрная опись сдаваемых наличных денег</strong></div>
</div>
<div id="textback2">
	<div><strong>Перечень представленных чеков</strong></div>
</div>
<div id="textback3" class="txbck1 st1">
	<div>наименование достоинств</div>
</div>
<div id="textback4" class="txbck1 st2">
	<div>количество</div>
</div>
<div id="textback5" class="txbck1 st3">
	<div>сумма</div>
</div>
<div id="textback6" class="txbck1 st4">
	<div>номера чеков и серии</div>
</div>
<div id="textback7" class="txbck1 st5">
	<div>номера счетов и наимено-вание чекодателя</div>
</div>
<div id="textback8" class="txbck1 st6">
	<div>сумма</div>
</div>
<div id="textback9" class="txbck1 st7">
	<div>отметки о дефектных чеках</div>
</div>
<div id="textback10" class="txbck2 st1">
	<div>1</div>
</div>
<div id="textback11" class="txbck2 st2">
	<div>2</div>
</div>
<div id="textback12" class="txbck2 st3">
	<div>3</div>
</div>
<div id="textback13" class="txbck2 st4">
	<div>4</div>
</div>
<div id="textback14" class="txbck2 st5">
	<div>5</div>
</div>
<div id="textback15" class="txbck2 st6">
	<div>6</div>
</div>
<div id="textback16" class="txbck2 st7">
	<div>7</div>
</div>
<div id="textback17" class="txbck2 st1">
	<div>0 руб. 01 коп.</div>
</div>
<div id="textback18" class="txbck2 st2">
	<div>0</div>
</div>
<div id="textback19" class="txbck2 st3">
	<div>0 руб. 00 коп.</div>
</div>
<div id="textback20" class="txbck2 st4">
	<div></div>
</div>
<div id="textback21" class="txbck2 st5">
	<div></div>
</div>
<div id="textback22" class="txbck2 st6">
	<div></div>
</div>
<div id="textback23" class="txbck2 st7">
	<div></div>
</div>
<div id="textback24" class="txbck2 st1">
	<div>0 руб. 02 коп.</div>
</div>
<div id="textback25" class="txbck2 st2">
	<div>0</div>
</div>
<div id="textback26" class="txbck2 st3">
	<div>0 руб. 00 коп.</div>
</div>
<div id="textback27" class="txbck2 st4">
	<div></div>
</div>
<div id="textback28" class="txbck2 st5">
	<div></div>
</div>
<div id="textback29" class="txbck2 st6">
	<div></div>
</div>
<div id="textback30" class="txbck2 st7">
	<div></div>
</div>
<div id="textback31" class="txbck2 st1">
	<div>0 руб. 05 коп.</div>
</div>
<div id="textback32" class="txbck2 st2">
	<div>0</div>
</div>
<div id="textback33" class="txbck2 st3">
	<div>0 руб. 00 коп.</div>
</div>
<div id="textback34" class="txbck2 st4">
	<div></div>
</div>
<div id="textback35" class="txbck2 st5">
	<div></div>
</div>
<div id="textback36" class="txbck2 st6">
	<div></div>
</div>
<div id="textback37" class="txbck2 st7">
	<div></div>
</div>
<div id="textback38" class="txbck2 st1">
	<div>0 руб. 10 коп.</div>
</div>
<div id="textback39" class="txbck2 st2">
	<div>0</div>
</div>
<div id="textback40" class="txbck2 st3">
	<div>0 руб. 00 коп.</div>
</div>
<div id="textback41" class="txbck2 st4">
	<div></div>
</div>
<div id="textback42" class="txbck2 st5">
	<div></div>
</div>
<div id="textback43" class="txbck2 st6">
	<div></div>
</div>
<div id="textback44" class="txbck2 st7">
	<div></div>
</div>
<div id="textback45" class="txbck2 st1">
	<div>0 руб. 20 коп.</div>
</div>
<div id="textback46" class="txbck2 st2">
	<div>0</div>
</div>
<div id="textback47" class="txbck2 st3">
	<div>0 руб. 00 коп.</div>
</div>
<div id="textback48" class="txbck2 st4">
	<div></div>
</div>
<div id="textback49" class="txbck2 st5">
	<div></div>
</div>
<div id="textback50" class="txbck2 st6">
	<div></div>
</div>
<div id="textback51" class="txbck2 st7">
	<div></div>
</div>
<div id="textback52" class="txbck2 st1">
	<div>0 руб. 50 коп.</div>
</div>
<div id="textback53" class="txbck2 st2">
	<div>0</div>
</div>
<div id="textback54" class="txbck2 st3">
	<div>0 руб. 00 коп.</div>
</div>
<div id="textback55" class="txbck2 st4">
	<div></div>
</div>
<div id="textback56" class="txbck2 st5">
	<div></div>
</div>
<div id="textback57" class="txbck2 st6">
	<div></div>
</div>
<div id="textback58" class="txbck2 st7">
	<div></div>
</div>
<div id="textback59" class="txbck2 st1">
	<div>1 руб. 00 коп.</div>
</div>
<div id="textback60" class="txbck2 st2">
	<div>0</div>
</div>
<div id="textback61" class="txbck2 st3">
	<div>0 руб. 00 коп.</div>
</div>
<div id="textback62" class="txbck2 st4">
	<div></div>
</div>
<div id="textback63" class="txbck2 st5">
	<div></div>
</div>
<div id="textback64" class="txbck2 st6">
	<div></div>
</div>
<div id="textback65" class="txbck2 st7">
	<div></div>
</div>
<div id="textback66" class="txbck2 st1">
	<div>2 руб. 00 коп.</div>
</div>
<div id="textback67" class="txbck2 st2">
	<div>0</div>
</div>
<div id="textback68" class="txbck2 st3">
	<div>0 руб. 00 коп.</div>
</div>
<div id="textback69" class="txbck2 st4">
	<div></div>
</div>
<div id="textback70" class="txbck2 st5">
	<div></div>
</div>
<div id="textback71" class="txbck2 st6">
	<div></div>
</div>
<div id="textback72" class="txbck2 st7">
	<div></div>
</div>
<div id="textback73" class="txbck2 st1">
	<div>5 руб. 00 коп.</div>
</div>
<div id="textback74" class="txbck2 st2">
	<div>0</div>
</div>
<div id="textback75" class="txbck2 st3">
	<div>0 руб. 00 коп.</div>
</div>
<div id="textback76" class="txbck2 st4">
	<div></div>
</div>
<div id="textback77" class="txbck2 st5">
	<div></div>
</div>
<div id="textback78" class="txbck2 st6">
	<div></div>
</div>
<div id="textback79" class="txbck2 st7">
	<div></div>
</div>
<div id="textback80" class="txbck2 st1">
	<div>10 руб. 00 коп.</div>
</div>
<div id="textback81" class="txbck2 st2">
	<div>0</div>
</div>
<div id="textback82" class="txbck2 st3">
	<div>0 руб. 00 коп.</div>
</div>
<div id="textback83" class="txbck2 st4">
	<div></div>
</div>
<div id="textback84" class="txbck2 st5">
	<div></div>
</div>
<div id="textback85" class="txbck2 st6">
	<div></div>
</div>
<div id="textback86" class="txbck2 st7">
	<div></div>
</div>
<div id="textback87" class="txbck2 st1">
	<div>20 руб. 00 коп.</div>
</div>
<div id="textback88" class="txbck2 st2">
	<div>0</div>
</div>
<div id="textback89" class="txbck2 st3">
	<div>0 руб. 00 коп.</div>
</div>
<div id="textback90" class="txbck2 st4">
	<div></div>
</div>
<div id="textback91" class="txbck2 st5">
	<div></div>
</div>
<div id="textback92" class="txbck2 st6">
	<div></div>
</div>
<div id="textback93" class="txbck2 st7">
	<div></div>
</div>
<div id="textback94" class="txbck2 st1">
	<div>50 руб. 00 коп.</div>
</div>
<div id="textback95" class="txbck2 st2">
	<div>0</div>
</div>
<div id="textback96" class="txbck2 st3">
	<div>0 руб. 00 коп.</div>
</div>
<div id="textback97" class="txbck2 st4">
	<div></div>
</div>
<div id="textback98" class="txbck2 st5">
	<div></div>
</div>
<div id="textback99" class="txbck2 st6">
	<div></div>
</div>
<div id="textback100" class="txbck2 st7">
	<div></div>
</div>
<div id="textback101" class="txbck2 st1">
	<div>100 руб. 00 коп.</div>
</div>
<div id="textback102" class="txbck2 st2">
	<div>0</div>
</div>
<div id="textback103" class="txbck2 st3">
	<div>0 руб. 00 коп.</div>
</div>
<div id="textback104" class="txbck2 st4">
	<div></div>
</div>
<div id="textback105" class="txbck2 st5">
	<div></div>
</div>
<div id="textback106" class="txbck2 st6">
	<div></div>
</div>
<div id="textback107" class="txbck2 st7">
	<div></div>
</div>
<div id="textback108" class="txbck2 st1">
	<div>200 руб. 00 коп.</div>
</div>
<div id="textback109" class="txbck2 st2">
	<div>0</div>
</div>
<div id="textback110" class="txbck2 st3">
	<div>0 руб. 00 коп.</div>
</div>
<div id="textback111" class="txbck2 st4">
	<div></div>
</div>
<div id="textback112" class="txbck2 st5">
	<div></div>
</div>
<div id="textback113" class="txbck2 st6">
	<div></div>
</div>
<div id="textback114" class="txbck2 st7">
	<div></div>
</div>
<div id="textback115" class="txbck2 st1">
	<div>500 руб. 00 коп.</div>
</div>
<div id="textback116" class="txbck2 st2">
	<div>0</div>
</div>
<div id="textback117" class="txbck2 st3">
	<div>0 руб. 00 коп.</div>
</div>
<div id="textback118" class="txbck2 st4">
	<div></div>
</div>
<div id="textback119" class="txbck2 st5">
	<div></div>
</div>
<div id="textback120" class="txbck2 st6">
	<div></div>
</div>
<div id="textback121" class="txbck2 st7">
	<div></div>
</div>
<div id="textback133" class="txbck2 st1">
	<div></div>
</div>
<div id="textback134" class="txbck2 st2">
	<div></div>
</div>
<div id="textback135" class="txbck2 st3">
	<div></div>
</div>
<div id="textback136" class="txbck2 st4">
	<div></div>
</div>
<div id="textback137" class="txbck2 st5">
	<div></div>
</div>
<div id="textback138" class="txbck2 st6">
	<div></div>
</div>
<div id="textback139" class="txbck2 st7">
	<div></div>
</div>
<div id="textback122" class="txbck2 st1">
	<div></div>
</div>
<div id="textback123" class="txbck2 st2">
	<div><strong>Итого: </strong></div>
</div>
<div id="textback124" class="txbck2 st3">
	<div><strong>0 руб. 00 коп.</strong></div>
</div>
<div id="textback125" class="txbck2 st4">
	<div></div>
</div>
<div id="textback126" class="txbck2 st5">
	<div></div>
</div>
<div id="textback127" class="txbck2 st6">
	<div></div>
</div>
<div id="textback128" class="txbck2 st7">
	<div></div>
</div>
 
</div>
</HTML>

И просто привязанная к файлу стилей половинка:

Показать

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<TITLE>Обратная сторона</TITLE><link rel="stylesheet" href="preproback.css" type="text/css">
</HEAD>
<div class="formback2">
 
<div id="textback139">
	<div><strong>К СВЕДЕНИЮ КЛИЕНТА</strong> <text>В сумку вкладывается для сдачи в банк вся денежная выручка сверх разрешенного банком лимита остатка наличных денег. Денежная выручка подбирается по достоинствам. Оттиск пломбира должен быть ясным. При сдаче сумки с денежной выручкой инкассатору требуйте от него: предъявления удостоверения личности, доверенности на инкассацию денежной выручки и явочной карточки, заверенной печатью; выдачи порожней cумки, закрепленной за организацией (индивидуальным   предпринимателем), взамен сумки с денежной выручкой; расписку на копии препроводительной ведомости  и наложения на  ней  ясной  печати  в  получении  опломбированной   сумки.</text>
	</div>
</div>
<div id="textback140">
	<div>Данный экземпляр остается у организации (индивидуального предпринимателя) в качестве квитанции в приеме сумки.</div>
</div>
<div id="textback141">
	<div><strong>Бережно обращайтесь с сумкой</strong></div>
</div>
 
</div>
</HTML>

Все эти странички при помощи фреймов были объеденины в одну:

Показать

<html>
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" href="frameprepro.css" type="text/css">
</head>
 
<body>
	<!-- Лист 1 (Двухсторонняя печать: -->
	<div id="list1">
		<div class="frameprepro"><iframe id="iframe1" src="prepro.html" frameborder='0' scrolling='no'></iframe></div>
		<div class="frameprepro"><iframe id="iframe2" src="preprocopy.html" frameborder='0' scrolling='no'></iframe></div>
	</div>
	<!-- Лист 3 -->
	<div id="list3">
		<div class="frameprepro"><iframe id="iframe5" src="preproback.html" frameborder='0' scrolling='no'></iframe></div>
		<div class="frameprepro" id="hr"><hr></div>
		<div class="frameprepro"><iframe id="iframe6" src="preprocopyback.html" frameborder='0' scrolling='no'></iframe></div>
	</div>
	<!-- Лист 2 -->
	<div id="list2">
		<div class="frameprepro"><iframe id="iframe3" src="preproobr.html" frameborder='0' scrolling='no'></iframe></div>
		<!-- Пустой фрейм(1/2 листа) -->
		<div class="frameprepro"><div id="noframe"></div></div>
	</div>
	<!-- Лист 4 -->
	<div id="list4">
		<div class="frameprepro"><iframe id="iframe7" src="preproobrback.html" frameborder='0' scrolling='no'></iframe></div>
		<!-- Пустой фрейм(1/2 листа) -->
		<div class="frameprepro"><div id="noframe"></div></div>
	</div>
</body>
 
</html>

И ее файл стилей:

Показать

.frameprepro #iframe1, .frameprepro #iframe2, .frameprepro #iframe3, .frameprepro #iframe5, .frameprepro #iframe6, .frameprepro #iframe7, .frameprepro #noframe {
	margin: 0px;
	width: 870px;  /* +10px от страницы */
	height: 618px; /* +8px от страницы */
}
#hr {
	width: 870px;
	height: 25px;
}
#list1, #list2 {  display: block;}
#list3, #list4 {  display: block;}

Далее была создана лицевая страничка, для управления всем этим. В своем составе она имела 16 полей для ввода количества купюр, поле для ввода номера препроводительной, скрытый блок с настройками(поля юрлицо, торговый обект, банк получатель, дебет, кредит и код, а также вариант одно и двухсторонней печати), позже она была заменена на php, который проверял состояние сессии(чтобы закрыть доступ к форме), код странички:

Показать

<html>
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" href="preprovoditelnaya.css" type="text/css">
	<script type="text/javascript" src="jquery-3.1.1.js"></script>
	<script type="text/javascript" src="summprop2.js"></script> 
    <script type="text/javascript" src="loaduserform.js"></script>
	<script type="text/javascript" src="prepro.js"></script>
  	<script type="text/javascript" src="tooltip.js"></script>
    <script type="text/javascript" src="blockpad.js"></script>
  	<script type="text/javascript" src="window.js"></script>
</head>
	<!-- Загрузчик данных -->
<body onLoad="reqDB(); saveSumkN()">
	<!-- Конструктор -->
<div class="framep to_blur">
	<div class="framep1">
	<div class="sh1 prepronum">Препроводительная номер:</div>
    <div class="sh1"><INPUT id="prepronum" class="prepronum" VALUE ="00000001" onChange="chkinp()" data="Для перехода в следующее поле нажмите Tab, для перехода в предыдущее поле нажмите Shift и Tab." maxlength="14"></div>
    <div class="tooltip-block"></div>
	<div id="1cop" class="sh1">1 коп.<INPUT id="1c" class="ruble" VALUE ="" onChange="chkinp()" onFocus="blockpad(1)" maxlength="3"> штук.</div>
	<div id="2cop" class="sh1">2 коп.<INPUT id="2c" class="ruble" VALUE ="" onChange="chkinp()" onFocus="blockpad(2)" maxlength="3"> штук.</div>
	<div id="5cop" class="sh1">5 коп.<INPUT id="5c" class="ruble" VALUE ="" onChange="chkinp()" onFocus="blockpad(3)" maxlength="3"> штук.</div>
	<div id="10cop" class="sh1">10 коп.<INPUT id="10c" class="ruble" VALUE ="" onChange="chkinp()" onFocus="blockpad(4)" maxlength="3"> штук.</div>
	<div id="20cop" class="sh1">20 коп.<INPUT id="20c" class="ruble" VALUE ="" onChange="chkinp()" onFocus="blockpad(5)" maxlength="3"> штук.</div>
	<div id="50cop" class="sh1">50 коп.<INPUT id="50c" class="ruble" VALUE ="" onChange="chkinp()" onFocus="blockpad(6)" maxlength="3"> штук.</div>
	<div id="1rub" class="sh1">1 руб.<INPUT id="1r" class="ruble" VALUE ="" onChange="chkinp()" onFocus="blockpad(7)" maxlength="3"> штук.</div>
	<div id="2rub" class="sh1">2 руб.<INPUT id="2r" class="ruble" VALUE ="" onChange="chkinp()" onFocus="blockpad(8)" maxlength="3"> штук.</div>
	<div id="5rub" class="sh1">5 руб.<INPUT id="5r" class="ruble" VALUE ="" onChange="chkinp()" onFocus="blockpad(9)" maxlength="3"> штук.</div>
	<div id="10rub" class="sh1">10 руб.<INPUT id="10r" class="ruble" VALUE ="" onChange="chkinp()" onFocus="blockpad(10)" maxlength="3"> штук.</div>
	<div id="20rub" class="sh1">20 руб.<INPUT id="20r" class="ruble" VALUE ="" onChange="chkinp()" onFocus="blockpad(11)" maxlength="3"> штук.</div>
	<div id="50rub" class="sh1">50 руб.<INPUT id="50r" class="ruble" VALUE ="" onChange="chkinp()" onFocus="blockpad(12)" maxlength="3"> штук.</div>
	<div id="100rub" class="sh1">100 руб.<INPUT id="100r" class="ruble" VALUE ="" onChange="chkinp()" onFocus="blockpad(13)" maxlength="3"> штук.</div>
	<div id="200rub" class="sh1">200 руб.<INPUT id="200r" class="ruble" VALUE ="" onChange="chkinp()" onFocus="blockpad(14)" maxlength="3"> штук.</div>
	<div id="500rub" class="sh1">500 руб.<INPUT id="500r" class="ruble" VALUE ="" onChange="chkinp()" onFocus="blockpad(15)" maxlength="3"> штук.</div>
	<div class="print1st">
		<div class="sh1 bt1"><button type="button" id="printa" />Печать стороны А</button></div>
		<div class="sh1 bt1"><button type="button" id="printb" />Печать стороны Б</button></div>
	</div>
	<div class="sh1 bt1 print2st"><button type="button" id="printall" />Печать ведомости</button></div>
    <div class="popbutton sh1 bt1" data-window="1"><button type="button" id="editform" />Изменить личные данные</button></div>
	<div class="calendar">
	  <input type="text" name="date" class="tcal" id="tcall" value="" readonly /></div>
	</div>
	<!-- Печатная форма 1 -->
	<div class="framep2"><iframe id="frame2" src="preprovoditelnaya.html" frameborder="0" scrolling="no"></iframe></div>
</div>
<div id="1" class="popwindow" data-title="Изменение данных объекта" data-height="320">
  	<div class="editform">Наименование объекта : <INPUT id="editformapte" class="inputform" VALUE ="Аптека №1 ООО Тестовая" onChange="editform()" maxlength="40"></div>
    <div class="editform">Юрлицо : <INPUT id="editformjurlicoe" class="inputform" VALUE ="ООО Тестовая" onChange="editform()" maxlength="30"></div>
    <div class="editform">Банк получатель : <INPUT id="editformbanke" class="inputform" VALUE ="ОАО Тестовый банк, код 182 г.Минск" onChange="editform()" maxlength="40"></div>
    <div class="editform">Дебет : <INPUT id="editformdebete" class="inputform" VALUE ="ХХХХХХХХХХХХХХ" onChange="editform()" maxlength="34"></div>
    <div class="editform">Кредит : <INPUT id="editformcredite" class="inputform" VALUE ="YYYYYYYYYYYY" onChange="editform()" maxlength="34"></div>
    <div class="editform">Код : <INPUT id="editformkode" class="inputform" VALUE ="ZZZZ" onChange="editform()" maxlength="30"></div>
	<div class="editform">Двусторонняя печать : <input type="checkbox" id="option" checked="checked" onChange="editform()"></div>
    <div class="editform"><text id="responseserv"></text><button type="button" id="editform2" />Изменить</button></div>
</div>
</body>
 
</html>

И файл стилей:

Показать

.framep1 {
	float: left;
	width: 300px;
}
 
.framep2 {
	border: 1px none #000000; 
/*	visibility: hidden; */
}
 
.framep2  #frame2{
	margin: 0px;
	width: 880px;  /* frameprepro.css +10px*/
	height: 5020px; /* frameprepro.css x8 +50 +10px*/
	border: 2px dotted #000000;
	background: #FFFFFF;
}
 
.ruble, .bt1 {
	width: 40px;
	font-family: "Arial Black";
	text-align: center;
	margin-right: 5px;
	margin-left: 5px;
}
 
.sh1, .prepronum {
	width: 200px;
	float: left;
	text-align: right;
	margin-top: 10px;
	font-family: "Arial Black";
}
 
.prepronum {
	margin-left: 10px;
    margin-bottom: 15px;
    text-align: center;
}
 
#printall, #printa, #printb {
  	width: 200px;
	float: center;
	text-align: center;
	margin-top: 15px;
    margin-left: 10px;
	font-family: "Arial Black";
    height: 40px;
}
 
#editform {
  	width: 200px;
	float: center;
	text-align: center;
	margin-top: 15px;
    margin-left: 10px;
	font-family: "Arial Black";
    height: 60px;
}
 
.tooltip-block{	
		float:left;
		background: white;
		border: 1px solid rgb(230, 230, 230);
		padding: 5px 8px;
		font-size: 16px;
		width: 300px;
		line-height: 25px;
		color: rgb(82, 82, 82);
		z-index: 400;
		display button:none;
        font-family: "Arial";
}
 
.box_window{
  width:700px;
  position:fixed;
  top:15%;
  left:50%;
  margin-left:-350px;
  z-index:11;
  background: #fff;
  display:none;
  padding:20px;
}
 
.box_window_in {
  position: relative;
  overflow-y:auto;
}
 
.box_title {
  position: absolute;
  left: 0px;
  top: -30px;
  color: #fff;
  font-size: 24px;
}
 
.bw_close{
  position:absolute;
  top: -25px;
  font-size: 16px;
  color: #fff;
  right:0px;
  cursor:pointer;
  z-index: 2;
}
 
.mask{
  position:fixed;
  background:rgba(0, 0, 0, 0.38);
  display:none;
  height:100%;
  width: 100%;
  z-index:10;
}
 
.to_blur.blur {
 -webkit-filter: blur(5px);
 -moz-filter: blur(5px);
 -o-filter: blur(5px);
 -ms-filter: blur(5px);
 filter: blur(5px);
}
 
.editform {
  	font-family: "Arial Black";
	text-align: right;
	margin-right: 5px;
	margin-left: 5px;
  	margin-top: 10px;
}
 
.inputform {
	width: 420px;
	font-family: "Arial Black";
	text-align: center;
	margin-right: 5px;
	margin-left: 5px;
}
 
#editform2 {
	width: 100px;
  	height: 50px;
	font-family: "Arial Black";
	text-align: center;
	margin-right: 5px;
	margin-left: 5px;
}
 
#responseserv {
	font-family: "Arial";
	text-align: center;
	margin-right: 5px;
	margin-left: 20px;
  	font-size: 12px;
}
 
.print1st {  display: block;}
.print2st {  display: none;}
 
.calendar {
	overflow: auto;
	position: absolute;
	width: 207px;
	height: 46px;
	left: 313px;
	top: 126px;
}
 
/* input box in default state */ 
.tcalInput {
	background: url('img/cal.gif') 100% 50% no-repeat;
	padding-right: 20px;
	cursor: pointer;
}
 
/* additional properties for input boxe in activated state, above still applies unless in conflict */
.tcalActive {
	background-image: url('img/no_cal.gif');
}
/* container of calendar's pop-up */
#tcal {
	position: absolute;
	visibility: hidden;
	z-index: 100;
	width: 170px;
	background-color: white;
	margin-top: 2px;
	padding: 0 2px 2px 2px;
	border: 1px solid silver;
 
	-moz-box-shadow: 3px 3px 4px silver;
	-webkit-box-shadow: 3px 3px 4px silver;
	box-shadow: 3px 3px 4px silver;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='silver')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='silver');
}
 
/* table containing navigation and current month */
#tcalControls {
	border-collapse: collapse;
	border: 0;
	width: 100%;
}
#tcalControls td {
	border-collapse: collapse;
	border: 0;
	padding: 0;
	width: 16px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	cursor: pointer;
}
#tcalControls th {
	border-collapse: collapse;
	border: 0;
	padding: 0;
	line-height: 25px;
	font-size: 10px;
	text-align: center;
	font-family: Tahoma, Geneva, sans-serif;
	font-weight: bold;
	white-space: nowrap;
}
#tcalPrevYear { background-image: url('img/prev_year.gif'); }
#tcalPrevMonth { background-image: url('img/prev_mon.gif'); }
#tcalNextMonth { background-image: url('img/next_mon.gif'); }
#tcalNextYear { background-image: url('img/next_year.gif'); }
 
/* table containing week days header and calendar grid */
#tcalGrid {
	border-collapse: collapse;
	border: 1px solid silver;
	width: 100%;
}
#tcalGrid th {
	border: 1px solid silver;
	border-collapse: collapse;
	padding: 3px 0;
	text-align: center;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 10px;
	background-color: gray;
	color: white;
}
#tcalGrid td {
	border: 0;
	border-collapse: collapse;
	padding: 2px 0;
	text-align: center;
	font-family: Tahoma, Geneva, sans-serif;
	width: 14%;
	font-size: 11px;
	cursor: pointer;
}		
#tcalGrid td.tcalOtherMonth { color: #917d7d; }
#tcalGrid td.tcalWeekend { background-color: #fbffbf; }
#tcalGrid td.tcalToday { border: 1px solid red; }
#tcalGrid td.tcalSelected { background-color: #FFB3BE; }	
 
#tcall {  display: block;}
 
@-moz-document url-prefix() {
	.calendar {
		overflow: hidden;
	}
}
 
body {
	width: 1200px;
	-webkit-transform-origin: 0px 0px;
	-moz-transform-origin: 0px 0px;
	-ms-transform-origin: 0px 0px;
	-o-transform-origin: 0px 0px;
	transform-origin: 0px 0px;
	-webkit-transform:scale(0.6);
	-moz-transform:scale(0.6);
	-ms-transform:scale(0.6);
	-o-transform:scale(0.6);
	transform:scale(0.6); 
}

К ней были подключены: библиотека jquery, немного переделанная функция суммы прописью(часть кода в основном скрипте), для того чтобы писать общую сумму в препроводительную:

Показать

function numberToString(_number, toUpper) {
	var parseNumber = function(){
	  var dictionary = [
		[ "", "один", "два", "три", "четыре", "пять", "шесть", "семь", "восемь", "девять",
		"десять", "одиннадцать", "двенадцать", "тринадцать", "четырнадцать", "пятнадцать",
		"шестнадцать", "семнадцать", "восемнадцать", "девятнадцать" ],
		[ "", "десять", "двадцать", "тридцать", "сорок", "пятьдесят", "шестьдесят", "семьдесят", "восемьдесят", "девяносто" ],
		[ "", "сто", "двести", "триста", "четыреста", "пятьсот", "шестьсот", "семьсот", "восемьсот", "девятьсот" ],
		[ "тысяч|а|и|", "миллион||а|ов", "миллиард||а|ов", "триллион||а|ов" ]
	  ];
	  function getNumber(number, limit){
		var temp = number.match(/^\d{1,3}([,|\s]\d{3})+/);
		if(temp) return temp[0].replace(/[,|\s]/g, "");
		temp = Math.abs( parseInt(number) );
		if( temp !== temp || temp > limit ) return null;
		return String(temp);
	  };
	  function setEnding(variants, number){
		variants = variants.split("|");
		number = number.charAt( number.length - 2 ) === "1" ? null : number.charAt( number.length - 1 );
		switch(number){
		  case "1":
		  return variants[0] + variants[1];
		  case "2": case "3": case "4":
		  return variants[0] + variants[2];
		  default:
		  return variants[0] + variants[3];
		};
	  };
	  function getPostfix(postfix, number){
		if( typeof postfix === "string" || postfix instanceof String ){
		  if( postfix.split("|").length < 3 ) return " " + postfix;
		  return " " + setEnding(postfix, number);
		};
		return "";
	  };
 
	  return function(number, postfix){
		if(typeof number === "undefined")
		  return "999" + new Array(dictionary[3].length + 1).join(" 999");
		number = String( number );
		var minus = false;
		number.replace(/^\s+/, "").replace(/^-\s*/, function(){
		  minus = true;
		  return "";
		});
		number = getNumber(number, Number( new Array(dictionary[3].length + 2).join("999") ));
		if(!number) return "";
		postfix = getPostfix(postfix, number);
		if(number === "0") return "ноль" + postfix;
		var position = number.length, i = 0, j = 0, result = [];
		while(position--){
		  result.unshift( dictionary[ i++ ][ number.charAt(position) ] );
		  if(i === 2 && number.charAt(position) === "1" )
			result.splice(0, 2, dictionary[0][ number.substring( position, position + 2 ) ]);
		  if(i === 3 && position !== 0 ){
			i = 0;
			if( position > 3 && number.substring( position - 3, position ) === "000" ){
			  j++; continue;
			};
			result.unshift( setEnding(dictionary[3][j++], number.substring( 0, position )) );
		  };
		};
		position = result.length - 5;
		switch( result[position] ){
		  case "один": result[position] = "одна"; break;
		  case "два": result[position] = "две"; break;
		};
		if(minus) result.unshift("минус");
		return result.join(" ").replace(/\s+$/, "").replace(/\s+/g, " ") + postfix;
	  };
	}();
 
	function fn(num)
	{
	   num = (''+num).split(/[.,]/);
	   num[0] = +num[0] ? parseNumber(num[0],"рубл|ь|я|ей") : '';
	   //num[1] = +num[1] ? parseNumber(num[1],"копе|йка|йки|ек") : '';  не нужно
	   return   num.join( num[0] /*&& num[1] */ ? " " : "") //вывод только рублей
	}
 
	if (_number != 0) {
		_string = fn(_number)[0].toUpperCase();	//преобразуем в строку
		for(i=1; i < fn(_number).length; i++) {
			_string = _string + fn(_number)[i];
	}} else {
		_string = "ноль рублей";
	}
 
	if (toUpper === true || toUpper == 'upper') {
		_string = _string.substr(0,1).toUpperCase() + _string.substr(1);
	}
 
	return _string.replace(/[\s]{1,}/g, ' '); 
};
 
Number.prototype.numberToString = function(toUpper) {
	return numberToString(this, toUpper);
};
String.prototype.numberToString = function(toUpper) {
	return numberToString(this, toUpper);
};

Это, кстати, второй вариант суммы прописью, в первом были глюки при вводе, например, 10000 — пришлось переписать.
Скрипт загрузки данных торгового объекта при помощи асинхронного XmlHttpRequest-а на бэкэнд:

Показать

function reqDB() { 
//блок отката изменений фрейма(видимость)
	printframe = document.getElementById('frame2');  //меняем высоту фрейма в 1 от оригинального
	sprint = printframe.style;
	sprint.height = '5020px';
	var iframe = document.getElementsByTagName('iframe')[0];  //preprovoditelnaya.html
	var iframeDoc = iframe.contentWindow.document;
	if (iframeDoc.readyState == 'complete') {
		var iframein1 = iframeDoc.getElementById('list1');
		printframein1 = iframein1.style;
		printframein1.display = 'block';
		var iframein2 = iframeDoc.getElementById('list2');
		printframein2 = iframein2.style;
		printframein2.display = 'block';
		var iframein3 = iframeDoc.getElementById('list3');
		printframein3 = iframein3.style;
		printframein3.display = 'block';
		var iframein4 = iframeDoc.getElementById('list4');
		printframein4 = iframein4.style;
		printframein4.display = 'block';  
		} 
//блок перезагрузки страницы	
var loadapt, loadjurlico, loadbank, loaddebet, loadcredit, loadkod, loadchecked;
var print1st = document.querySelector('.print1st'),
	print2st = document.querySelector('.print2st');
    xmlhttp=new XMLHttpRequest();
	xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
 
      loadapt = this.responseXML.getElementsByTagName("apt")[0].attributes[0].textContent;
      loadjurlico = this.responseXML.getElementsByTagName("jurlico")[0].attributes[0].textContent;
      loadbank = this.responseXML.getElementsByTagName("bank")[0].attributes[0].textContent;
      loaddebet = this.responseXML.getElementsByTagName("debet")[0].attributes[0].textContent;
      loadcredit = this.responseXML.getElementsByTagName("credit")[0].attributes[0].textContent;
      loadkod = this.responseXML.getElementsByTagName("kod")[0].attributes[0].textContent;
	  loadchecked = this.responseXML.getElementsByTagName("print2st")[0].attributes[0].textContent;
      var iframe = document.getElementsByTagName('iframe')[0];  //prepro.html
      var iframeDoc = iframe.contentWindow.document;
      if (iframeDoc.readyState == 'complete') {
              var iframein = iframeDoc.getElementById('iframe1');
              var iframeDocin = iframein.contentWindow.document;
              if (iframeDocin.readyState == 'complete') {
                      iframeDocin.getElementById('text10').innerHTML = '<div><strong id=\"strapt\">' + loadapt + '</strong></div>';
                      iframeDocin.getElementById('text13').innerHTML = '<div><strong id=\"strjurlico\">' + loadjurlico + '</strong></div>';
                      iframeDocin.getElementById('text20').innerHTML = '<div><strong id=\"strbank\">' + loadbank + '</strong></div>';
                      iframeDocin.getElementById('text11').innerHTML = '<div id=\"strdebet\">' + loaddebet + '</div>';
                      iframeDocin.getElementById('text18').innerHTML = '<div id=\"strcredit\">' + loadcredit + '</div>';
                	  iframeDocin.getElementById('text31').innerHTML = '<div><strong id=\"strkod\">' + loadkod + '</strong></div>';
                  }
          }
      var iframe = document.getElementsByTagName('iframe')[0];  //preprocopy.html
      var iframeDoc = iframe.contentWindow.document;
      if (iframeDoc.readyState == 'complete') {
              var iframein = iframeDoc.getElementById('iframe2');
              var iframeDocin = iframein.contentWindow.document;
              if (iframeDocin.readyState == 'complete') {
                      iframeDocin.getElementById('text10').innerHTML = '<div><strong>' + loadapt + '</strong></div>';
                      iframeDocin.getElementById('text13').innerHTML = '<div><strong>' + loadjurlico + '</strong></div>';
                      iframeDocin.getElementById('text20').innerHTML = '<div><strong>' + loadbank + '</strong></div>';
                      iframeDocin.getElementById('text11').innerHTML = '<div>' + loaddebet + '</div>';
                      iframeDocin.getElementById('text18').innerHTML = '<div>' + loadcredit + '</div>';
                	  iframeDocin.getElementById('text31').innerHTML = '<div><strong>' + loadkod + '</strong></div>';
                  }
          }
      var iframe = document.getElementsByTagName('iframe')[0];  //preproobr.html
      var iframeDoc = iframe.contentWindow.document;
      if (iframeDoc.readyState == 'complete') {
              var iframein = iframeDoc.getElementById('iframe3');
              var iframeDocin = iframein.contentWindow.document;
              if (iframeDocin.readyState == 'complete') {
                      iframeDocin.getElementById('text10').innerHTML = '<div><strong>' + loadapt + '</strong></div>';
                      iframeDocin.getElementById('text13').innerHTML = '<div><strong>' + loadjurlico + '</strong></div>';
                      iframeDocin.getElementById('text20').innerHTML = '<div><strong>' + loadbank + '</strong></div>';
                      iframeDocin.getElementById('text11').innerHTML = '<div>' + loaddebet + '</div>';
                      iframeDocin.getElementById('text18').innerHTML = '<div>' + loadcredit + '</div>';
                	  iframeDocin.getElementById('text31').innerHTML = '<div><strong>' + loadkod + '</strong></div>';
                  }
          }
	var chkbool;
	  if (loadchecked == 'false') {
			print1st.style.display = 'block';   //односторонняя печать
			print2st.style.display = 'none';
			chkbool = false;
		}
		else {
			print1st.style.display = 'none';   //двухсторонняя печать
			print2st.style.display = 'block';
			chkbool = true;
			}
 
      document.getElementById('editformapte').value = loadapt;
      document.getElementById('editformjurlicoe').value = loadjurlico;
      document.getElementById('editformbanke').value = loadbank;
      document.getElementById('editformdebete').value = loaddebet;
      document.getElementById('editformcredite').value = loadcredit;
      document.getElementById('editformkode').value = loadkod;
	  document.getElementById('option').checked = chkbool;
	  if (loadapt == "" && loadjurlico == "" && loadbank == "" && loaddebet == "" && loadcredit == "") { document.getElementById('editform').click(); } //изменить настройки при незаполненных полях
    }
  }
 
  xmlhttp.open("GET","userform.php",true);
  xmlhttp.send();
}

И соответственно бэкэнд к нему(отдает xml с данными объекта):

Показать

<?php 
session_start();
//НАСТРОЙКИ --------------------------->
include 'settings.php';
//--------------------------------->
 
if (isset($_SESSION['email'])) { 
	$username = $_SESSION['email']; 
	}
else {
  $username = 'sergei.dudko3';
}
 
$transferstat = new mysqli($dbaddr, $dbuser, $dbpass, $db);
	if ($transferstat->connect_errno) {
		echo "Не удалось подключиться к MySQL:".$transferstat->connect_error; 
		exit;
		} 
$transferstat->query("SET NAMES utf8");	
$result = $transferstat->query("SELECT * FROM `prepro` WHERE login = '$username' limit 1");
$row = $result->fetch_array();
 
$resultsumk = $transferstat->query("SELECT * FROM `statprepro` WHERE login = '$username' ORDER BY ID DESC limit 1");
$rowsumk = $resultsumk->fetch_array(); 
 
//mb_strlen(utf8_decode($row['APT']))
 
for ($i=0; $i < strlen($row['APT']); $i++) {
    if ($row['APT'][$i] == chr(34)) { $rw['APT'] = $rw['APT'].'&quot;'; }
  		else { $rw['APT'] = $rw['APT'].$row['APT'][$i]; }
	}
 
for ($i=0; $i < strlen($row['JURLICO']); $i++) {
    if ($row['JURLICO'][$i] == chr(34)) { $rw['JURLICO'] = $rw['JURLICO'].'&quot;'; }
  		else { $rw['JURLICO'] = $rw['JURLICO'].$row['JURLICO'][$i]; }
	}
 
for ($i=0; $i < strlen($row['BANK']); $i++) {
    if ($row['BANK'][$i] == chr(34)) { $rw['BANK'] = $rw['BANK'].'&quot;'; }
  		else { $rw['BANK'] = $rw['BANK'].$row['BANK'][$i]; }
	}
 
for ($i=0; $i < strlen($row['DEBET']); $i++) {
    if ($row['DEBET'][$i] == chr(34)) { $rw['DEBET'] = $rw['DEBET'].'&quot;'; }
  		else { $rw['DEBET'] = $rw['DEBET'].$row['DEBET'][$i]; }
	}
 
for ($i=0; $i < strlen($row['CREDIT']); $i++) {
    if ($row['CREDIT'][$i] == chr(34)) { $rw['CREDIT'] = $rw['CREDIT'].'&quot;'; }
  		else { $rw['CREDIT'] = $rw['CREDIT'].$row['CREDIT'][$i]; }
	}
 
for ($i=0; $i < strlen($row['KOD']); $i++) {
    if ($row['KOD'][$i] == chr(34)) { $rw['KOD'] = $rw['KOD'].'&quot;'; }
  		else { $rw['KOD'] = $rw['KOD'].$row['KOD'][$i]; }
	}
 
for ($i=0; $i < strlen($rowsumk['PREPRONUM']); $i++) {
    if ($rowsumk['PREPRONUM'][$i] == chr(34)) { $rw['PREPRONUM'] = $rw['PREPRONUM'].'&quot;'; }
  		else { $rw['PREPRONUM'] = $rw['PREPRONUM'].$rowsumk['PREPRONUM'][$i]; }
	}
 
header('Content-type: text/xml; charset=windows-1251');
echo '<?xml version="1.0" encoding="windows-1251" ?>';
echo '<!DOCTYPE response>'; 
echo '<response>';
echo '<apt name="'.iconv('utf-8', 'cp1251', $rw['APT']).'"></apt>';
echo '<jurlico name="'.iconv('utf-8', 'cp1251', $rw['JURLICO']).'"></jurlico>';
echo '<bank name="'.iconv('utf-8', 'cp1251', $rw['BANK']).'"></bank>';
echo '<debet name="'.iconv('utf-8', 'cp1251', $rw['DEBET']).'"></debet>';
echo '<credit name="'.iconv('utf-8', 'cp1251', $rw['CREDIT']).'"></credit>';
echo '<kod name="'.iconv('utf-8', 'cp1251', $rw['KOD']).'"></kod>';
echo '<print2st name="'.iconv('utf-8', 'cp1251', $row['PRINT2ST']).'"></print2st>';
echo '<prepronum name="'.iconv('utf-8', 'cp1251', $rw['PREPRONUM']).'"></prepronum>';
echo '</response>'; 
 
 
$transferstat->close();
?>

Основной скрипт проекта, в составе которого доработка суммы прописью. Суть в том, что необходимо писать количество копеек в формате «01 копейка» или «11 копеек». Для этого соответственно, необходимо оперировать рублями и копейками, но в javascript идет ошибка при рассчетах в типе float, поэтому все рассчеты идут в копейках(целых числах). Сюда же добавлен измененный скрипт календаря, он был изменен так, чтобы работать напрямую с текстом вложенных в фрейм страничек, а не полем input. Т.к. он висит на лицевой странице «над фреймом», то при печати его даже не нужно делать невидимым. Здесь же организовано изменение данных пользователя(с выводом ответа от xmlhttprequest в статус изменения, т.е. виден результат), сохранение номера препроводительной по средствам того же xhr. Реализовано два варианта печати(односторонняя и двусторонняя). Ну и собственно скрипт изменений в печатной форме по средствам внесенных изменений в input. Код скрипта:

Показать

var r1c, r2c, r5c, r10c, r20c, r50c, r1r, r2r, r5r, r10r, r20r, r50r, r100r, r200r, summ, dat, prepronum;  //объявляем переменные за пределами функции
var d=new Date();
 
$(function(){
 
	$('#printall').click(function print_form(){ //печать
		printAllstr();
		StatisticPrint();
	});
 
	$('#printa').click(function print_form(){ //печать стороны А
		printAstr();
	});
 
	$('#printb').click(function print_form() { //печать стороны Б
		printBstr();
		StatisticPrint();
	});
 
	$('#editform2').click(function edit_form(){ //изменить личные данные
      	var editformapte, editformjurlicoe, editformbanke, editformdebete, editformcredite, editformkode, editformchecked;
		editformapte = document.getElementById('editformapte').value;
        editformjurlicoe = document.getElementById('editformjurlicoe').value;
        editformbanke = document.getElementById('editformbanke').value;
        editformdebete = document.getElementById('editformdebete').value;
        editformcredite = document.getElementById('editformcredite').value;
        editformkode = document.getElementById('editformkode').value;
		editformchecked = document.getElementById('option').checked;
      	var xhr = new XMLHttpRequest();
		xhr.onreadystatechange=function() {
		if (xhr.readyState==4 && xhr.status==200) {
			document.getElementById('responseserv').innerHTML = xhr.responseText;
			reqDB();
			}
		}
		var request = 'apt=' + encodeURIComponent(editformapte) + '&' + 'jurlico=' + encodeURIComponent(editformjurlicoe) + '&' + 'bank=' + encodeURIComponent(editformbanke) + '&' + 'debet=' + encodeURIComponent(editformdebete) + '&' + 'credit=' + encodeURIComponent(editformcredite) + '&' + 'kod=' + encodeURIComponent(editformkode) + '&' + 'print2st=' + encodeURIComponent(editformchecked);
		xhr.open("GET", 'editform.php?' + request, false);
      	xhr.send();
	});
})
 
function chkinp(){ //изменение данных в input
 
    prepronum = $("#prepronum").val();
	if ($("#1c").val() != "") { r1c = parseInt($("#1c").val()); } else { r1c = 0; }
	if ($("#2c").val() != "") { r2c = parseInt($("#2c").val()); } else { r2c = 0; }
	if ($("#5c").val() != "") { r5c = parseInt($("#5c").val()); } else { r5c = 0; }
	if ($("#10c").val() != "") { r10c = parseInt($("#10c").val()); } else { r10c = 0; }
	if ($("#20c").val() != "") { r20c = parseInt($("#20c").val()); } else { r20c = 0; }
	if ($("#50c").val() != "") { r50c = parseInt($("#50c").val()); } else { r50c = 0; }
	if ($("#1r").val() != "") { r1r = parseInt($("#1r").val()); } else { r1r = 0; }
	if ($("#2r").val() != "") { r2r = parseInt($("#2r").val()); } else { r2r = 0; }
	if ($("#5r").val() != "") { r5r = parseInt($("#5r").val()); } else { r5r = 0; }
	if ($("#10r").val() != "") { r10r = parseInt($("#10r").val()); } else { r10r = 0; }
	if ($("#20r").val() != "") { r20r = parseInt($("#20r").val()); } else { r20r = 0; }
	if ($("#50r").val() != "") { r50r = parseInt($("#50r").val()); } else { r50r = 0; }
	if ($("#100r").val() != "") { r100r = parseInt($("#100r").val()); } else { r100r = 0; }
	if ($("#200r").val() != "") { r200r = parseInt($("#200r").val()); } else { r200r = 0; }
	if ($("#500r").val() != "") { r500r = parseInt($("#500r").val()); } else { r500r = 0; }
 
	summ = 0; //обнуляем сумму(а то будет undefined). далее считаем в копейках, иначе полная жопа с плавающей точкой.
    summ = (r1c * 1) + (r2c * 2) + (r5c * 5) + (r10c * 10) + (r20c * 20) + (r50c * 50) + (r1r * 100) + (r2r * 200) + (r5r * 500) + (r10r * 1000) + (r20r * 2000) + (r50r * 5000) + (r100r * 10000) + (r200r * 20000) + (r500r * 50000);
 
	var summcop = (summ % 100);
	var summrub = (summ - summcop).toString().slice(0,-2); 
 
	var summrb, summcp, summrc;
	if (summcop == 0) {summcp = '00';}
		else {if (summcop < 10) {summcp = '0' + summcop.toString();}
				else {summcp = summcop.toString();}}
	if (summrub == 0) {summrb = '0';}
		else {summrb = summrub.toString();}
	summrc = summrb + ',' + summcp;
 
	var month=new Array(12);
		month[0]="января";
		month[1]="февраля";
		month[2]="марта";
		month[3]="апреля";
		month[4]="мая";
		month[5]="июня";
		month[6]="июля";
		month[7]="августа";
		month[8]="сентября";
		month[9]="октября";
		month[10]="ноября";
		month[11]="декабря";
	dat = d.getDate().toString() + ' ' + month[d.getMonth()] + ' ' + d.getFullYear().toString(); 
 
	var iframe = document.getElementsByTagName('iframe')[0];  //preproback.html
	var iframeDoc = iframe.contentWindow.document;
	if (iframeDoc.readyState == 'complete') {
			var iframein = iframeDoc.getElementById('iframe5');
			var iframeDocin = iframein.contentWindow.document;
			if (iframeDocin.readyState == 'complete') {
					iframeDocin.getElementById('textback18').innerHTML = '<div>' + r1c.toString() + '</div>';
					iframeDocin.getElementById('textback25').innerHTML = '<div>' + r2c.toString() + '</div>';
					iframeDocin.getElementById('textback32').innerHTML = '<div>' + r5c.toString() + '</div>';
					iframeDocin.getElementById('textback39').innerHTML = '<div>' + r10c.toString() + '</div>';
					iframeDocin.getElementById('textback46').innerHTML = '<div>' + r20c.toString() + '</div>';
					iframeDocin.getElementById('textback53').innerHTML = '<div>' + r50c.toString() + '</div>';
					iframeDocin.getElementById('textback60').innerHTML = '<div>' + r1r.toString() + '</div>';
					iframeDocin.getElementById('textback67').innerHTML = '<div>' + r2r.toString() + '</div>';
					iframeDocin.getElementById('textback74').innerHTML = '<div>' + r5r.toString() + '</div>';
					iframeDocin.getElementById('textback81').innerHTML = '<div>' + r10r.toString() + '</div>';
					iframeDocin.getElementById('textback88').innerHTML = '<div>' + r20r.toString() + '</div>';
					iframeDocin.getElementById('textback95').innerHTML = '<div>' + r50r.toString() + '</div>';
					iframeDocin.getElementById('textback102').innerHTML = '<div>' + r100r.toString() + '</div>';
					iframeDocin.getElementById('textback109').innerHTML = '<div>' + r200r.toString() + '</div>';
					iframeDocin.getElementById('textback116').innerHTML = '<div>' + r500r.toString() + '</div>';					
					iframeDocin.getElementById('textback19').innerHTML = '<div>' + numberToCop( r1c *1 ) + '</div>';
					iframeDocin.getElementById('textback26').innerHTML = '<div>' + numberToCop( r2c * 2 ) + '</div>';
					iframeDocin.getElementById('textback33').innerHTML = '<div>' + numberToCop( r5c * 5 ) + '</div>';
					iframeDocin.getElementById('textback40').innerHTML = '<div>' + numberToCop( r10c * 10 ) + '</div>';
					iframeDocin.getElementById('textback47').innerHTML = '<div>' + numberToCop( r20c * 20 ) + '</div>';
					iframeDocin.getElementById('textback54').innerHTML = '<div>' + numberToCop( r50c * 50 ) + '</div>';
					iframeDocin.getElementById('textback61').innerHTML = '<div>' + numberToRub( r1r ) + '</div>';
					iframeDocin.getElementById('textback68').innerHTML = '<div>' + numberToRub( r2r * 2 ) + '</div>';
					iframeDocin.getElementById('textback75').innerHTML = '<div>' + numberToRub( r5r * 5 ) + '</div>';
					iframeDocin.getElementById('textback82').innerHTML = '<div>' + numberToRub( r10r * 10 ) + '</div>';
					iframeDocin.getElementById('textback89').innerHTML = '<div>' + numberToRub( r20r * 20 ) + '</div>';
					iframeDocin.getElementById('textback96').innerHTML = '<div>' + numberToRub( r50r * 50 ) + '</div>';
					iframeDocin.getElementById('textback103').innerHTML = '<div>' + numberToRub( r100r * 100 ) + '</div>';
					iframeDocin.getElementById('textback110').innerHTML = '<div>' + numberToRub( r200r * 200 ) + '</div>';
					iframeDocin.getElementById('textback117').innerHTML = '<div>' + numberToRub( r500r * 500 ) + '</div>';
					iframeDocin.getElementById('textback124').innerHTML = '<div><strong>' + summrb + ' руб., ' + summcp + ' коп.' + '</strong></div>';
				}
		}
 
	var iframe = document.getElementsByTagName('iframe')[0];  //preprocopyback.html
	var iframeDoc = iframe.contentWindow.document;
	if (iframeDoc.readyState == 'complete') {
			var iframein = iframeDoc.getElementById('iframe6');
			var iframeDocin = iframein.contentWindow.document;
			if (iframeDocin.readyState == 'complete') {
					iframeDocin.getElementById('textback18').innerHTML = '<div>' + r1c.toString() + '</div>';
					iframeDocin.getElementById('textback25').innerHTML = '<div>' + r2c.toString() + '</div>';
					iframeDocin.getElementById('textback32').innerHTML = '<div>' + r5c.toString() + '</div>';
					iframeDocin.getElementById('textback39').innerHTML = '<div>' + r10c.toString() + '</div>';
					iframeDocin.getElementById('textback46').innerHTML = '<div>' + r20c.toString() + '</div>';
					iframeDocin.getElementById('textback53').innerHTML = '<div>' + r50c.toString() + '</div>';
					iframeDocin.getElementById('textback60').innerHTML = '<div>' + r1r.toString() + '</div>';
					iframeDocin.getElementById('textback67').innerHTML = '<div>' + r2r.toString() + '</div>';
					iframeDocin.getElementById('textback74').innerHTML = '<div>' + r5r.toString() + '</div>';
					iframeDocin.getElementById('textback81').innerHTML = '<div>' + r10r.toString() + '</div>';
					iframeDocin.getElementById('textback88').innerHTML = '<div>' + r20r.toString() + '</div>';
					iframeDocin.getElementById('textback95').innerHTML = '<div>' + r50r.toString() + '</div>';
					iframeDocin.getElementById('textback102').innerHTML = '<div>' + r100r.toString() + '</div>';
					iframeDocin.getElementById('textback109').innerHTML = '<div>' + r200r.toString() + '</div>';
					iframeDocin.getElementById('textback116').innerHTML = '<div>' + r500r.toString() + '</div>';
					iframeDocin.getElementById('textback19').innerHTML = '<div>' + numberToCop( r1c * 1 ) + '</div>';
					iframeDocin.getElementById('textback26').innerHTML = '<div>' + numberToCop( r2c * 2 ) + '</div>';
					iframeDocin.getElementById('textback33').innerHTML = '<div>' + numberToCop( r5c * 5 ) + '</div>';
					iframeDocin.getElementById('textback40').innerHTML = '<div>' + numberToCop( r10c * 10 ) + '</div>';
					iframeDocin.getElementById('textback47').innerHTML = '<div>' + numberToCop( r20c * 20 ) + '</div>';
					iframeDocin.getElementById('textback54').innerHTML = '<div>' + numberToCop( r50c * 50 ) + '</div>';
					iframeDocin.getElementById('textback61').innerHTML = '<div>' + numberToRub( r1r ) + '</div>';
					iframeDocin.getElementById('textback68').innerHTML = '<div>' + numberToRub( r2r * 2 ) + '</div>';
					iframeDocin.getElementById('textback75').innerHTML = '<div>' + numberToRub( r5r * 5 ) + '</div>';
					iframeDocin.getElementById('textback82').innerHTML = '<div>' + numberToRub( r10r * 10 ) + '</div>';
					iframeDocin.getElementById('textback89').innerHTML = '<div>' + numberToRub( r20r * 20 ) + '</div>';
					iframeDocin.getElementById('textback96').innerHTML = '<div>' + numberToRub( r50r * 50 ) + '</div>';
					iframeDocin.getElementById('textback103').innerHTML = '<div>' + numberToRub( r100r * 100 ) + '</div>';
					iframeDocin.getElementById('textback110').innerHTML = '<div>' + numberToRub( r200r * 200 ) + '</div>';
					iframeDocin.getElementById('textback117').innerHTML = '<div>' + numberToRub( r500r * 500 ) + '</div>';
					iframeDocin.getElementById('textback124').innerHTML = '<div><strong>' + summrb + ' руб., ' + summcp + ' коп.' + '</strong></div>';
				}
		}
 
	var iframe = document.getElementsByTagName('iframe')[0];  //prepro.html
	var iframeDoc = iframe.contentWindow.document;
	if (iframeDoc.readyState == 'complete') {
			var iframein = iframeDoc.getElementById('iframe1');
			var iframeDocin = iframein.contentWindow.document;
			if (iframeDocin.readyState == 'complete') {
              	    iframeDocin.getElementById('text3').innerHTML = '<div><strong>' + prepronum + '</strong></div>';
					iframeDocin.getElementById('text6').innerHTML = '<div><strong id=\"strdat\">' + dat + '</strong></div>';
					iframeDocin.getElementById('text68').innerHTML = '<div><strong>' + summrc + '</strong></div>';
					iframeDocin.getElementById('text30').innerHTML = '<div><strong>' + summrc + '</strong></div>';
					iframeDocin.getElementById('text16').innerHTML = '<div><strong>' + summrb + ' руб., ' + summcp + ' коп.' + '</strong></div>';
					iframeDocin.getElementById('text23').innerHTML = '<div class=\"style3\">' + (parseFloat(summrc)).numberToString(true) + ' ' + summcp + ' ' + toCop(summcp) + '</div>';
				}
		}
 
	var iframe = document.getElementsByTagName('iframe')[0];  //preprocopy.html
	var iframeDoc = iframe.contentWindow.document;
	if (iframeDoc.readyState == 'complete') {
			var iframein = iframeDoc.getElementById('iframe2');
			var iframeDocin = iframein.contentWindow.document;
			if (iframeDocin.readyState == 'complete') {
              	    iframeDocin.getElementById('text3').innerHTML = '<div><strong>' + prepronum + '</strong></div>';
					iframeDocin.getElementById('text6').innerHTML = '<div><strong>' + dat + '</strong></div>';
					iframeDocin.getElementById('text68').innerHTML = '<div><strong>' + summrc + '</strong></div>';
					iframeDocin.getElementById('text30').innerHTML = '<div><strong>' + summrc + '</strong></div>';
					iframeDocin.getElementById('text16').innerHTML = '<div><strong>' + summrb + ' руб., ' + summcp + ' коп.' + '</strong></div>';
					iframeDocin.getElementById('text23').innerHTML = '<div class=\"style3\">' + (parseFloat(summrc)).numberToString(true) + ' ' + summcp + ' ' + toCop(summcp) + '</div>';
				}
		}
 
	var iframe = document.getElementsByTagName('iframe')[0];  //preproobr.html
	var iframeDoc = iframe.contentWindow.document;
	if (iframeDoc.readyState == 'complete') {
			var iframein = iframeDoc.getElementById('iframe3');
			var iframeDocin = iframein.contentWindow.document;
			if (iframeDocin.readyState == 'complete') {
              		iframeDocin.getElementById('text3').innerHTML = '<div><strong>' + prepronum + '</strong></div>';
					iframeDocin.getElementById('text6').innerHTML = '<div><strong>' + dat + '</strong></div>';
					iframeDocin.getElementById('text68').innerHTML = '<div><strong>' + summrc + '</strong></div>';
					iframeDocin.getElementById('text30').innerHTML = '<div><strong>' + summrc + '</strong></div>';
					iframeDocin.getElementById('text16').innerHTML = '<div><strong>' + summrb + ' руб., ' + summcp + ' коп.' + '</strong></div>';
					iframeDocin.getElementById('text23').innerHTML = '<div class=\"style3\">' + (parseFloat(summrc)).numberToString(true) + ' ' + summcp + ' ' + toCop(summcp) + '</div>';
				}
		}
 
}
 
function numberToRub(number) {  // устаревшая функция(c float)
 
	var cop = (number * 100) % 100;
	var rub = number - (cop / 100);
 
	if (parseInt(rub) == 0) {rub = '0';}
	if (parseInt(cop) < 10) {cop = '0' + cop.toString();}
	if (parseInt(cop) == 0) {cop = '00';}
 
	var str = rub + ' руб., ' + cop + ' коп.';
	return(str);
}
 
function numberToCop(number) {  // обновленная функция(только целые)
 
	var cop = (number % 100);
	var rub = (number - cop).toString().slice(0,-2); 
 
	var rb, cp;
	if (cop == 0) {cp = '00';}
		else {if (cop < 10) {cp = '0' + cop.toString();}
				else {cp = cop.toString();}}
	if (rub == 0) {rb = '0';}
		else {rb = rub.toString();}
 
	var str = rb + ' руб., ' + cp + ' коп.';
	return(str);
}
 
function toCop(cp1) { //1 -> копейка или 11 -> копеек
	var str;
	var cp1i = parseInt(cp1);
	var cp1v=new Array(3);
		cp1v[0]="копейка"; //..1 искл 11
		cp1v[1]="копейки"; //..2,..3,..4 искл 12,13
		cp1v[2]="копеек"; //..0,..5,..6,..7,..8,..9 + 11,12,13
	if (cp1i == 11 || cp1i == 12 || cp1i == 13)	{str = cp1v[2];}
		else {
			if ((cp1i % 10) == 1) {str = cp1v[0];}
			if ((cp1i % 10) == 2 || (cp1i % 10) == 3 || (cp1i % 10) == 4) {str = cp1v[1];}
			if ((cp1i % 10) == 0 || (cp1i % 10) == 5 || (cp1i % 10) == 6 || (cp1i % 10) == 7 || (cp1i % 10) == 8 || (cp1i % 10) == 9) {str = cp1v[2];}
		}
	return str;
 
}
 
function saveSumkN() { //сохранение № препроводительной
	var loadprepronum;
	var sumknum = "";
	xmlhttp=new XMLHttpRequest();
	xmlhttp.onreadystatechange=function() {
		if (this.readyState==4 && this.status==200) {
			loadprepronum = this.responseXML.getElementsByTagName("prepronum")[0].attributes[0].textContent;
			for (var i = 0; i < loadprepronum.length ; i++) {
				if (loadprepronum == "/") {sumknum = sumknum + "\/";}
					else { sumknum = sumknum + loadprepronum[i]; }
				}
			document.getElementById('prepronum').value = loadprepronum;
			chkinp();
			}
		}
	xmlhttp.open("GET","userform.php",true);
	xmlhttp.send();
	}
 
function editform() {	//обнуление статуса ответа сервера в "изменении личных данных"
	document.getElementById('responseserv').innerHTML = ""; 
	}
 
function printAll(){
    iframe = $('#frame2')[0]; //собственно печать
	iframe.contentWindow.focus(); 
	iframe.contentWindow.print(); 
	}
 
function printBstr(){
	setTimeout(function(){printAll()}, 0);
	printframe = document.getElementById('frame2');  //меняем высоту фрейма в 1/2 от оригинального
	sprint = printframe.style;
	sprint.height = '2510px';
	var iframe = document.getElementsByTagName('iframe')[0];  //preprovoditelnaya.html
	var iframeDoc = iframe.contentWindow.document;
	if (iframeDoc.readyState == 'complete') {
		var iframein1 = iframeDoc.getElementById('list1');
		printframein1 = iframein1.style;
		printframein1.display = 'none';
		var iframein2 = iframeDoc.getElementById('list2');
		printframein2 = iframein2.style;
		printframein2.display = 'none';
		var iframein3 = iframeDoc.getElementById('list3');
		printframein3 = iframein3.style;
		printframein3.display = 'block';
		var iframein4 = iframeDoc.getElementById('list4');
		printframein4 = iframein4.style;
		printframein4.display = 'block';
		var tcallelem = document.getElementById('tcall');
		tcallstyle = tcallelem.style;
		tcallstyle.display = 'none';
		}
	}
 
function printAstr(){
	setTimeout(function(){printAll()}, 0);
	printframe = document.getElementById('frame2');  //меняем высоту фрейма в 1/2 от оригинального
	sprint = printframe.style;
	sprint.height = '2510px';
	var iframe = document.getElementsByTagName('iframe')[0];  //preprovoditelnaya.html
	var iframeDoc = iframe.contentWindow.document;
	if (iframeDoc.readyState == 'complete') {
		var iframein1 = iframeDoc.getElementById('list1');
		printframein1 = iframein1.style;
		printframein1.display = 'block';
		var iframein2 = iframeDoc.getElementById('list2');
		printframein2 = iframein2.style;
		printframein2.display = 'block';
		var iframein3 = iframeDoc.getElementById('list3');
		printframein3 = iframein3.style;
		printframein3.display = 'none';
		var iframein4 = iframeDoc.getElementById('list4');
		printframein4 = iframein4.style;
		printframein4.display = 'none'; 
		var tcallelem = document.getElementById('tcall');
		tcallstyle = tcallelem.style;
		tcallstyle.display = 'block';		
		} 
	}
 
function printAllstr(){
	setTimeout(function(){printAll()}, 0);
	printframe = document.getElementById('frame2');  //меняем высоту фрейма в 1 от оригинального
	sprint = printframe.style;
	sprint.height = '5020px';
	var iframe = document.getElementsByTagName('iframe')[0];  //preprovoditelnaya.html
	var iframeDoc = iframe.contentWindow.document;
	if (iframeDoc.readyState == 'complete') {
		var iframein1 = iframeDoc.getElementById('list1');
		printframein1 = iframein1.style;
		printframein1.display = 'block';
		var iframein2 = iframeDoc.getElementById('list2');
		printframein2 = iframein2.style;
		printframein2.display = 'block';
		var iframein3 = iframeDoc.getElementById('list3');
		printframein3 = iframein3.style;
		printframein3.display = 'block';
		var iframein4 = iframeDoc.getElementById('list4');
		printframein4 = iframein4.style;
		printframein4.display = 'block'; 
		var tcallelem = document.getElementById('tcall');
		tcallstyle = tcallelem.style;
		tcallstyle.display = 'block';		
		} 
	}
 
function StatisticPrint(){
	var dataprepro, apt, jurlico, bank, debet, credit, kod;
	var iframe = document.getElementsByTagName('iframe')[0];  //prepro.html
	var iframeDoc = iframe.contentWindow.document;
	if (iframeDoc.readyState == 'complete') {
			var iframein = iframeDoc.getElementById('iframe1');
			var iframeDocin = iframein.contentWindow.document;
			if (iframeDocin.readyState == 'complete') {
					dataprepro = iframeDocin.getElementById('strdat').innerHTML;
					apt = iframeDocin.getElementById('strapt').innerHTML;
					jurlico = iframeDocin.getElementById('strjurlico').innerHTML;
					bank = iframeDocin.getElementById('strbank').innerHTML;
					debet = iframeDocin.getElementById('strdebet').innerHTML;
					credit = iframeDocin.getElementById('strcredit').innerHTML;
					kod = iframeDocin.getElementById('strkod').innerHTML;
					}
			}
	var xhr = new XMLHttpRequest();
	var request = 'dataprepro=' + encodeURIComponent(dataprepro) + '&' + 'prepronum=' + encodeURIComponent(prepronum) + '&' + 'apt=' + encodeURIComponent(apt) + '&' + 'jurlico=' + encodeURIComponent(jurlico) + '&' + 'bank=' + encodeURIComponent(bank) + '&' + 'debet=' + encodeURIComponent(debet) + '&' + 'credit=' + encodeURIComponent(credit) + '&' + 'kod=' + encodeURIComponent(kod) + '&' + 'summ=' + encodeURIComponent(summ);
	// /statistic.php?dataprepro=21 января 2017&apt=Аптека №1 ООО "Не Ска"&jurlico=ООО "НеСка"&bank=ОАО \"Технобанк\", код 182 г.Минск&debet=счет № 342324523453&credit=счет № 3012133570017&summ=1313,01&kod=2004&prepronum=000333
	xhr.open("GET", 'statistic.php?' + request, true);  
	xhr.send();
	}
 
 
/* Ниже переделанный календарь, т.к. он работает с нашей датой напрямую */
 
 
// Tigra Calendar v5.2 (11/20/2011)
// http://www.softcomplex.com/products/tigra_calendar/
// License: Public Domain... You're welcome.
 
// default settins - this structure can be moved in separate file in multilangual applications
var A_TCALCONF = {
	'cssprefix'  : 'tcal',
	'months'     : ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
	'weekdays'   : ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],
	'longwdays'  : ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
	'yearscroll' : true, // show year scroller
	'weekstart'  : 1, // first day of week: 0-Su or 1-Mo
	'prevyear'   : 'Предыдущий год',
	'nextyear'   : 'Следующий год',
	'prevmonth'  : 'Предыдущий месяц',
	'nextmonth'  : 'Следующий месяц',
	'format'     : 'm/d/Y' // 'd-m-Y', Y-m-d', 'l, F jS Y'
};
 
var A_TCALTOKENS = [
	 // A full numeric representation of a year, 4 digits
	{'t': 'Y', 'r': '19\\d{2}|20\\d{2}', 'p': function (d_date, n_value) { d_date.setFullYear(Number(n_value)); return d_date; }, 'g': function (d_date) { var n_year = d_date.getFullYear(); return n_year; }},
	 // Numeric representation of a month, with leading zeros
	{'t': 'm', 'r': '0?[1-9]|1[0-2]', 'p': function (d_date, n_value) { d_date.setMonth(Number(n_value) - 1); return d_date; }, 'g': function (d_date) { var n_month = d_date.getMonth() + 1; return (n_month < 10 ? '0' : '') + n_month }},
	 // A full textual representation of a month, such as January or March
	{'t': 'F', 'r': A_TCALCONF.months.join('|'), 'p': function (d_date, s_value) { for (var m = 0; m < 12; m++) if (A_TCALCONF.months[m] == s_value) { d_date.setMonth(m); return d_date; }}, 'g': function (d_date) { return A_TCALCONF.months[d_date.getMonth()]; }},
	 // Day of the month, 2 digits with leading zeros
	{'t': 'd', 'r': '0?[1-9]|[12][0-9]|3[01]', 'p': function (d_date, n_value) { d_date.setDate(Number(n_value)); if (d_date.getDate() != n_value) d_date.setDate(0); return d_date }, 'g': function (d_date) { var n_date = d_date.getDate(); return (n_date < 10 ? '0' : '') + n_date; }},
	// Day of the month without leading zeros
	{'t': 'j', 'r': '0?[1-9]|[12][0-9]|3[01]', 'p': function (d_date, n_value) { d_date.setDate(Number(n_value)); if (d_date.getDate() != n_value) d_date.setDate(0); return d_date }, 'g': function (d_date) { var n_date = d_date.getDate(); return n_date; }},
	 // A full textual representation of the day of the week
	{'t': 'l', 'r': A_TCALCONF.longwdays.join('|'), 'p': function (d_date, s_value) { return d_date }, 'g': function (d_date) { return A_TCALCONF.longwdays[d_date.getDay()]; }},
	// English ordinal suffix for the day of the month, 2 characters
	{'t': 'S', 'r': 'st|nd|rd|th', 'p': function (d_date, s_value) { return d_date }, 'g': function (d_date) { n_date = d_date.getDate(); if (n_date % 10 == 1 && n_date != 11) return 'st'; if (n_date % 10 == 2 && n_date != 12) return 'nd'; if (n_date % 10 == 3 && n_date != 13) return 'rd'; return 'th'; }}
 
];
 
function f_tcalGetHTML (d_date) {
 
	var e_input = f_tcalGetInputs(true);
	if (!e_input) return;
 
	var s_pfx = A_TCALCONF.cssprefix,
		s_format = A_TCALCONF.format;
 
	// today from config or client date
	var d_today = f_tcalParseDate(A_TCALCONF.today, A_TCALCONF.format);
	if (!d_today)
		d_today = f_tcalResetTime(new Date);
 
	// selected date from input or config or today 
	var d_selected = f_tcalParseDate(e_input.value, s_format); //сюда подгружаем дату
	if (!d_selected)
		d_selected = f_tcalParseDate(A_TCALCONF.selected, A_TCALCONF.format);
	if (!d_selected)
		d_selected = new Date(d_today);
 
	// show calendar for passed or selected date
	d_date = d_date ? f_tcalResetTime(d_date) : new Date(d_selected);
 
	var d_firstDay = new Date(d_date);
	d_firstDay.setDate(1);
	d_firstDay.setDate(1 - (7 + d_firstDay.getDay() - A_TCALCONF.weekstart) % 7);
 
	var a_class, s_html = '<table id="' + s_pfx + 'Controls"><tbody><tr>'
		+ (A_TCALCONF.yearscroll ? '<td id="' + s_pfx + 'PrevYear" ' + f_tcalRelDate(d_date, -1, 'y') + ' title="' + A_TCALCONF.prevyear + '"></td>' : '')
		+ '<td id="' + s_pfx + 'PrevMonth"' + f_tcalRelDate(d_date, -1) + ' title="' + A_TCALCONF.prevmonth + '"></td><th>'
		+ A_TCALCONF.months[d_date.getMonth()] + ' ' + d_date.getFullYear()
		+ '</th><td id="' + s_pfx + 'NextMonth"' + f_tcalRelDate(d_date, 1) + ' title="' + A_TCALCONF.nextmonth + '"></td>'
		+ (A_TCALCONF.yearscroll ? '<td id="' + s_pfx + 'NextYear"' + f_tcalRelDate(d_date, 1, 'y') + ' title="' + A_TCALCONF.nextyear + '"></td>' : '')
		+ '</tr></tbody></table><table id="' + s_pfx + 'Grid"><tbody><tr>';
 
	// print weekdays titles
	for (var i = 0; i < 7; i++)
		s_html += '<th>' + A_TCALCONF.weekdays[(A_TCALCONF.weekstart + i) % 7] + '</th>';
	s_html += '</tr>' ;
 
	// print calendar table
	var n_date, n_month, d_current = new Date(d_firstDay);
	while (d_current.getMonth() == d_date.getMonth() ||
		d_current.getMonth() == d_firstDay.getMonth()) {
 
		s_html +='<tr>';
		for (var n_wday = 0; n_wday < 7; n_wday++) {
 
			a_class = [];
			n_date  = d_current.getDate();
			n_month = d_current.getMonth();
 
			if (d_current.getMonth() != d_date.getMonth())
				a_class[a_class.length] = s_pfx + 'OtherMonth';
			if (d_current.getDay() == 0 || d_current.getDay() == 6)
				a_class[a_class.length] = s_pfx + 'Weekend';
			if (d_current.valueOf() == d_today.valueOf())
				a_class[a_class.length] = s_pfx + 'Today';
			if (d_current.valueOf() == d_selected.valueOf())
				a_class[a_class.length] = s_pfx + 'Selected';
 
			s_html += '<td' + f_tcalRelDate(d_current) + (a_class.length ? ' class="' + a_class.join(' ') + '">' : '>') + n_date + '</td>';
			d_current.setDate(++n_date);
		}
		s_html +='</tr>';
	}
	s_html +='</tbody></table>';
 
	return s_html;
}
 
function f_tcalRelDate (d_date, d_diff, s_units) {
 
	var s_units = (s_units == 'y' ? 'FullYear' : 'Month');
	var d_result = new Date(d_date);
	if (d_diff) {
		d_result['set' + s_units](d_date['get' + s_units]() + d_diff);
		if (d_result.getDate() != d_date.getDate())
			d_result.setDate(0);
	}
	return ' onclick="f_tcalUpdate(' + d_result.valueOf() + (d_diff ? ',1' : '') + ')"';
}
 
function f_tcalResetTime (d_date) {
	d_date.setMilliseconds(0);
	d_date.setSeconds(0);
	d_date.setMinutes(0);
	d_date.setHours(12);
	return d_date;
}
 
// closes calendar and returns all inputs to default state
function f_tcalCancel () {
 
	var s_pfx = A_TCALCONF.cssprefix;
	var e_cal = document.getElementById(s_pfx);
	if (e_cal)
		e_cal.style.visibility = '';
	var a_inputs = f_tcalGetInputs();
	for (var n = 0; n < a_inputs.length; n++)
		f_tcalRemoveClass(a_inputs[n], s_pfx + 'Active');
}
 
function f_tcalUpdate (n_date, b_keepOpen) {
 
	var e_input = f_tcalGetInputs(true);
	if (!e_input) return;
 
	d_date = new Date(n_date);
	var s_pfx = A_TCALCONF.cssprefix;
 
	if (b_keepOpen) {
		var e_cal = document.getElementById(s_pfx);
		if (!e_cal || e_cal.style.visibility != 'visible') return;
		e_cal.innerHTML = f_tcalGetHTML(d_date, e_input);
	}
	else {
//		e_input.value = f_tcalGenerateDate(d_date, A_TCALCONF.format);   //поле input не заполняем
//добавил:
		d = d_date;
		chkinp();
//далее неизменно
		f_tcalCancel();
	}
}
 
function f_tcalOnClick () {
 
	// see if already opened
	var s_pfx = A_TCALCONF.cssprefix;
	var s_activeClass = s_pfx + 'Active';
	var b_close = f_tcalHasClass(this, s_activeClass);
 
	// close all clalendars
	f_tcalCancel();
	if (b_close) return;
 
	// get position of input
	f_tcalAddClass(this, s_activeClass);
 
	var n_left = f_getPosition (this, 'Left'),
		n_top  = f_getPosition (this, 'Top') + this.offsetHeight;
 
	var e_cal = document.getElementById(s_pfx);
	if (!e_cal) {
		e_cal = document.createElement('div');
		e_cal.onselectstart = function () { return false };
		e_cal.id = s_pfx;
		document.getElementsByTagName("body").item(0).appendChild(e_cal);
	}
	e_cal.innerHTML = f_tcalGetHTML(null);
	e_cal.style.top = n_top + 'px';
	e_cal.style.left = (n_left + this.offsetWidth - e_cal.offsetWidth) + 'px';
	e_cal.style.visibility = 'visible';
}
 
function f_tcalParseDate (s_date, s_format) {
 
	if (!s_date) return;
 
	var s_char, s_regexp = '^', a_tokens = {}, a_options, n_token = 0;
	for (var n = 0; n < s_format.length; n++) {
		s_char = s_format.charAt(n);
		if (A_TCALTOKENS_IDX[s_char]) {
			a_tokens[s_char] = ++n_token;
			s_regexp += '(' + A_TCALTOKENS_IDX[s_char]['r'] + ')';
		}
		else if (s_char == ' ')
			s_regexp += '\\s';
		else
			s_regexp += (s_char.match(/[\w\d]/) ? '' : '\\') + s_char;
	}
	var r_date = new RegExp(s_regexp + '$');
	if (!s_date.match(r_date)) return;
 
	var s_val, d_date = f_tcalResetTime(new Date());
	d_date.setDate(1);
 
	for (n = 0; n < A_TCALTOKENS.length; n++) {
		s_char = A_TCALTOKENS[n]['t'];
		if (!a_tokens[s_char])
			continue;
		s_val = RegExp['$' + a_tokens[s_char]];
		d_date = A_TCALTOKENS[n]['p'](d_date, s_val);
	}
 
	return d_date;
}
 
function f_tcalGenerateDate (d_date, s_format) {
 
	var s_char, s_date = '';
	for (var n = 0; n < s_format.length; n++) {
		s_char = s_format.charAt(n);
		s_date += A_TCALTOKENS_IDX[s_char] ? A_TCALTOKENS_IDX[s_char]['g'](d_date) : s_char;
	}
	return s_date;
}
 
function f_tcalGetInputs (b_active) {
 
	var a_inputs = document.getElementsByTagName('input'),
		e_input, s_rel, a_result = [];
 
	for (n = 0; n < a_inputs.length; n++) {
 
		e_input = a_inputs[n];
		if (!e_input.type || e_input.type != 'text')
			continue;
 
		if (!f_tcalHasClass(e_input, 'tcal'))
			continue;
 
		if (b_active && f_tcalHasClass(e_input, A_TCALCONF.cssprefix + 'Active'))
			return e_input;
 
		a_result[a_result.length] = e_input;
	}
	return b_active ? null : a_result;
}
 
function f_tcalHasClass (e_elem, s_class) {
	var s_classes = e_elem.className;
	if (!s_classes)
		return false;
	var a_classes = s_classes.split(' ');
	for (var n = 0; n < a_classes.length; n++)
		if (a_classes[n] == s_class)
			return true;
	return false;
}
 
function f_tcalAddClass (e_elem, s_class) {
	if (f_tcalHasClass (e_elem, s_class))
		return;
 
	var s_classes = e_elem.className;
	e_elem.className = (s_classes ? s_classes + ' ' : '') + s_class;
}
 
function f_tcalRemoveClass (e_elem, s_class) {
	var s_classes = e_elem.className;
	if (!s_classes || s_classes.indexOf(s_class) == -1)
		return false;
 
	var a_classes = s_classes.split(' '),
		a_newClasses = [];
 
	for (var n = 0; n < a_classes.length; n++) {
		if (a_classes[n] == s_class)
			continue;
		a_newClasses[a_newClasses.length] = a_classes[n];
	}
	e_elem.className = a_newClasses.join(' ');
	return true;
}
 
function f_getPosition (e_elemRef, s_coord) {
	var n_pos = 0, n_offset,
		e_elem = e_elemRef;
 
	while (e_elem) {
		n_offset = e_elem["offset" + s_coord];
		n_pos += n_offset;
		e_elem = e_elem.offsetParent;
	}
 
	e_elem = e_elemRef;
	while (e_elem != document.body) {
		n_offset = e_elem["scroll" + s_coord];
		if (n_offset && e_elem.style.overflow == 'scroll')
			n_pos -= n_offset;
		e_elem = e_elem.parentNode;
	}
	return n_pos;
}

Siarhei Dudko iT blog

Здесь я буду писать всякие интересные штуки из моей жизни и работы

Препроводительная ведомость или не стоит связываться с бухгалтерией. Особенно если у вас их четыре.