⠿
Test site and documentation for Clever html engine β’ Errors may occur and future news may be shown β’ ver.1.7.3: 78 core functions.
FUNCTIONS - vers. 1.7.3 - 2026-10-20:
Total: 80 htm_FunctionsSorted by name:
php2html.lib.php 2661: htm_AcceptButtA button for different purposes with colors according to purpose: Delete/Create/Navigate/Continue/Submit [Necessary basic element] (labl:'', icon:'', hint:'', kind:'home', form:'', acti:'', wdth:'', attr:'', akey:'', tplc:'LblTip_text', tsty:'', idix:'', disa:false, rtrn:false);
php2html.lib.php 2745: htm_ActionButtA generel action button (labl:'', icon:'', hint:'', type:'button', name:'', form:'', acti:'', attr:'', rtrn:false);
php2html.lib.php 4105: htm_AlertA message box in the page: success / error / warning / info - theme colors, also in the dark theme (from NH-logistik) (body:'', kind:'success', wdth:'700px', rtrn:false);
php2html.lib.php 4132: htm_BadgeA small label: a status, a count or "New" - e.g. in tables and menus (from NH-logistik) (labl:'', hint:'', kind:'secondary', rtrn:false);
php2html.lib.php 4120: htm_BannerA banner across the page: a short notice with a colored edge, e.g. "Demo data" or "Read only" (from NH-logistik) (body:'', kind:'warning', rtrn:false);
php2html.lib.php 6848: htm_brString function: Add one or more line-breaks (rept:1, rtrn:false);
php2html.lib.php 699: htm_CaptionA caption with icon, label and hint (labl:'',icon:'',hint:'',algn:'',styl:'color:#550000; font-weight:600; font-size: 13px;',rtrn:false);
php2html.lib.php 2064: htm_Card_An advanced span with lots of functionality [Necessary basic element] (capt:'', icon:'', hint:'tgl', mode:'2', form:'', acti:'', wdth:'', vhgh:'600px', fclr:'', styl:'background-color: white;', attr:'margin-bottom: 8px;', clas:'cardWmax', show:true, poup:true, head:'background-color: white;', help:'', frst:'', last:'', simp:false, fold:'', elem:'span', move:true, rtrn:false);
php2html.lib.php 2266: htm_Card_endFinalize htm_Card_() (labl:'', icon:'', hint:'', kind:'save', name:'', form:'', attr:'', subm:false, akey:'', simu:false, foot:'', rtrn:false);
php2html.lib.php 879: htm_CodeBoxA span containing syntax formattet php-code (code:'', valu:'', synt:true, repl:false, fmat:'', fold:'', rtrn:false);
php2html.lib.php 4144: htm_ConfirmPostLinkA button for an action that changes data (e.g. Delete): asks "Are you sure?" and then POSTs with the CSRF token (from NH-logistik) (labl:'', icon:'', hint:'', kind:'danger', mess:'@Are you sure?', data:[], acti:'', rtrn:false);
php2html.lib.php 2356: htm_DataGroupA span/group with a set of labels and data (capt:'', icon:'', hint:'', data:[['Label0','Data0','Lstyl','Dstyl']], wdth:'', vhgh:'600px', bord:'3px solid black;', fclr:'', styl:'', attr:'', head:'', foot:'', rtrn:false);
php2html.lib.php 2403: htm_DataListAn input field with a list of values to pick from (HTML datalist) (capt: '@Choose here from the list:', icon: 'fas fa-database', hint: '@Use datalist to pick a value from list', plho: '?', name: '', data: ['Itm1','Itm2','Itm3','Itm4'], form: '', acti: '', wdth: '220px', bord: '1px solid black; border-radius: 5px;', fclr: 'color: green;', attr: '', rtrn: false);
php2html.lib.php 1015: htm_DetailsA summery list with collapsible details (capt:'', labl:'', hint:'', type:'h1', mode:'', body:'', styl:'', rtrn:false);
php2html.lib.php 4244: htm_DialogCreate a Dialog with alternative buttons to select between [Necessary basic element] (capt:'CAPTION', labl:'@Open dialog', body:'', bclr:'lightyellow', butt:[], rtrn:false); Modal dialog:
php2html.lib.php 1950: htm_EmbedView a container with a external resource (name:'', type:'application/pdf', wdth:'800px', vhgh:'2100px', bord:'0', rtrn:false);
php2html.lib.php 952: htm_faqA question with a folded answer (FAQ) - one at a time when they share a grup (ques:'', answ:'', wdth:'', open:false, grup:'', code:false, rtrn:false); Question and answer
php2html.lib.php 1969: htm_FieldMake a box like htm_input() with label, icon and hint (labl:'', icon:'', hint:'', name:'fld', body:'', wdth:'', styl:'', attr:'', llgn:'C', ftop:'', rtrn:false); #FIELD:
php2html.lib.php 1906: htm_FieldsetStart a bordered area with a caption, icon ant hint (Remaned from: htm_Fieldset_) (capt:'',icon:'',hint:'',wdth:'',marg:'',styl:'',attr:'',rtrn:false);
php2html.lib.php 1928: htm_Fieldset_endEnd a bordered area (rtrn:false);
php2html.lib.php 991: htm_FigureA image with caption, label and a hint (capt:'', labl:'', hint:'', type:'h1', styl:'', imag:'', info:'', rtrn:false);
php2html.lib.php 2532: htm_Form_Start creating a form (name:'', type:'multipart/form-data', mode:'POST', acti:'', attr:'', rtrn:false);
php2html.lib.php 2558: htm_Form_endFinalixe a form (rtrn:false);
php2html.lib.php 2853: htm_GoTopButtSpecial buttons for going to top/middle/bottom of page (labl:'@Top', icon:'fa-solid fa-arrow-up', hint:'@Go to page top', styl:'', rtrn:false);
php2html.lib.php 6844: htm_hrString function: make horisontal line/ruler (colr:'#0', attr:'', rtrn:false);
php2html.lib.php 3753: htm_HumantestButton for test human or robot (capt:'@Are you human? ', icon:'fa-solid fa-arrow-right-to-bracket', hint:'@Grab and slide to right to change state', form:'form-id', wdth:'200px', vhgh:'24px', bclr: '#1bd441', yclr:'lightgray', nclr:'white', xytx:'@YES', ntxt:'@NO', rtrn: false);
php2html.lib.php 2782: htm_IconButtA generel botton with icon and label [Necessary basic element] (labl:'', icon:'', hint:'', type:'submit', name:'', link:'', evnt:'', wdth:'', font:'32px', fclr:'#555', bclr:'white', akey:'', rtrn:false);
php2html.lib.php 1935: htm_iFrameOutput external content in a local frame (titl:'', srce:'', wdth:'300px', vhgh:'200px', styl:'', rtrn:false);
php2html.lib.php 6840: htm_IheadString function: make italic-text (html, rtrn:false);
php2html.lib.php 541: htm_InboxA ontainer with: Border, Label, Hint, (Placeholder) (labl:'', icon:'', hint:'', plho:'@Enter...', vrnt:'noUse', name:'Body_div', valu:'', list:['noUse'], form:'noUse', wdth:'200px', algn:'left', bord:'1px solid var(--grayColor);', attr:'', unit:'noUse', disa:false, rows:'noUse', step:'noUse', llgn:'R', ftop:'', edit:null, rtrn:false);
php2html.lib.php 258: htm_InputAn advanced object rel. in-output of data [Necessary basic element] (labl:'', icon:'', hint:'', plho:'@Enter...', vrnt:'text', name:'', valu:'', list:[], form:'', wdth:'100%', algn:'left', bord:'', attr:'', unit:'', disa:false, rows:'2', step:'', llgn:'R', ftop:'', lpos:'', rtrn:false);
php2html.lib.php 3246: htm_LangSelectLanguage selector with flags (used in the view bar): the languages that have translations, plus English (rtrn:false);
php2html.lib.php 6856: htm_lfString function: Add one or more linefeed (rept:1, rtrn:false);
php2html.lib.php 3959: htm_LinkButtA general link-button (labl:'', hint:'', link:'', targ:'_blank', attr:'', rtrn:false);
php2html.lib.php 764: htm_List_Starting various types ef text list (capt:'', vrnt:'ul', type:'disc', styl:'text-align:left;', strt:'', rtrn:false);
php2html.lib.php 802: htm_List_endEnding a text list (rtrn:false);
php2html.lib.php 788: htm_List_itemA single item in a text list (labl:'', body:'', rtrn:false);
php2html.lib.php 4641: htm_Menu_LeftoutA page-menu to the left of the page (capt:'Clever html engine', data:[], wdth:'180px', styl:'', foot:'', rtrn:false);
php2html.lib.php 4524: htm_Menu_TopDownA page-menu on top of the page (capt:'Clever html engine', note:'', data:[], wdth:'150px', styl:'', foot:'PHP2HTML', niv0:'', niv1:'', niv2:'', them:true, view:null, rtrn:false);
php2html.lib.php 923: htm_MiniNoteA very small text line (note:'', rtrn:false); Very small text-line
php2html.lib.php 4015: htm_ModalDialogCreate a modal popup window with color-coded background (capt:'@VoilΓ !', type:'none', mess:'', html:'CSS-based Modal Dialog', butt:['type:','icon:','labl:','hint:','link:'], rtrn:false);
php2html.lib.php 3710: htm_MultistateButtA special button to switch between many states (name:'ROWyCOLx', valu:'', acti:true, styl:'padding:1px;', rtrn:false);
php2html.lib.php 6852: htm_nlString function: Add one ore more new line(s) (rept:1, rtrn:false);
php2html.lib.php 3306: htm_NotePadA personal notepad: plain text, saved automatically in this browser (the same notes on all pages of the site) - from TinyCash (rtrn:false);
php2html.lib.php 628: htm_OutputGeneral output for pt. Progress etc. [Necessary basic element] (labl:'', icon:'', hint:'', vrnt:'pgrs', name:'', valu:'', form:'', bclr:'white', attr:'', vmax:'', rtrn:false);
php2html.lib.php 3395: htm_PageHelpHelp for the page: a "?" button (in the view bar) and a movable window with the help text of this page (from TinyCash) (rtrn:false);
php2html.lib.php 4978: htm_Page_Start creating a page [Necessary basic element] (titl:'', hint:'', algn:'center', attr:'', info:'', inis:'', imag:'', pbrd:true);
php2html.lib.php 6688: htm_Page_endFinalize the htm_Page_() ();
php2html.lib.php 6678: htm_Page_SectA paragraf with border, can be used as a page-footer, or separator on a page. (body, styl:'border: 1px solid #888; border-radius: 8px; overflow: hidden; margin: auto; background-color:white;', rtrn:false);
php2html.lib.php 4482: htm_Pmnu_Init popup context menu group (capt:'', icon:'', wdth:'210px', attr:'background-color:lightcyan; height: 26px; border: 2px solid lightgray; border-radius: 4px; margin-left: 1px;', elem:'id', stck:'false', cntx:true, rtrn:false);
php2html.lib.php 4494: htm_Pmnu_endFinish a popup context menu group (labl:'', hint:'', attr:'', rtrn:false);
php2html.lib.php 4488: htm_Pmnu_ItemAdd a popup context menu item (labl:'', icon:'', hint:'', vrnt:'plain', name:'', clck:'', attr:'', shrt:'', enbl:'true', rtrn:false, disa:null);
php2html.lib.php 3370: htm_QuickBarA fixed bar at the bottom of the window with shortcuts, e.g. "New invoice" (from TinyCash, the buttons given by the program) (list:[], rtrn:false);
php2html.lib.php 2633: htm_RowCol_Start a first column in a div (wdth:240, rtrn:false); ColumnTop // Must be followed/ended of htm_RowCol_end()
php2html.lib.php 2652: htm_RowCol_endCreate the last column (rtrn:false);
php2html.lib.php 2644: htm_RowCol_nextCreate the next column (wdth:320, rtrn:false); NextColumn
php2html.lib.php 2011: htm_Row_Prepare a span with inline-block output (rtrn:false);
php2html.lib.php 2018: htm_Row_endFinalize the span (rtrn:false);
php2html.lib.php 6860: htm_spString function: Add one ore more nobreaking spaces [Necessary basic element] (rept:1, rtrn:false);
php2html.lib.php 6864: htm_spaceString function: Make a span with given width (wdth, rtrn:false);
php2html.lib.php 2828: htm_SubmitButtSubmit button with hint (labl:'', hint:'', type:'submit', wdth:'', font:'32px', fclr:'#555', bclr:'white', rtrn:false);
php2html.lib.php 3612: htm_SwitchButtA button with switch layout (labl:'', hint:'', name:'switchbox_id', valu:'', list:[], wdth:'', bclr:'', styl:'', rtrn:false);
php2html.lib.php 3650: htm_SwitchButtonAnother button with switch layout (labl, hint:'', name:'switchbox_id', valu:'', list:[], wdth:'', bclr:'', styl:'', rtrn:false);
php2html.lib.php 3913: htm_TabCreate a tab in the htm_Tabs_() object [Necessary basic element] (labl:'', name:'', body:'', vhgh:'', bclr:'white', styl:'text-align: left; box-shadow: 3px 3px 6px 0px #ccc; padding: 5px; background-color: white;', dflt:false);
php2html.lib.php 1243: htm_TableA table with records: sort, filter, edit, add rows and export to CSV [Necessary basic element] (capt:[ ], pref:[ ], body:[ ], suff:[ ], note:'', list:['',''], data:[], wdth:'98%', vhgh:'400px', styl:'', filt:true, sort:true, crea:true, modi:true, from:__FILE__, expo:'', rtrn:false);
php2html.lib.php 4176: htm_TableToolsSearch and sort for a table - without jQuery: a search field with "x of y rows", and sorting by clicking a column header (from NH-logistik) (tabl:'', plho:'@Search...', srch:true, sort:true, rtrn:false);
php2html.lib.php 3897: htm_Tabs_Start a tab-object with multibly tabs (head:'', styl:'', rtrn:false);
php2html.lib.php 3941: htm_Tabs_endFinalize a htm_Tabs_() object (foot:'', styl:'', rtrn:false);
php2html.lib.php 3973: htm_TextAreaCreate a HTML-textarea with multibly lines (labl:'', hint:'', plho:'?', name:'area', valu:'', form:'', wdth:'', attr:'', rows:'1', rtrn:false);
php2html.lib.php 718: htm_TextDivText formatted in a div (body:'', algn:'left', marg:'8px', styl:'box-shadow: 3px 3px 6px 0px #ccc; padding: 5px; border: solid 1px lightgray; ',attr:'background-color: white;', rtrn:false );
php2html.lib.php 970: htm_TextHintA div containing a text with a hidden hint (text:'', hint:'', styl:'', attr:'', rtrn:false);
php2html.lib.php 733: htm_TextPreText displayed in a fixed-width font, and preserves both spaces and line breaks (body, algn:'left', marg:'8px', font:'', attr:'', code:false, rtrn:false); Preformatted HTML text
php2html.lib.php 932: htm_TextTipA text with a caption on colored line (capt:'TIP', body:'', wdth:'', algn:'center', colr:'', rtrn:false);
php2html.lib.php 905: htm_TextVerVertical orientated text (body, algn:'left', marg:'auto', font:'', attr:'', code:false, rtrn:false); Vertical text
php2html.lib.php 3217: htm_ThemeButtA button that cycles the page theme: light -> dark -> auto (follows the operating system) -> custom. The choice is remembered. (labl:'', hint:'@...', rtrn:false);
php2html.lib.php 3577: htm_ThemeEditorEditor for the user's own theme: pick a few base colors, see the result live, save it in this browser. (rtrn:false);
php2html.lib.php 6427: htm_ToastSpecial script: message with auto-timeout (text, bclr:'#333', fclr:'#fff', tout:5000);
php2html.lib.php 3463: htm_ViewBarZoom and position are remembered in this browser. Drag the grip - double-click it (or Home) to put it back. (rtrn:false);
php2html.lib.php 2518: htm_Wrapp_Start a span with scrolling content in a fixed-height window (vhgh:'400px', rtrn:false); WrapperCard - open
php2html.lib.php 2525: htm_Wrapp_endFinalize a wrapper window (rtrn:false);
Tip: Hovering the mouse over function names (or tabbing to them) displays a short description.
Important about function parameters:
From PHP 8.0 you can give parameters to functions as:
Named arguments
--> Specify only required parameters, skipping optional ones. (free order!)
--> Arguments are order-independent and self-documented.
With positional arguments the order is fixed, and all arguments up to the last one you need must be given.
The library needs PHP 8.1 or newer.
From PHP 8.0 you can give parameters to functions as:
Named arguments
--> Specify only required parameters, skipping optional ones. (free order!)
--> Arguments are order-independent and self-documented.
With positional arguments the order is fixed, and all arguments up to the last one you need must be given.
The library needs PHP 8.1 or newer.
Details about the most used and complex system functions.
htm_Card()
htm_Inbox()
htm_Input()
htm_Page()
htm_Table()
htm_Tabs()
The function output:
Comming soon !
Comming soon !
PHP-code for calling htm_Card():
function htm_Card_( capt: '', # string: The card caption icon: '', # string: icon to the left of caption hint: '', # string: The hint on hover caption form: '', # string: form id/name (No form without a name) acti: '', # string: form action clas: 'cardWmax', # string: The card class (general CSS-data) wdth: '', # string: The closed card width styl: 'background-color: white;', # string: The card body style attr: '', # string: general attributes (style) for the card-container show: true, # bool: Show card-buttons top-right head: 'background-color: white;', # string: Style for Header background vhgh: '600px', # string: MaxHeight (ViewHeight) for span (HideBody) with scrollable content help: '' # string: Link to custom Card-help ) function htm_Card_end( labl: '', # string: Label on the submit button icon: '', # string: Icon left to label hint: '', # string: Hint on hover the submit button name: '', # string: The name of the button to submit form: '', # string: The name of the form to submit subm: false, # bool: Submit button shown and active attr: '', # string: Button attributes. Generel use e.g. action= "$link" akey: '', # string: Shortcut to activate the button kind: 'save', # string: The button appearance simu: false # bool: Button only simulate )
The generated HTML-code:
Comming soon !
Comming soon !
Declaring of the function:
function htm_Card_( $capt = '', # string: The card caption $icon = '', # string: icon to the left of caption $hint = '', # string: The hint on hover caption $form = '', # string: form id/name (No form without a name) $acti = '', # string: form action $clas = 'cardWmax', # string: The card class (general CSS-data) $wdth = '', # string: The closed card width $styl = 'background-color: white;', # string: The card body style $attr = '', # string: general attributes (style) for the card-container $show = true, # bool: Show card-buttons top-right $head = 'background-color: white;', # string: Style for Header background $vhgh = '600px', # string: MaxHeight (ViewHeight) for span (HideBody) with scrollable content $help = '' # string: Link to custom Card-help ) function htm_Card_end( $labl = '', # string: Label on the submit button $icon = '', # string: Icon left to label $hint = '', # string: Hint on hover the submit button $name = '', # string: The name of the button to submit $form = '', # string: The name of the form to submit $subm = false, # bool: Submit button shown and active $attr = '', # string: Button attributes. Generel use e.g. action= "$link" $akey = '', # string: Shortcut to activate the button $kind = 'save', # string: The button appearance $simu = false # bool: Button only simulate )
Some special notes:
htm_Card() do not exist, but
htm_Card_() - to prepare the card
htm_Carde_end() - to finalize the card
htm_Card() do not exist, but
htm_Card_() - to prepare the card
htm_Carde_end() - to finalize the card
htm_Inbox()
The function output:
Comming soon !
Comming soon !
PHP-code for calling htm_Inbox():
Comming soon !
Comming soon !
The generated HTML-code:
Comming soon !
Comming soon !
Declaring of the function:
Comming soon !
Comming soon !
htm_Input()
The function output:
Comming soon !
Comming soon !
PHP-code for calling htm_Input():
function htm_Input(# labl:'',plho:'@Enter...',icon:'',hint:'',vrnt: 'text',name:'',valu:'',form:'',wdth:'',algn:'left',attr:'',rtrn:false,unit:'',disa:false,rows:'2',step:'',list:[],llgn:'R',bord:'',ftop:''); # Generel order: $labl= '', # string: Translated label above the input field $plho= '@Enter...', # string: Translated placeholder shown when field is empty. Default: Enter... $icon= '', # string: The icon left of the label (label prefix) $hint= '', # string: Translated description for the field $vrnt= 'text', # string: Variant - 'text', 'date', ... Look at source ! $name= '', # string: Set the fields name (and id) $valu= '', # string: The current content in input field $form= '', # string: With Local form given, click on label to submit $wdth= '100%', # string: Width of the field-container $algn= 'left', # string: The alignment of input content Default: left $attr= '', # string: Give more (special / non system) input attrib to the input $rtrn= false, # bool: Act as procedure: Echo result, or as function: Return string # htm_Input() only: $unit= '', # string: A unit added to the content eg. currency or % If in front: '<' it is added as a prefix, else a suffix $disa= false, # bool: Disable the field. Default: field is active $rows= '2', # string: Number of rows in multiline input (eg. area/html) Default: 2 (Radio/Check-list: 1 to output horisontal) $step= '', # string: the value of stepup/stepdown for numbers $list= [], # array: Data for subitems in "multi-list" (eg. options, checkbox, radiolist) {opti:value,label,hint,attr} $llgn= 'R', # string: Label align Default: Right $bord= '', # string: BoxBorder color to mark required/optional field. Default= 'border: 1px solid var(--grayColor);' $ftop= '' # string: Ajust field vertical position )
The generated HTML-code:
Comming soon !
Comming soon !
Declaring of the function:
Comming soon !
Comming soon !
htm_Page()
There are normerly no visibly output from this function:
but you can set a title, a hint and info or a background-image.
but you can set a title, a hint and info or a background-image.
PHP-code for calling htm_Page():
function htm_Page_( titl:'', # string: Page title hint:'', # string: Page tip (vertical text - left) info:'', # string: Page into (vertical text - right) inis:'', # string: Initial CSS/js script in page header algn:'center', # string: align background-image imag:'', # string: Page background-image attr:'', # string: Page attributes pbrd:true # bool: Draw border around the page body-div ) function htm_Page_end(); # End of page - has no parameters
Part of generated HTML-code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta name="description" content="This program is about using library PHP2HTML">
<meta name="author" content="EV-soft">
<meta name="robots" content="Noindex, Nofollow"><meta name="googlebot" content="Noindex"><title>functions.page.php</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.30.1/js/jquery.tablesorter.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.30.1/js/widgets/widget-cssStickyHeaders.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.30.1/js/parsers/parser-input-select.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.30.1/js/jquery.tablesorter.widgets.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.30.1/css/theme.blue.css" rel="stylesheet" />
...
Function declaring and parameter default:
function htm_Page_(# titl:'', hint:'', info:'', inis:'', algn:'center', gbl_Imag:'', attr:'', gbl_Bord:true) $titl='', # string: Page title $hint='', # string: Page tip (vertical text - left) $info='', # string: Page into (vertical text - right) $inis='', # string: Initial CSS/js script in page header $algn='center', # string: align background-image $imag='', # string: Page background-image $attr='', # string: Page attributes $pbrd=true # bool: Draw border around the page body-div ) # Page content must be given between htm_Page_() and htm_Page_end() function htm_Page_end(); # End of page - has no parameters
Some special notes:
htm_Page() do not exist, but use
htm_Page_() - to prepare the page
htm_Page_end() - to finalize the page
htm_Page() do not exist, but use
htm_Page_() - to prepare the page
htm_Page_end() - to finalize the page
htm_Table()
The function output:
Caption: Inland VAT (incoming):
Create an empty row, so you can fill in data in the yellow fields !
Keyboard shortcut: Alt+C
Table-note:
Caption: Inland VAT (incoming):
| No. Position number in the group {Editable} | Description Item Description. A descriptive text of your choice {Editable} | Account The number in the statement of account to which the sales tax must be posted. {Editable} | %-rate VAT % rate {Editable} | Note Note about the record {Editable} | Rows Delete, copy, move and undo in the browser |
|---|---|---|---|---|---|
Keyboard shortcut: Alt+C
Table-note:
PHP-code for calling htm_Table():
htm_Table(capt: array( ['Caption: <b>'.lang('@Inland').'</b>', '8%','show','left', '', '@VAT on India','@PURCHASE'], ['@VAT (incoming): ', '34%','show','left', '', '','@The VAT you must return from the Tax Agency'] ), pref: array(), body: array( ['@No.', '10%','text','',['center'],'vat_no', '@Position number in the group','.No.'], ['@Description', '26%','data','',['left' ],'vat_desc','@Item Description. A descriptive text of your choice','@Enter text...'], ['@Account', '10%','data','',['center'],'vat_acc', '@The number in the statement of account to which the sales tax must be posted.','Account...'], ['@%-rate', '10%','data','',['center'],'vat_rate','@VAT % rate','25 %...'], ['@Note', '36%','text','',['left' ],'vat_note','@Note about the record','.?.'], ), suff: array( ['@Rows', '8%','rowact','',['center'],'@Delete, copy, move and undo in the browser', 'del copy move undo'], ), note: 'Table-note:', data: $arrData, filt: true, sort: true, crea: true, modi: true, vhgh: '200px', styl: 'background-image: none;', from: __FILE__, list: ['',''], expo: '', rtrn: false );
The generated HTML-code for table:
<br />
<script>
$.tablesorter.addParser({ /* Number columns: the value of the field in the program's number format - before .tablesorter(), else it is unknown */
id: 'p2hNum',
is: function () { return false; },
format: function (s, table, cell) {
var i= $(cell).find('input,select').first(), v= String(i.length ? i.val() : s).replace(/[\s\u00a0\u202f%]/g, '');
v= "," === "," ? v.replace(/\./g, "").replace(",", ".") : v.replace(/,/g, "");
var m= v.match(/-?(\d+(\.\d+)?|\.\d+)/); return m ? parseFloat(m[0]) : '';
},
parsed: true, /* The filter searches the value too (the cell text is empty: the value is in a field) */
type: 'numeric'
});
if ($.tablesorter.resizable && !$.tablesorter.resizable.p2hFix) { /* Column resize grips on the column lines: Tablesorter subtracted the table's offset in its wrapper */
var p2hRsOrig= $.tablesorter.resizable.setHandlePosition; /* (it must be added - the grips were beside the lines when the table is not at the left edge, e.g. in a centered card, and with zoom) */
$.tablesorter.resizable.setHandlePosition= function (c, wo) {
p2hRsOrig.apply(this, arguments);
var box= wo.$resizable_container && wo.$resizable_container[0], t= c.table; if (!box) return;
var dx= t.offsetLeft - box.offsetLeft; /* CSS pixels - not changed by zoom */
wo.$resizable_container.children().each(function () {
var hd= $(this).data('header'), th= hd && hd[0];
if (!th || this.style.display === 'none' || th.offsetParent !== t) return;
this.style.left= (dx + th.offsetLeft + th.offsetWidth - Math.floor(this.offsetWidth / 2)) + 'px';
});
};
$.tablesorter.resizable.p2hFix= true;
$(window).on('load resize', function () { $('table.tablesorter').trigger('resizableUpdate'); }); /* The layout settles after the init (scrollbar, fonts): the grips follow */
}
$('#table1').tablesorter({
theme: 'blue',headers: { },
dateFormat : "Y-m-d",
widthFixed : true,
widgets: ['zebra', 'cssStickyHeaders', 'filter', 'editable', 'resizable'],
widgetOptions: {
cssStickyHeaders_attachTo : $('#table1').closest('.wrapper'), /* Its own wrapper (was: the first of the page) */
cssStickyHeaders_filteredToTop : false,
cssStickyHeaders_offset: 0,
cssStickyHeaders_addCaption : true,
filter_hideFilters : true,
filter_cellFilter : 'tablesorter-filter-cell',
filter_reset : '.reset',
resizable: true
}
});
// https://stackoverflow.com/questions/19413025/use-tablesorter-to-filter-selected-items-in-options-list-chosen
// if (addParser:)
$.tablesorter.addParser({
id: 'select',
is: function () { return false; },
format: function (s, table1, cell) { /* val() is a string for a single select, an array for multiple */
var v= $(cell).find('select').val(); return (Array.isArray(v) ? v.join(',') : v) || s; },
});
$.tablesorter.addParser({
id: 'data',
is: function(s, table, cell, Scell) {
return false; },
format: function(s, table1, cell) {
var Scell = $(cell);
return Scell.attr('data-sort') || s; }
});
</script>
<span class="tableStyle" id="tblSpan1" style="width:98%; padding: 8px; background-image: none; "> Caption: <b>Inland</b> VAT (incoming): <span class="wrapper" style="padding:0; margin: 0 0 6px; border:1px solid gray; height:200px; display: block;"> <div id="overlay1"></div> <table class="tablesorter" id="table1" style="width:auto; padding:1px; margin:0; table-layout: fixed;"> <thead> <tr style="height:32px;"><th class=" filter-true sorter-inputs sorter-text " data-placeholder= "Filter..." name="xxxx" style="width:10%; text-align:center;"><span class="LblTip" style="">No. <span class="LblTip_SØ" >Position number in the group<br />{Editable}</span></span> </th><th class=" filter-true sorter-inputs sorter-text " data-placeholder= "Filter..." name="xxxx" style="width:26%; text-align:center;"><span class="LblTip" style="">Description <span class="LblTip_SØ" >Item Description. A descriptive text of your choice<br />{Editable}</span></span> </th><th class=" filter-true sorter-inputs sorter-text " data-placeholder= "Filter..." name="xxxx" style="width:10%; text-align:center;"><span class="LblTip" style="">Account <span class="LblTip_S" >The number in the statement of account to which the sales tax must be posted.<br />{Editable}</span></span> </th><th class=" filter-true sorter-inputs sorter-text " data-placeholder= "Filter..." name="xxxx" style="width:10%; text-align:center;"><span class="LblTip" style="">%-rate <span class="LblTip_S" >VAT % rate<br />{Editable}</span></span> </th><th class=" filter-true sorter-inputs sorter-text " data-placeholder= "Filter..." name="xxxx" style="width:36%; text-align:center;"><span class="LblTip" style="">Note <span class="LblTip_SW" >Note about the record<br />{Editable}</span></span> </th><th class="filter-false sorter-false" style="width:8%; text-align:center; "><span class="LblTip" style="">Rows <span class="LblTip_SW" >Delete, copy, move and undo in the browser</span></span></th> </tr> </thead> <tbody><tr class="row" id="tabl1_row0" style="display: revert;"><td style="text-align:center; width:10%; " data-sort= "0" > <input aria-label="No." type= "text" name="vat_no[]" value="1" placeholder=".No." style="text-align:center; " /> </td><td style="text-align:left; width:26%; " data-sort= "0" > <input aria-label="Description" type= "text" name="vat_desc[]" value="Input VAT" placeholder="Enter text..." style="text-align:left; padding-left:2px; padding-right:2px;" /> </td><td style="text-align:center; width:10%; " data-sort= "0" > <input aria-label="Account" type= "text" name="vat_acc[]" value="66200" placeholder="Account..." style="text-align:center; padding-left:2px; padding-right:2px;" /> </td><td style="text-align:center; width:10%; " data-sort= "0" > <input aria-label="%-rate" type= "text" name="vat_rate[]" value="25,00" placeholder="25 %..." style="text-align:center; padding-left:2px; padding-right:2px;" /> </td><td style="text-align:left; width:36%; " data-sort= "0" > <input aria-label="Note" type= "text" name="vat_note[]" value="" placeholder=".?." style="text-align:left; " /> </td><td style="text-align:center; width:8%;" disabled ><abbr class="hint"><button type="button" class="p2hRowAct" data-act="del" aria-label="Delete the row"><ic class="fa-solid fa-trash-alt" style="color:#c62828;" aria-hidden="true"></ic></button><data-hint style="left:auto; right:0;">Delete the row</data-hint></abbr><abbr class="hint"><button type="button" class="p2hRowAct" data-act="copy" aria-label="Copy the row (the copy is inserted below it)"><ic class="fa-regular fa-clone" style="color:#1565c0;" aria-hidden="true"></ic></button><data-hint style="left:auto; right:0;">Copy the row (the copy is inserted below it)</data-hint></abbr><abbr class="hint"><button type="button" class="p2hRowAct" data-act="up" aria-label="Move the row up"><ic class="fa-solid fa-arrow-up" style="color:#2e7d32;" aria-hidden="true"></ic></button><data-hint style="left:auto; right:0;">Move the row up</data-hint></abbr><abbr class="hint"><button type="button" class="p2hRowAct" data-act="down" aria-label="Move the row down"><ic class="fa-solid fa-arrow-down" style="color:#2e7d32;" aria-hidden="true"></ic></button><data-hint style="left:auto; right:0;">Move the row down</data-hint></abbr><abbr class="hint"><button type="button" class="p2hRowAct" data-act="undo" aria-label="Undo the last row change (delete, copy, move)"><ic class="fa-solid fa-undo" style="color:#ef6c00;" aria-hidden="true"></ic></button><data-hint style="left:auto; right:0;">Undo the last row change (delete, copy, move)</data-hint></abbr><script>
(function(){
var T= {"ask":"Delete the row?","none":"Nothing to undo"};
function upd(t) { if (window.jQuery && t.config) jQuery(t).trigger("update"); }
function rows(tb) { return [].filter.call(tb.children, function(r) { return r.tagName === "TR" && r.classList.contains("row") && r.style.display !== "none"; }); }
function fresh(tr, src) { /* A copy is a new record: no ids, the record id (the field of a hidden column) empty */
tr.removeAttribute("id"); tr.querySelectorAll("[id]").forEach(function(e) { e.removeAttribute("id"); });
var h= null; [].forEach.call(tr.cells, function(td) { if (!h && td.style.display === "none") h= td.querySelector("input[type=hidden]"); });
if (h) h.value= ""; /* (was the first hidden field - in a chck column that is the checkbox state) */
var a= src.querySelectorAll("select"), b= tr.querySelectorAll("select"); /* cloneNode() does not keep the chosen option */
for (var i= 0; i < a.length; i++) if (b[i]) b[i].value= a[i].value;
}
document.addEventListener("click", function(e) {
var b= e.target.closest && e.target.closest(".p2hRowAct"); if (!b) return;
e.preventDefault();
var tr= b.closest("tr"), tb= tr.parentNode, t= tr.closest("table"), st= t.p2hUndo || (t.p2hUndo= []), a= b.dataset.act;
if (a === "del") sysConfirm(T.ask, function() { st.push({k: "del", tr: tr, next: tr.nextSibling, tb: tb}); tb.removeChild(tr); upd(t); });
else if (a === "copy") { var c= tr.cloneNode(true); fresh(c, tr); tb.insertBefore(c, tr.nextSibling); st.push({k: "add", tr: c}); upd(t); }
else if (a === "up" || a === "down") {
var l= rows(tb), i= l.indexOf(tr), o= l[a === "up" ? i - 1 : i + 1]; if (!o) return;
st.push({k: "move", tr: tr, next: tr.nextSibling, tb: tb});
tb.insertBefore(tr, a === "up" ? o : o.nextSibling); upd(t); b.focus();
}
else if (a === "undo") {
var u= st.pop(); if (!u) { sysAlert(T.none); return; }
if (u.k === "add") u.tr.remove();
else u.tb.insertBefore(u.tr, (u.next && u.next.parentNode === u.tb) ? u.next : null);
upd(t);
}
});
})();
</script></td></tr><tr class="row" id="tabl1_row1" style="display: revert;"><td style="text-align:center; width:10%; " data-sort= "1" > <input aria-label="No." type= "text" name="vat_no[]" value="2" placeholder=".No." style="text-align:center; " /> </td><td style="text-align:left; width:26%; " data-sort= "1" > <input aria-label="Description" type= "text" name="vat_desc[]" value="Input VAT" placeholder="Enter text..." style="text-align:left; padding-left:2px; padding-right:2px;" /> </td><td style="text-align:center; width:10%; " data-sort= "1" > <input aria-label="Account" type= "text" name="vat_acc[]" value="66201" placeholder="Account..." style="text-align:center; padding-left:2px; padding-right:2px;" /> </td><td style="text-align:center; width:10%; " data-sort= "1" > <input aria-label="%-rate" type= "text" name="vat_rate[]" value="25,00" placeholder="25 %..." style="text-align:center; padding-left:2px; padding-right:2px;" /> </td><td style="text-align:left; width:36%; " data-sort= "1" > <input aria-label="Note" type= "text" name="vat_note[]" value="" placeholder=".?." style="text-align:left; " /> </td><td style="text-align:center; width:8%;" disabled ><abbr class="hint"><button type="button" class="p2hRowAct" data-act="del" aria-label="Delete the row"><ic class="fa-solid fa-trash-alt" style="color:#c62828;" aria-hidden="true"></ic></button><data-hint style="left:auto; right:0;">Delete the row</data-hint></abbr><abbr class="hint"><button type="button" class="p2hRowAct" data-act="copy" aria-label="Copy the row (the copy is inserted below it)"><ic class="fa-regular fa-clone" style="color:#1565c0;" aria-hidden="true"></ic></button><data-hint style="left:auto; right:0;">Copy the row (the copy is inserted below it)</data-hint></abbr><abbr class="hint"><button type="button" class="p2hRowAct" data-act="up" aria-label="Move the row up"><ic class="fa-solid fa-arrow-up" style="color:#2e7d32;" aria-hidden="true"></ic></button><data-hint style="left:auto; right:0;">Move the row up</data-hint></abbr><abbr class="hint"><button type="button" class="p2hRowAct" data-act="down" aria-label="Move the row down"><ic class="fa-solid fa-arrow-down" style="color:#2e7d32;" aria-hidden="true"></ic></button><data-hint style="left:auto; right:0;">Move the row down</data-hint></abbr><abbr class="hint"><button type="button" class="p2hRowAct" data-act="undo" aria-label="Undo the last row change (delete, copy, move)"><ic class="fa-solid fa-undo" style="color:#ef6c00;" aria-hidden="true"></ic></button><data-hint style="left:auto; right:0;">Undo the last row change (delete, copy, move)</data-hint></abbr></td></tr><tr class="row" id="tabl1_row2" style="display: revert;"><td style="text-align:center; width:10%; " data-sort= "2" > <input aria-label="No." type= "text" name="vat_no[]" value="3" placeholder=".No." style="text-align:center; " /> </td><td style="text-align:left; width:26%; " data-sort= "2" > <input aria-label="Description" type= "text" name="vat_desc[]" value="Input VAT" placeholder="Enter text..." style="text-align:left; padding-left:2px; padding-right:2px;" /> </td><td style="text-align:center; width:10%; " data-sort= "2" > <input aria-label="Account" type= "text" name="vat_acc[]" value="66202" placeholder="Account..." style="text-align:center; padding-left:2px; padding-right:2px;" /> </td><td style="text-align:center; width:10%; " data-sort= "2" > <input aria-label="%-rate" type= "text" name="vat_rate[]" value="15,00" placeholder="25 %..." style="text-align:center; padding-left:2px; padding-right:2px;" /> </td><td style="text-align:left; width:36%; " data-sort= "2" > <input aria-label="Note" type= "text" name="vat_note[]" value="" placeholder=".?." style="text-align:left; " /> </td><td style="text-align:center; width:8%;" disabled ><abbr class="hint"><button type="button" class="p2hRowAct" data-act="del" aria-label="Delete the row"><ic class="fa-solid fa-trash-alt" style="color:#c62828;" aria-hidden="true"></ic></button><data-hint style="left:auto; right:0;">Delete the row</data-hint></abbr><abbr class="hint"><button type="button" class="p2hRowAct" data-act="copy" aria-label="Copy the row (the copy is inserted below it)"><ic class="fa-regular fa-clone" style="color:#1565c0;" aria-hidden="true"></ic></button><data-hint style="left:auto; right:0;">Copy the row (the copy is inserted below it)</data-hint></abbr><abbr class="hint"><button type="button" class="p2hRowAct" data-act="up" aria-label="Move the row up"><ic class="fa-solid fa-arrow-up" style="color:#2e7d32;" aria-hidden="true"></ic></button><data-hint style="left:auto; right:0;">Move the row up</data-hint></abbr><abbr class="hint"><button type="button" class="p2hRowAct" data-act="down" aria-label="Move the row down"><ic class="fa-solid fa-arrow-down" style="color:#2e7d32;" aria-hidden="true"></ic></button><data-hint style="left:auto; right:0;">Move the row down</data-hint></abbr><abbr class="hint"><button type="button" class="p2hRowAct" data-act="undo" aria-label="Undo the last row change (delete, copy, move)"><ic class="fa-solid fa-undo" style="color:#ef6c00;" aria-hidden="true"></ic></button><data-hint style="left:auto; right:0;">Undo the last row change (delete, copy, move)</data-hint></abbr></td></tr></tbody></table></span><div style="text-align: center;"><span class="center" style="height:25px; display: inline-block;"><abbr class="hint"> <button class="acceptbutt buttstyl" form="form_4_1" type= "button" name="btn_spc2form_4_1" id="btn_spc2form_4_1" style="min-height: 24px; padding-right: 6px; margin-bottom: 6px; width: 200px; min-height:16px;; background:White; color:black; opacity:0.9;" onclick='appendRow(table1,"\u003Ctr class=\u0022row\u0022 style=\u0022 border: 3px solid red;\u0022\u003E\u003Ctd style=\u0022text-align:center; width:10%;\u0022 \u003E\u003Cinput type= \u0022text\u0022 class=\u0022clsFocus\u0022 name=\u0022vat_no[]\u0022 aria-label=\u0022No.\u0022 value=\u0022\u0022 placeholder=\u0022.No.\u0022 style=\u0022text-align:center; width: 98%; background-color: lightyellow; font-style:inherit;\u0022 \/\u003E \u003C\/td\u003E\u003Ctd style=\u0022text-align:left; width:26%;\u0022 \u003E\u003Cinput type= \u0022text\u0022 name=\u0022vat_desc[]\u0022 aria-label=\u0022Description\u0022 value=\u0022\u0022 placeholder=\u0022Enter text...\u0022 style=\u0022text-align:left; width: 98%; background-color: lightyellow; font-style:inherit;\u0022 \/\u003E \u003C\/td\u003E\u003Ctd style=\u0022text-align:center; width:10%;\u0022 \u003E\u003Cinput type= \u0022text\u0022 name=\u0022vat_acc[]\u0022 aria-label=\u0022Account\u0022 value=\u0022\u0022 placeholder=\u0022Account...\u0022 style=\u0022text-align:center; width: 98%; background-color: lightyellow; font-style:inherit;\u0022 \/\u003E \u003C\/td\u003E\u003Ctd style=\u0022text-align:center; width:10%;\u0022 \u003E\u003Cinput type= \u0022text\u0022 name=\u0022vat_rate[]\u0022 aria-label=\u0022%-rate\u0022 value=\u0022\u0022 placeholder=\u002225 %...\u0022 style=\u0022text-align:center; width: 98%; background-color: lightyellow; font-style:inherit;\u0022 \/\u003E \u003C\/td\u003E\u003Ctd style=\u0022text-align:left; width:36%;\u0022 \u003E\u003Cinput type= \u0022text\u0022 name=\u0022vat_note[]\u0022 aria-label=\u0022Note\u0022 value=\u0022\u0022 placeholder=\u0022.?.\u0022 style=\u0022text-align:left; width: 98%; background-color: lightyellow; font-style:inherit;\u0022 \/\u003E \u003C\/td\u003E\u003Ctd style=\u0022text-align:center; width:8%;\u0022\u003E\u003Cabbr class=\u0022hint\u0022\u003E\u003Cbutton type=\u0022button\u0022 class=\u0022p2hRowAct\u0022 data-act=\u0022del\u0022 aria-label=\u0022Delete the row\u0022\u003E\u003Cic class=\u0022fa-solid fa-trash-alt\u0022 style=\u0022color:#c62828;\u0022 aria-hidden=\u0022true\u0022\u003E\u003C\/ic\u003E\u003C\/button\u003E\u003Cdata-hint style=\u0022left:auto; right:0;\u0022\u003EDelete the row\u003C\/data-hint\u003E\u003C\/abbr\u003E\u003Cabbr class=\u0022hint\u0022\u003E\u003Cbutton type=\u0022button\u0022 class=\u0022p2hRowAct\u0022 data-act=\u0022copy\u0022 aria-label=\u0022Copy the row (the copy is inserted below it)\u0022\u003E\u003Cic class=\u0022fa-regular fa-clone\u0022 style=\u0022color:#1565c0;\u0022 aria-hidden=\u0022true\u0022\u003E\u003C\/ic\u003E\u003C\/button\u003E\u003Cdata-hint style=\u0022left:auto; right:0;\u0022\u003ECopy the row (the copy is inserted below it)\u003C\/data-hint\u003E\u003C\/abbr\u003E\u003Cabbr class=\u0022hint\u0022\u003E\u003Cbutton type=\u0022button\u0022 class=\u0022p2hRowAct\u0022 data-act=\u0022up\u0022 aria-label=\u0022Move the row up\u0022\u003E\u003Cic class=\u0022fa-solid fa-arrow-up\u0022 style=\u0022color:#2e7d32;\u0022 aria-hidden=\u0022true\u0022\u003E\u003C\/ic\u003E\u003C\/button\u003E\u003Cdata-hint style=\u0022left:auto; right:0;\u0022\u003EMove the row up\u003C\/data-hint\u003E\u003C\/abbr\u003E\u003Cabbr class=\u0022hint\u0022\u003E\u003Cbutton type=\u0022button\u0022 class=\u0022p2hRowAct\u0022 data-act=\u0022down\u0022 aria-label=\u0022Move the row down\u0022\u003E\u003Cic class=\u0022fa-solid fa-arrow-down\u0022 style=\u0022color:#2e7d32;\u0022 aria-hidden=\u0022true\u0022\u003E\u003C\/ic\u003E\u003C\/button\u003E\u003Cdata-hint style=\u0022left:auto; right:0;\u0022\u003EMove the row down\u003C\/data-hint\u003E\u003C\/abbr\u003E\u003Cabbr class=\u0022hint\u0022\u003E\u003Cbutton type=\u0022button\u0022 class=\u0022p2hRowAct\u0022 data-act=\u0022undo\u0022 aria-label=\u0022Undo the last row change (delete, copy, move)\u0022\u003E\u003Cic class=\u0022fa-solid fa-undo\u0022 style=\u0022color:#ef6c00;\u0022 aria-hidden=\u0022true\u0022\u003E\u003C\/ic\u003E\u003C\/button\u003E\u003Cdata-hint style=\u0022left:auto; right:0;\u0022\u003EUndo the last row change (delete, copy, move)\u003C\/data-hint\u003E\u003C\/abbr\u003E\u003C\/td\u003E\u003C\/tr\u003E")' accesskey="c" > <i class="fas fa-plus"> </i> Create new row </button> <data-hint style="position: absolute; right: 100px;">Create an empty row, so you can fill in data in the yellow fields ! <br><em>Keyboard shortcut: Alt+C</em></data-hint> </abbr> </span></div><br><span style="display: inline-block; position: relative;">Table-note:</span></span> Declaring of the function:
All details, with examples: table.page.php
function htm_Table(# capt:[ ], pref:[ ], body:[ ], suff:[ ], note:'', list:['',''], data:[], wdth:'98%', vhgh:'400px', styl:'', filt:true, sort:true, crea:true, modi:true, from:__FILE__, expo:'', rtrn:false) $capt= [], # array: Fields above the table: [0:labl, 1:wdth, 2:type, 3:name, 4:algn, 5:hint, 6:plho, 7:valu] # type: show (only the text) / rows (the number of rows + 6) / html (7 as HTML) / data (a field with name 3 - posted) # / text, number, date ... (a field without name - not posted). Shown only when the table has data. $pref= [], # array: Columns before the data: [0:labl, 1:wdth, 2:-, 3:-, 4:[algn], 5:hint, 6:html] # 6 is the same HTML in every row; name="x" becomes name="i<row>_x" $body= [], # array: The data columns: [0:labl, 1:wdth, 2:type, 3:frmt, 4:[style], 5:fkey, 6:hint, 7:plho, 8:calc, 9:[list, css]] # 2 type: text data area sttu (field) / show (read only) / intg (integer) / date / ddwn (select, 9) / opti (htm_Input option field, 9) # chck (checkbox) / bold ital (read only: is the text bold/italic) / indx keyn (the value as a link, clickable) # html htm0 (the value as HTML) / blnk (nothing) / hidd (hidden, posted) / calc (a number from field 8) / vars (old select) # 3 frmt: 0d 1d 2d (decimals) / 2% (2 decimals + %) / >0 (blank when 0 or less) / '= ' (always blank) / B R L (bold #00000, red, blue - type html) # 4 style: [0:text-align, 1:cell background, 2:field style (text fields), 3:cell background (row marking), 4:font-size] # 5 fkey: the field name - posted as fkey[] (one value per row, in the order of the rows) # 8 calc: fn($row) => number - $row is [fkey => value], e.g. fn($r) => toNum($r['qty']) * toNum($r['price']) # 9 list: [[[value, label, hint], ...], 'css of the select'] (ddwn/opti) $suff= [], # array: Columns after the data (only with modi): [0:labl, 1:wdth, 2:type, 3:-, 4:[algn], 5:hint, 6:valu] # type rowact: row actions in the browser, 6 = 'del copy move undo' (any of them) # type button: a submit button named btn_<del|hid|cpy|ren|sel>_<table>_<row> - by 0: @Delete @Hide @Copy @Rename @Select, 6 = its icon # else: 6 is shown as HTML (an "open-modal_N" in it opens one dialog per row) $note= '', # string: HTML below the table ('' with filt: a hint about the filter) $list= ['',''], # array: The row rules of customRules.inc.php, e.g. ['KONTOPLAN'] - and the options of 'vars' columns &$data= [], # array: The rows (by reference - give a variable): [[v0, v1, ...], ...] in the order of body, or [[fkey => value, ...], ...] $wdth= '98%', # string: The width of the table $vhgh= '400px', # string: The height of the scrolling window with the rows (the header stays) $styl= '', # string: Style for the span that holds the table $filt= true, # bool: A filter field below each header $sort= true, # bool: Sort by clicking a header (SHIFT+click: by more columns) $crea= true, # bool: A button that adds an empty row - a string is the label of the button $modi= true, # bool: The fields can be changed, and the suffix columns are shown $from= __FILE__, # string: Where the table is made (__FILE__ / __FUNCTION__) - shown by indx/keyn clicks $expo= '', # string: Also write the data to this CSV file (UTF-8, Excel-safe) $rtrn= false # bool: Return the HTML instead of echoing it ) # Every field of a row is posted as <fkey>[] - $_POST['fkey'][n] is row n (also new rows and the order after row actions). # Hidden columns (hidd) are posted too - e.g. the record id. A new row has an empty id.
All details, with examples: table.page.php
htm_Tabs()
The function output:
Comming soon !
Comming soon !
PHP-code for calling htm_Tabs():
Comming soon !
Comming soon !
The generated HTML-code:
Comming soon !
Comming soon !
Declaring of the function:
Comming soon !
Comming soon !
Some special notes:
All names must be unique on a page.
There are no function "htm_Tabs()" but use these tree:
htm_Tabs_() - to prepare the element
htm_Tab() - to create a single tab
htm_Tabs_end() - to finalize the element
All names must be unique on a page.
There are no function "htm_Tabs()" but use these tree:
htm_Tabs_() - to prepare the element
htm_Tab() - to create a single tab
htm_Tabs_end() - to finalize the element
In addition to system functions, php2html.php contains declarations for
other functions without prefix: htm_
They are usable in your project, but are only documented in php2html.php
other functions without prefix: htm_
They are usable in your project, but are only documented in php2html.php
Open source - πππππππ & ππ°π±πΊπ³πͺπ¨π©π΅ Β© 2019-2026 EV-soft *** See the file: LICENSE