Архивы html

HTML: Ограничение ввода числа, с дробной частью более двух знаков

26.09.2024 Павел Грибов WEB

Задача: позволять вносить в поле input числа со значимой частью не более 2-х знаков после запятой.

Решение: к сожалению стандарт HTML на текущий момент не предусматривает в штатном виде такое колдовство. Единственно что возможно — проставить в теге тип равным «число», и шаг равным .01, например вот так:

<input type="number" step=".01">

1	<input type="number" step=".01">

Но это будет действовать только если пользователь ввод числа осуществляет при помощи стрелочки. Если руками — то поле всё равно позволит ввести любое число. Значит придётся задействовать javascript. На обработчик onchange навесим задание приводить любое значение в поле к числу с разрядностью 2:

<input type="number" step=".01" onchange="this.value = parseFloat(this.value).toFixed(2);">

1	<input type="number" step=".01" onchange="this.value = parseFloat(this.value).toFixed(2);">

Оставить комментарий html, input, ввод числа

Таблица в массив на php

27.06.2024 Павел Грибов PHP

Задача: Есть некая очень захламленная сторонними элементами страница в разметке html. Необходимо преобразовать находящуюся на ней таблица в массив данных.

Решение: сначала вычленим «грязное» содержимое таблицы между тегами <tbody></tbody>, затем преобразуем его в DOM документ, а далее уже распарсим его обходами и разложим элементы в массив.

Получилось что-то вроде:

 //вычленяю таблицу
        $t1=explode("<tbody>",$res);
        $t2=explode("</tbody>",$t1[1]);
        $tbody="<html><head><meta charset='UTF-8'></head><body><table><tbody>".$t2[0]."</tbody></table></body></html>";
        
        $mass=[];
        $dom = new domDocument('1.0', 'utf-8'); 
        @$dom->loadHTML($tbody);         
        $tables= $dom->getElementsByTagName('table');
        foreach ($tables as $table) {
            $trs= $table->getElementsByTagName('tr');
            foreach ($trs as $tr) {
                $tds=$tr->getElementsByTagName('td');
                $info=[];
                foreach ($tds as $td) {                    
                    $info[]=$td->textContent;
                };
                $mass[]=$info;
            }
        }

//вычленяю таблицу

$t1=explode("<tbody>",$res);

$t2=explode("</tbody>",$t1[1]);

$tbody="<html><head><meta charset='UTF-8'></head><body><table><tbody>".$t2[0]."</tbody></table></body></html>";

$mass=[];

$dom = new domDocument('1.0', 'utf-8');

@$dom->loadHTML($tbody);

$tables= $dom->getElementsByTagName('table');

foreach ($tables as $table) {

$trs= $table->getElementsByTagName('tr');

foreach ($trs as $tr) {

$tds=$tr->getElementsByTagName('td');

$info=[];

foreach ($tds as $td) {

$info[]=$td->textContent;

};

$mass[]=$info;

}

Оставить комментарий html, php, таблица в массив

Затененный задний фон для модального окна

28.03.2024 Павел Грибов WEB

Довольно часто встречающаяся задача: затененный задний фон модального окна или элемента веб страницы.Решается задача довольно просто, с использованием псевдоэлементов :before и :after. Обращаю внимание, что их можно использовать только в парных тегах вида <div></div>, и соответственно нельзя в тегах вида input (т.е. не парных). Еще одним нюансом является то, что значение свойства display может быть только: block, inline, none, list-item. Все остальные значения будут трактоваться как block.

Например задача получить страницу вида:

Решается примерно так: сначала определим стили CSS:

.application:before {
   content: '';
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
   background: url(http://ultraimg.com/images/Ho6hQWs.jpg) center no-repeat;
  background-size: cover;
    filter: blur(2px);
}

.application:after {
  content: '';
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
}
.select_area_color_lent_tag{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 250px;
  height: 250px;
  background-color: white;
  border: 1px solid black;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: space-around;
  z-index: 20;    
}

.application:before {

content: '';

position: fixed;

z-index: 2;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: url(http://ultraimg.com/images/Ho6hQWs.jpg) center no-repeat;

background-size: cover;

filter: blur(2px);

}

.application:after {

content: '';

position: fixed;

z-index: 2;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: rgba(0,0,0,.5);

}

.select_area_color_lent_tag{

position: fixed;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 250px;

height: 250px;

background-color: white;

border: 1px solid black;

padding: 20px;

display: flex;

flex-wrap: wrap;

text-align: center;

justify-content: space-around;

z-index: 20;

}

HTML для этих стилей может выглядеть таким:

        <div class="application" style="display: none">            <div class="select_area_color_lent_tag">            </div>        </div>

1	<div class="application" style="display: none"> <div class="select_area_color_lent_tag"> </div> </div>

В нужный момент достаточно показать блок application, и получим картинку как на скриншоте выше,а именно затененный задний фон модального окна:

$(".application").show()

1	$(".application").show()

А здесь можно посмотреть еще много советов по работе с CSS

Оставить комментарий css, html, затененный задний фон

Простой парсер таблицы в массив из HTML

06.03.2024 Павел Грибов PHP

Задача: необходимо преобразовать страницу HTML, в которой данные размещены в виде стандартной таблицы обрамленной тегами <table></table>, в двумерный массив на PHP (парсер таблицы в массив).

<table>
	<tr>
		<td>1</td><td>2</td><td>3</td><td>4</td>
	</tr>
	<tr>
		<td>1</td><td>2</td><td>3</td><td>4</td>
	</tr>
</table>

<table>

<tr>

</tr>

<tr>

</tr>

</table>

Сначала я хотел решить задачу «в лоб», а именно искать теги в тексте, писать функционал по вычленению данных между тегами.. Но потом подумал, что «наверное всё уже придумано до нас», для подобных задач. Ну и собственно оказался прав. Задачу решил без лишних усилий в течении минут 5.

Решение: воспользуюсь PHP функцией DOMDocument для того чтобы преобразовать текст в DOM объект:

    $contents = '<html lang="ru-RU"><head><meta charset="UTF-8" /></head><table>'.$contents."</table></html>";
    $DOM = new DOMDocument;
    $DOM->loadHTML($contents);

$contents = '<html lang="ru-RU"><head><meta charset="UTF-8" /></head><table>'.$contents."</table></html>";

$DOM = new DOMDocument;

$DOM->loadHTML($contents);

Так я получаю построенное DOM дерево. Затем получаю все «ветки» по имени tr, и перебираю их, одновременно перебирая «всех листья» (т.е. тэги td):

function tdrows($elements){
  $str = [];
    foreach ($elements as $element) {$str[]= $element->nodeValue;}
  return $str;
}

function getdata($contents){
    $contents = '<html lang="ru-RU"><head><meta charset="UTF-8" /></head><table>'.$contents."</table></html>";
    $DOM = new DOMDocument;
    $DOM->loadHTML($contents);
    $items = $DOM->getElementsByTagName('tr');
    $mass=[];
    foreach ($items as $node) {
        $mass[]=tdrows($node->childNodes);
    }
    return $mass;
}

$mass=getdata($table);
var_dump($mass);

function tdrows($elements){

$str = [];

foreach ($elements as $element) {$str[]= $element->nodeValue;}

return $str;

}

function getdata($contents){

$contents = '<html lang="ru-RU"><head><meta charset="UTF-8" /></head><table>'.$contents."</table></html>";

$DOM = new DOMDocument;

$DOM->loadHTML($contents);

$items = $DOM->getElementsByTagName('tr');

$mass=[];

foreach ($items as $node) {

$mass[]=tdrows($node->childNodes);

}

return $mass;

}

$mass=getdata($table);

var_dump($mass);

Данные я передал в двухмерный массив $mass, т.е. задача «парсер таблицы в массив» решена

парсер таблицы в массив через построение DOM

Ну а тут ссылка на подобную же задачу, но вместо HTML документа — файл формата XML

Оставить комментарий html, php, массив, таблица

1С: Получить таблицы из Html

25.01.2023 Павел Грибов 1C

Задача: в неком html файле содержится несколько таблиц. Необходимо их распарсить и обработать силами 1С

Решение: воспользуемся построителем DOM. Результатом работы функции будет массив таблиц html документа.

&НаСервере
Функция УбратьНеОбрабатываемыеСимволы(стр)
	стр=стрзаменить(стр," ","_");
	стр=стрзаменить(стр,"№","N");
	стр=стрзаменить(стр,"-","_");
	стр=стрзаменить(стр,".","_");
	стр=стрзаменить(стр,",","_");
	стр=стрзаменить(стр,"/","_");
	возврат стр;
конецфункции	
&НаСервере
Функция ПреобразоватьФайлHtmlВМассивТаблиц(АдресХранилищаФайла)	
	
	ДвоичныеДанные = ПолучитьИзВременногоХранилища(АдресХранилищаФайла);
	ИмяВременногоФайлаСпр = ПолучитьИмяВременногоФайла("html");
	ДвоичныеДанные.Записать(ИмяВременногоФайлаСпр);     
	
	ЧтениеHTML = Новый ЧтениеHTML;
	ЧтениеHTML.ОткрытьФайл(ИмяВременногоФайлаСпр, "UTF-8");

	ПостроительDOM = Новый ПостроительDOM;
	ДокументHTML = ПостроительDOM.Прочитать(ЧтениеHTML);
	ЭлементыТаблицы = ДокументHTML.ПолучитьЭлементыПоИмени("table");
	
	МассивТаблиц=Новый Массив();	
	для каждого таблица из	ЭлементыТаблицы цикл
	  ТЗ=Новый ТаблицаЗначений();	
	  строкиТаблицы=таблица.ПолучитьЭлементыПоИмени("tr");	
	      ПрочитаноСтрок=0;
		  для каждого строкаТаблицы из	строкиТаблицы цикл
		  	колонки=строкаТаблицы.ПолучитьЭлементыПоИмени("td");			
			ПрочитаноКолонок=0;
			для каждого колонка из колонки цикл
				если ПрочитаноСтрок=0 тогда
					ТЗ.Колонки.Добавить(УбратьНеОбрабатываемыеСимволы(колонка.ТекстовоеСодержимое));
				иначе
					если ПрочитаноКолонок=0 тогда
					 нс=ТЗ.Добавить()
				    конецесли;		 
				    нс[ПрочитаноКолонок]=колонка.ТекстовоеСодержимое;
				конецесли;	
				ПрочитаноКолонок=ПрочитаноКолонок+1;
			конеццикла;		
			ПрочитаноСтрок=ПрочитаноСтрок+1;
		  конеццикла;
	  МассивТаблиц.Добавить(ТЗ);
	конеццикла;	
	ЧтениеHTML.Закрыть();											
	
конецфункции

&НаКлиенте
Процедура ЗагрузитьФайл(Команда)
Режим = РежимДиалогаВыбораФайла.Открытие;
    ДиалогОткрытияФайла = Новый ДиалогВыбораФайла(Режим);
    ДиалогОткрытияФайла.ПолноеИмяФайла = "";
    Фильтр = НСтр("ru = 'Текст'; en = 'Text'")+ "(*.xls)|*.xlsx";
    ДиалогОткрытияФайла.Фильтр = Фильтр;
    ДиалогОткрытияФайла.МножественныйВыбор = ложь;
    ДиалогОткрытияФайла.Заголовок = "Выберите файлы";
    Если ДиалогОткрытияФайла.Выбрать() Тогда
        МассивФайлов = ДиалогОткрытияФайла.ВыбранныеФайлы;
		ФайлСМС="";
		Для Каждого ИмяФайла Из МассивФайлов Цикл
			ФайлСМС=ИмяФайла;
		конеццикла;
		если ФайлСМС<>"" тогда 			
					АдресХранилищаФайла = "";			
					Состояние("Перемещаю файл на сервер");
		            ПоместитьФайл(АдресХранилищаФайла, ФайлСМС, , Ложь, ЭтаФорма.УникальныйИдентификатор);   					
					Состояние("Обрабатывается файл "+ФайлСМС);							
					таблицы=ПреобразоватьФайлHtmlВМассивТаблиц(АдресХранилищаФайла);					
		иначе
			сообщить("Файл не выбран");
		конецесли;	
	конецесли;	        
КонецПроцедуры

&НаСервере

Функция УбратьНеОбрабатываемыеСимволы(стр)

стр=стрзаменить(стр," ","_");

стр=стрзаменить(стр,"№","N");

стр=стрзаменить(стр,"-","_");

стр=стрзаменить(стр,".","_");

стр=стрзаменить(стр,",","_");

стр=стрзаменить(стр,"/","_");

возврат стр;

конецфункции

&НаСервере

Функция ПреобразоватьФайлHtmlВМассивТаблиц(АдресХранилищаФайла)

ДвоичныеДанные = ПолучитьИзВременногоХранилища(АдресХранилищаФайла);

ИмяВременногоФайлаСпр = ПолучитьИмяВременногоФайла("html");

ДвоичныеДанные.Записать(ИмяВременногоФайлаСпр);

ЧтениеHTML = Новый ЧтениеHTML;

ЧтениеHTML.ОткрытьФайл(ИмяВременногоФайлаСпр, "UTF-8");

ПостроительDOM = Новый ПостроительDOM;

ДокументHTML = ПостроительDOM.Прочитать(ЧтениеHTML);

ЭлементыТаблицы = ДокументHTML.ПолучитьЭлементыПоИмени("table");

МассивТаблиц=Новый Массив();

для каждого таблица из ЭлементыТаблицы цикл

ТЗ=Новый ТаблицаЗначений();

строкиТаблицы=таблица.ПолучитьЭлементыПоИмени("tr");

ПрочитаноСтрок=0;

для каждого строкаТаблицы из строкиТаблицы цикл

колонки=строкаТаблицы.ПолучитьЭлементыПоИмени("td");

ПрочитаноКолонок=0;

для каждого колонка из колонки цикл

если ПрочитаноСтрок=0 тогда

ТЗ.Колонки.Добавить(УбратьНеОбрабатываемыеСимволы(колонка.ТекстовоеСодержимое));

иначе

если ПрочитаноКолонок=0 тогда

нс=ТЗ.Добавить()

конецесли;

нс[ПрочитаноКолонок]=колонка.ТекстовоеСодержимое;

конецесли;

ПрочитаноКолонок=ПрочитаноКолонок+1;

конеццикла;

ПрочитаноСтрок=ПрочитаноСтрок+1;

конеццикла;

МассивТаблиц.Добавить(ТЗ);

конеццикла;

ЧтениеHTML.Закрыть();

конецфункции

&НаКлиенте

Процедура ЗагрузитьФайл(Команда)

Режим = РежимДиалогаВыбораФайла.Открытие;

ДиалогОткрытияФайла = Новый ДиалогВыбораФайла(Режим);

ДиалогОткрытияФайла.ПолноеИмяФайла = "";

Фильтр = НСтр("ru = 'Текст'; en = 'Text'")+ "(*.xls)|*.xlsx";

ДиалогОткрытияФайла.Фильтр = Фильтр;

ДиалогОткрытияФайла.МножественныйВыбор = ложь;

ДиалогОткрытияФайла.Заголовок = "Выберите файлы";

Если ДиалогОткрытияФайла.Выбрать() Тогда

МассивФайлов = ДиалогОткрытияФайла.ВыбранныеФайлы;

ФайлСМС="";

Для Каждого ИмяФайла Из МассивФайлов Цикл

ФайлСМС=ИмяФайла;

конеццикла;

если ФайлСМС<>"" тогда

АдресХранилищаФайла = "";

Состояние("Перемещаю файл на сервер");

ПоместитьФайл(АдресХранилищаФайла, ФайлСМС, , Ложь, ЭтаФорма.УникальныйИдентификатор);

Состояние("Обрабатывается файл "+ФайлСМС);

таблицы=ПреобразоватьФайлHtmlВМассивТаблиц(АдресХранилищаФайла);

иначе

сообщить("Файл не выбран");

конецесли;

КонецПроцедуры

Один комментарий 1c, html, table

1 2 3 4 »

Пн	Вт	Ср	Чт	Пт	Сб	Вс
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30