顯示具有 table 標籤的文章。 顯示所有文章
顯示具有 table 標籤的文章。 顯示所有文章

2023年8月29日 星期二

V120401F - 標籤列印(長*寬) - 版面設計3 -html格式 - div -table

 目的: V120401F - 標籤列印(長*寬) - 版面設計

       1>HTML online - 先製作標籤版面(含框線)
       2>將版面 HTML 移至程式(加入 Panel),  $('#panel_V120401F-innerCt').append(print_area_Str1)
       3>$('#panel_V120401F)  --> 取得DOM id (Ext.panel元件又分成 DOM Header & Body)
           Ext.getCmp('panel_V120401F)  --> 取得Ext 元件
            
處理說明:
1>利用 HTML Online排版完成標籤格式 - https://www.tutorialspoint.com/online_html_editor.php
2>html 的版面配置 OK 後, 才將html 的格式內容複製至 程式內
3><div> 設定邊框及顏色 & 長寬 & 字形大小
    <div id='print_area' style='border: 5px solid green; width:10cm;height:3cm; font-size:8pt;' >
4><table> 設定邊框及顏色 & 長寬 & 字形大小
    <table id='my_tbl_1' border=1 bordercolor='red' cellspacing=0 style='width: 100%' >
    --> Table 的高度由 <div  font-size 決定
5>必需 id 已顯示在畫面, 才可 $('#panel_V120401F-innerCt').append(pub_print_area_Str1);
    win.show();
    var Tmp_panel_V120401F_innerCt = $('#panel_V120401F-innerCt');
    Tmp_panel_V120401F_innerCt.append(pub_print_area_Str1);



1>*.html

<!DOCTYPE html>
<html>
<title>Online HTML Editor</title>
<head>
</head>

<body>
<div id='print_area' style='border: 5px solid green;'>
<div id='my_div_1' style='width:10cm;height:3cm;border:3px solid yellow;font-size:8pt;'>
<table id='my_tbl_1' style='width: 100%'  border=1 bordercolor='red' cellspacing=0 >
<tr>
<td width=70%>
<table id='my_tbl_1' style='width:100%;' border=1 bordercolor='blue' cellspacing=0>
<th width=50% style='margin: 0 0 0 0 ;'>技令編號(TO NO) : </th>
<td width=50% >XX16W6-40-22</td>
</tr>
<tr>
<th width=50% >冊號(Copy#) :</th>
<td width=50% ></td>
</tr>
<tr >
<th width=50% >儲位(Location) :</th>
<td width=50% ></td>
</tr>
<tr >
<th width=50% >使用單位(Work Unit) :</th>
<td width=50% >W30</td>
</tr>
<tr >
<th width=50% >語言(Language) :</th>
<td width=50% >E</td>
</tr>
</table>
</td>
<td >
<table id = 'my_tbl_r1' style='width:100%;' border=1 bordercolor='blue' cellspacing=0>
<tr>
<td >



<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="90" height="90">
<rect x="0" y="0" width="90" height="90" style="fill:#ffffff;shape-rendering:crispEdges;"/>
<path x="0" y="0" style="fill:#000000;shape-rendering:crispEdges;" d="M0,0 V4.29 H4.29 V0 H0 Z M4.29,0 V4.29 H8.57 V0 H4.29 Z M8.57,0 V4.29 H12.86 V0 H8.57 Z M12.86,0 V4.29 H17.14 V0 H12.86 Z M17.14,0 V4.29 H21.43 V0 H17.14 Z M21.43,0 V4.29 H25.71 V0 H21.43 Z M25.71,0 V4.29 H30 V0 H25.71 Z M34.29,0 V4.29 H38.57 V0 H34.29 Z M51.43,0 V4.29 H55.71 V0 H51.43 Z M60,0 V4.29 H64.29 V0 H60 Z M64.29,0 V4.29 H68.57 V0 H64.29 Z M68.57,0 V4.29 H72.86 V0 H68.57 Z M72.86,0 V4.29 H77.14 V0 H72.86 Z M77.14,0 V4.29 H81.43 V0 H77.14 Z M81.43,0 V4.29 H85.71 V0 H81.43 Z M85.71,0 V4.29 H90 V0 H85.71 Z M0,4.29 V8.57 H4.29 V4.29 H0 Z M25.71,4.29 V8.57 H30 V4.29 H25.71 Z M42.86,4.29 V8.57 H47.14 V4.29 H42.86 Z M47.14,4.29 V8.57 H51.43 V4.29 H47.14 Z M51.43,4.29 V8.57 H55.71 V4.29 H51.43 Z M60,4.29 V8.57 H64.29 V4.29 H60 Z M85.71,4.29 V8.57 H90 V4.29 H85.71 Z M0,8.57 V12.86 H4.29 V8.57 H0 Z M8.57,8.57 V12.86 H12.86 V8.57 H8.57 Z M12.86,8.57 V12.86 H17.14 V8.57 H12.86 Z M17.14,8.57 V12.86 H21.43 V8.57 H17.14 Z M25.71,8.57 V12.86 H30 V8.57 H25.71 Z M38.57,8.57 V12.86 H42.86 V8.57 H38.57 Z M42.86,8.57 V12.86 H47.14 V8.57 H42.86 Z M47.14,8.57 V12.86 H51.43 V8.57 H47.14 Z M60,8.57 V12.86 H64.29 V8.57 H60 Z M68.57,8.57 V12.86 H72.86 V8.57 H68.57 Z M72.86,8.57 V12.86 H77.14 V8.57 H72.86 Z M77.14,8.57 V12.86 H81.43 V8.57 H77.14 Z M85.71,8.57 V12.86 H90 V8.57 H85.71 Z M0,12.86 V17.14 H4.29 V12.86 H0 Z M8.57,12.86 V17.14 H12.86 V12.86 H8.57 Z M12.86,12.86 V17.14 H17.14 V12.86 H12.86 Z M17.14,12.86 V17.14 H21.43 V12.86 H17.14 Z M25.71,12.86 V17.14 H30 V12.86 H25.71 Z M34.29,12.86 V17.14 H38.57 V12.86 H34.29 Z M38.57,12.86 V17.14 H42.86 V12.86 H38.57 Z M42.86,12.86 V17.14 H47.14 V12.86 H42.86 Z M51.43,12.86 V17.14 H55.71 V12.86 H51.43 Z M60,12.86 V17.14 H64.29 V12.86 H60 Z M68.57,12.86 V17.14 H72.86 V12.86 H68.57 Z M72.86,12.86 V17.14 H77.14 V12.86 H72.86 Z M77.14,12.86 V17.14 H81.43 V12.86 H77.14 Z M85.71,12.86 V17.14 H90 V12.86 H85.71 Z M0,17.14 V21.43 H4.29 V17.14 H0 Z M8.57,17.14 V21.43 H12.86 V17.14 H8.57 Z M12.86,17.14 V21.43 H17.14 V17.14 H12.86 Z M17.14,17.14 V21.43 H21.43 V17.14 H17.14 Z M25.71,17.14 V21.43 H30 V17.14 H25.71 Z M38.57,17.14 V21.43 H42.86 V17.14 H38.57 Z M47.14,17.14 V21.43 H51.43 V17.14 H47.14 Z M51.43,17.14 V21.43 H55.71 V17.14 H51.43 Z M60,17.14 V21.43 H64.29 V17.14 H60 Z M68.57,17.14 V21.43 H72.86 V17.14 H68.57 Z M72.86,17.14 V21.43 H77.14 V17.14 H72.86 Z M77.14,17.14 V21.43 H81.43 V17.14 H77.14 Z M85.71,17.14 V21.43 H90 V17.14 H85.71 Z M0,21.43 V25.71 H4.29 V21.43 H0 Z M25.71,21.43 V25.71 H30 V21.43 H25.71 Z M34.29,21.43 V25.71 H38.57 V21.43 H34.29 Z M38.57,21.43 V25.71 H42.86 V21.43 H38.57 Z M42.86,21.43 V25.71 H47.14 V21.43 H42.86 Z M60,21.43 V25.71 H64.29 V21.43 H60 Z M85.71,21.43 V25.71 H90 V21.43 H85.71 Z M0,25.71 V30 H4.29 V25.71 H0 Z M4.29,25.71 V30 H8.57 V25.71 H4.29 Z M8.57,25.71 V30 H12.86 V25.71 H8.57 Z M12.86,25.71 V30 H17.14 V25.71 H12.86 Z M17.14,25.71 V30 H21.43 V25.71 H17.14 Z M21.43,25.71 V30 H25.71 V25.71 H21.43 Z M25.71,25.71 V30 H30 V25.71 H25.71 Z M34.29,25.71 V30 H38.57 V25.71 H34.29 Z M42.86,25.71 V30 H47.14 V25.71 H42.86 Z M51.43,25.71 V30 H55.71 V25.71 H51.43 Z M60,25.71 V30 H64.29 V25.71 H60 Z M64.29,25.71 V30 H68.57 V25.71 H64.29 Z M68.57,25.71 V30 H72.86 V25.71 H68.57 Z M72.86,25.71 V30 H77.14 V25.71 H72.86 Z M77.14,25.71 V30 H81.43 V25.71 H77.14 Z M81.43,25.71 V30 H85.71 V25.71 H81.43 Z M85.71,25.71 V30 H90 V25.71 H85.71 Z M47.14,30 V34.29 H51.43 V30 H47.14 Z M21.43,34.29 V38.57 H25.71 V34.29 H21.43 Z M25.71,34.29 V38.57 H30 V34.29 H25.71 Z M34.29,34.29 V38.57 H38.57 V34.29 H34.29 Z M42.86,34.29 V38.57 H47.14 V34.29 H42.86 Z M47.14,34.29 V38.57 H51.43 V34.29 H47.14 Z M51.43,34.29 V38.57 H55.71 V34.29 H51.43 Z M55.71,34.29 V38.57 H60 V34.29 H55.71 Z M64.29,34.29 V38.57 H68.57 V34.29 H64.29 Z M72.86,34.29 V38.57 H77.14 V34.29 H72.86 Z M85.71,34.29 V38.57 H90 V34.29 H85.71 Z M0,38.57 V42.86 H4.29 V38.57 H0 Z M4.29,38.57 V42.86 H8.57 V38.57 H4.29 Z M12.86,38.57 V42.86 H17.14 V38.57 H12.86 Z M34.29,38.57 V42.86 H38.57 V38.57 H34.29 Z M47.14,38.57 V42.86 H51.43 V38.57 H47.14 Z M64.29,38.57 V42.86 H68.57 V38.57 H64.29 Z M68.57,38.57 V42.86 H72.86 V38.57 H68.57 Z M81.43,38.57 V42.86 H85.71 V38.57 H81.43 Z M85.71,38.57 V42.86 H90 V38.57 H85.71 Z M25.71,42.86 V47.14 H30 V42.86 H25.71 Z M34.29,42.86 V47.14 H38.57 V42.86 H34.29 Z M38.57,42.86 V47.14 H42.86 V42.86 H38.57 Z M55.71,42.86 V47.14 H60 V42.86 H55.71 Z M60,42.86 V47.14 H64.29 V42.86 H60 Z M68.57,42.86 V47.14 H72.86 V42.86 H68.57 Z M72.86,42.86 V47.14 H77.14 V42.86 H72.86 Z M77.14,42.86 V47.14 H81.43 V42.86 H77.14 Z M81.43,42.86 V47.14 H85.71 V42.86 H81.43 Z M85.71,42.86 V47.14 H90 V42.86 H85.71 Z M0,47.14 V51.43 H4.29 V47.14 H0 Z M4.29,47.14 V51.43 H8.57 V47.14 H4.29 Z M8.57,47.14 V51.43 H12.86 V47.14 H8.57 Z M17.14,47.14 V51.43 H21.43 V47.14 H17.14 Z M34.29,47.14 V51.43 H38.57 V47.14 H34.29 Z M38.57,47.14 V51.43 H42.86 V47.14 H38.57 Z M42.86,47.14 V51.43 H47.14 V47.14 H42.86 Z M51.43,47.14 V51.43 H55.71 V47.14 H51.43 Z M60,47.14 V51.43 H64.29 V47.14 H60 Z M77.14,47.14 V51.43 H81.43 V47.14 H77.14 Z M81.43,47.14 V51.43 H85.71 V47.14 H81.43 Z M0,51.43 V55.71 H4.29 V51.43 H0 Z M4.29,51.43 V55.71 H8.57 V51.43 H4.29 Z M8.57,51.43 V55.71 H12.86 V51.43 H8.57 Z M17.14,51.43 V55.71 H21.43 V51.43 H17.14 Z M25.71,51.43 V55.71 H30 V51.43 H25.71 Z M34.29,51.43 V55.71 H38.57 V51.43 H34.29 Z M47.14,51.43 V55.71 H51.43 V51.43 H47.14 Z M60,51.43 V55.71 H64.29 V51.43 H60 Z M68.57,51.43 V55.71 H72.86 V51.43 H68.57 Z M81.43,51.43 V55.71 H85.71 V51.43 H81.43 Z M34.29,55.71 V60 H38.57 V55.71 H34.29 Z M42.86,55.71 V60 H47.14 V55.71 H42.86 Z M47.14,55.71 V60 H51.43 V55.71 H47.14 Z M51.43,55.71 V60 H55.71 V55.71 H51.43 Z M64.29,55.71 V60 H68.57 V55.71 H64.29 Z M72.86,55.71 V60 H77.14 V55.71 H72.86 Z M0,60 V64.29 H4.29 V60 H0 Z M4.29,60 V64.29 H8.57 V60 H4.29 Z M8.57,60 V64.29 H12.86 V60 H8.57 Z M12.86,60 V64.29 H17.14 V60 H12.86 Z M17.14,60 V64.29 H21.43 V60 H17.14 Z M21.43,60 V64.29 H25.71 V60 H21.43 Z M25.71,60 V64.29 H30 V60 H25.71 Z M42.86,60 V64.29 H47.14 V60 H42.86 Z M47.14,60 V64.29 H51.43 V60 H47.14 Z M72.86,60 V64.29 H77.14 V60 H72.86 Z M77.14,60 V64.29 H81.43 V60 H77.14 Z M0,64.29 V68.57 H4.29 V64.29 H0 Z M25.71,64.29 V68.57 H30 V64.29 H25.71 Z M34.29,64.29 V68.57 H38.57 V64.29 H34.29 Z M64.29,64.29 V68.57 H68.57 V64.29 H64.29 Z M81.43,64.29 V68.57 H85.71 V64.29 H81.43 Z M0,68.57 V72.86 H4.29 V68.57 H0 Z M8.57,68.57 V72.86 H12.86 V68.57 H8.57 Z M12.86,68.57 V72.86 H17.14 V68.57 H12.86 Z M17.14,68.57 V72.86 H21.43 V68.57 H17.14 Z M25.71,68.57 V72.86 H30 V68.57 H25.71 Z M38.57,68.57 V72.86 H42.86 V68.57 H38.57 Z M51.43,68.57 V72.86 H55.71 V68.57 H51.43 Z M60,68.57 V72.86 H64.29 V68.57 H60 Z M72.86,68.57 V72.86 H77.14 V68.57 H72.86 Z M77.14,68.57 V72.86 H81.43 V68.57 H77.14 Z M81.43,68.57 V72.86 H85.71 V68.57 H81.43 Z M85.71,68.57 V72.86 H90 V68.57 H85.71 Z M0,72.86 V77.14 H4.29 V72.86 H0 Z M8.57,72.86 V77.14 H12.86 V72.86 H8.57 Z M12.86,72.86 V77.14 H17.14 V72.86 H12.86 Z M17.14,72.86 V77.14 H21.43 V72.86 H17.14 Z M25.71,72.86 V77.14 H30 V72.86 H25.71 Z M38.57,72.86 V77.14 H42.86 V72.86 H38.57 Z M42.86,72.86 V77.14 H47.14 V72.86 H42.86 Z M51.43,72.86 V77.14 H55.71 V72.86 H51.43 Z M55.71,72.86 V77.14 H60 V72.86 H55.71 Z M60,72.86 V77.14 H64.29 V72.86 H60 Z M64.29,72.86 V77.14 H68.57 V72.86 H64.29 Z M68.57,72.86 V77.14 H72.86 V72.86 H68.57 Z M81.43,72.86 V77.14 H85.71 V72.86 H81.43 Z M0,77.14 V81.43 H4.29 V77.14 H0 Z M8.57,77.14 V81.43 H12.86 V77.14 H8.57 Z M12.86,77.14 V81.43 H17.14 V77.14 H12.86 Z M17.14,77.14 V81.43 H21.43 V77.14 H17.14 Z M25.71,77.14 V81.43 H30 V77.14 H25.71 Z M42.86,77.14 V81.43 H47.14 V77.14 H42.86 Z M60,77.14 V81.43 H64.29 V77.14 H60 Z M77.14,77.14 V81.43 H81.43 V77.14 H77.14 Z M0,81.43 V85.71 H4.29 V81.43 H0 Z M25.71,81.43 V85.71 H30 V81.43 H25.71 Z M42.86,81.43 V85.71 H47.14 V81.43 H42.86 Z M47.14,81.43 V85.71 H51.43 V81.43 H47.14 Z M51.43,81.43 V85.71 H55.71 V81.43 H51.43 Z M55.71,81.43 V85.71 H60 V81.43 H55.71 Z M60,81.43 V85.71 H64.29 V81.43 H60 Z M64.29,81.43 V85.71 H68.57 V81.43 H64.29 Z M68.57,81.43 V85.71 H72.86 V81.43 H68.57 Z M72.86,81.43 V85.71 H77.14 V81.43 H72.86 Z M85.71,81.43 V85.71 H90 V81.43 H85.71 Z M0,85.71 V90 H4.29 V85.71 H0 Z M4.29,85.71 V90 H8.57 V85.71 H4.29 Z M8.57,85.71 V90 H12.86 V85.71 H8.57 Z M12.86,85.71 V90 H17.14 V85.71 H12.86 Z M17.14,85.71 V90 H21.43 V85.71 H17.14 Z M21.43,85.71 V90 H25.71 V85.71 H21.43 Z M25.71,85.71 V90 H30 V85.71 H25.71 Z M38.57,85.71 V90 H42.86 V85.71 H38.57 Z M42.86,85.71 V90 H47.14 V85.71 H42.86 Z M47.14,85.71 V90 H51.43 V85.71 H47.14 Z M51.43,85.71 V90 H55.71 V85.71 H51.43 Z M64.29,85.71 V90 H68.57 V85.71 H64.29 Z M72.86,85.71 V90 H77.14 V85.71 H72.86 Z M77.14,85.71 V90 H81.43 V85.71 H77.14 Z " /></svg><br>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class='display' id='break_page1' style='break-after:page'>
</div>
</div >
</body>
</html>


張貼者： 於 沒有留言:
標籤： , , , ,

2023年7月5日 星期三

V120202B - 標籤列印 - HTML online 模擬標籤排版 -table

 目的: V120202B - 標籤列印 - HTML online 模擬標籤排版 - <table>

處理說明: 0>[列印範圍]先以框線標出
                  1>利用 HTML online模擬器, 模擬標簽文字內容
                       HTML online : https://www.tutorialspoint.com/online_html_editor.php
                       --> 直接修改即可看到 HTML排版結果,不需等 VS 執行後,才看到排版結果
                  2>以 <div><table> 的邊線畫出範圍
                  3>以  style 設定範圍/邊框/顏色, 
                       style='width: 10cm; height: 4cm;border: 5px solid green; '
                  4><table>邊框個別設定,邊際實線 以 cellspacing=0 , border=2px , bordercolor='blue'
                  5>縮小元件size <tr style='transform: scale(0.9);' ></tr>



     


1>*.html
<!DOCTYPE html>
<html>
<title>Online HTML Editor</title>
<head>
</head>
<body>
<div id='print_area' style='width: 10cm; height: 4cm; border: 5px solid green;'>
<div id='my_div' style='width: 10cm; height: 4cm;border: 3px solid yellow; font-size: 4pt;'>
<table id='my_tbl1' style='width: 10cm;' border=2px cellspacing=0 borderstyle='solid' bordercolor='blue'>
<tr>
<td width=30%>機號: A049 </td>
<td width=35%>工號: 12345678 </td>
<td width=35%>工單件號: SROPN_1 </td>
</tr>
</table>
<table id='my_tbl2' style='width:10cm;' border=2px cellspacing=0 borderstyle='solid' bordercolor='red'>
<tr style='height: 0.3cm;'>
<td width=50%>申請件號:LAMAERO-73428-0001</td>
<td width=50%>申請件號:LAMAERO-73428-0001</td>
</tr>
<tr>
<td width=50% style='height:0.4cm'></td>
<td width=50%></td>
</tr>
<tr>
<td width=50%>名稱:TFE DRY LUBE</td>
<td width=50%>儲位2:防C</td>
</tr>
<tr>
<td width=50%>儲位1:防B</td>
<td width=50%>庫房:23#</td>
</tr>
<tr>
<td width=50%>撥料數量:4</td>
<td width=50%></td>
</tr>
</table>
<table id='my_tbl3' style='width:10cm' border=2px cellspacing=0 borderstyle='solid' bordercolor='blue'>
<tr>
<td width=50%></td>
<td width=50%>需求者:612578 楊智為 856
<br>需求地點:A08</td>
</tr>
</div>
</div>
</body>
</html>

張貼者： 於 沒有留言:
標籤： , , ,

2023年4月10日 星期一

V80204B -將前端 Array/table/Object 欄位值,傳送至後端處理 -JSON – 將目前 checkboxgroup欄位值(Array),傳送至後端,並處理

 目的: V80204B – 將目前 checkboxgroup欄位值(Array),傳送至後端,並處理

處理說明: 1>若非基本型態(string/int/)的欄位值(Array/table/Object),要傳至後端, 
                       均需先轉成 JSON string型態 ,才可當成np的參數值,傳送至後端
                        *.js                         
                        var Tmp_JSONStr = JSON.stringify(Ext.getCmp('chkboxgrp2').getValue()["rb"]);
                        np["ASN_ARY_JSONStr"]=Tmp_JSONStr;

                  2> 後端接收時,必需先將 JSON string 型態, 再還回原型態(Array/table/Object)
                        *.cs
                        string Tmp_ASN_ARY_JSONStr = nvc["ASN_ARY_JSONStr"];  
                        JArray Tmp_ASN_ARY =      
                     (JArray)JsonConvert.DeserializeObject(Tmp_ASN_ARY_JSONStr, (typeof(JArray)));  


1>*.js
var selectedValues = Ext.getCmp('chkboxgrp2').items;
console.log(selectedValues);
var Tmp_ASNAry = []; //var Tmp_Obj={};
//chkboxgrp2 均設為 true
for (var i = 0; i < selectedValues.length; i++) {
    selectedValues.items[i].setValue(true);
};
var np = {};
//取得 chkboxgrp2 的勾選欄位值
//將 Array 轉成 JSON字串, 以便傳至後端
    var Tmp_JSONStr = JSON.stringify(Ext.getCmp('chkboxgrp2').getValue()["rb"]);
    np["ASN_ARY_JSONStr"]=Tmp_JSONStr;
    console.log("np['ASN_ARY_JSONStr']: ", np["ASN_ARY_JSONStr"]);

2>*.cs    
  string Tmp_ASN_ARY_JSONStr = nvc["ASN_ARY_JSONStr"]; 
  JArray Tmp_ASN_ARY = (JArray)JsonConvert.DeserializeObject(Tmp_ASN_ARY_JSONStr, (typeof(JArray)));
 string Tmp_ASN_ARY_STR = string.Join(",", Tmp_ASN_ARY);
// "A012,B025" -->  'A012','B025'
 Tmp_ASN_ARY_STR = myfunc.AddQuoteStr(Tmp_ASN_ARY_STR); 








PS:
       1>將checkboxgroup2 的項目均設為 勾選(checked)
                 {
                    xtype: 'checkboxgroup',
                    id: 'chkboxgrp1',            // columns: 3,
                    columns: [.35, .35, .35],
                    items: [
                               { boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
                               { boxLabel: 'Item 2', name: 'rb', inputValue: '2' },
                               { boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
                             ]
                  },



}, //end of 待挑選機號

                  2>將checkboxgroup2的項目傳送至後端處理                       



張貼者： 於 沒有留言:
標籤： , , ,

2023年2月7日 星期二

V120202B : css - div margin border 的用法 - table cellsapcing - cellpadding border 的用法

 目的: V120202B css - div  margin  border 的用法   - table   cellsapcing - cellpadding border 的用法

           HTML online : https://www.tutorialspoint.com/online_html_editor.php

處理說明: 1> 設定標籤的長寬 & 標籤的列印位置往右移 & 設定邊線寬度
                       <div id='print_area' style='width:10cm;height:4cm;margin:0px 0px 0px 20px;
                         border:5px solid green;'>

                  2>設定  table 的 邊線間距(cellspacing) , 邊框2文字間距(cellpadding=0)
<table id='my_tbl1' style='width:100%; margin:0px 0px 0px 10px;' border=1px borderstyle='solid' bordercolor='blue' cellspacing=0 cellpadding=0>
 
                 3> 畫 <table> 的 row底線
<td width=35% style='border-bottom:1px solid black;'>機號:"+Tmp_ASN+"</td>
<td width=35% style='border-bottom:1px solid black;' >工號: "+Tmp_SAPNO+"</td>

                         

1>範例1 : <div> marin padding


*.html
<div id='print_area' style='width:10cm;height:4cm;border:5px solid green;
margin:0px 0px 0px 20px;padding:0px 0px 0px 10px;'>
<div id='my_div_1' style='width: 9.8cm; height: 3.5cm;border: 1px solid brown;font-size:0.5pt;'>
<table id='my_tbl1' style='width:100%; margin:0px 0px 0px 10px;' border=1px borderstyle='solid' bordercolor='blue' cellspacing=0>
<tr>
<td width=35%>機號: A049 </td>
<td width=35% '>工號: 12345678</td>
<td width=35% '>工單件號: SROPN_1 </td>
</tr>
</table>


2>範例2 : <table> margin cellspacing cellpadding
*.html
<table id='my_tbl1' style='width:100%;margin:0px 0px 0px 10px;' cellpadding=6 border=1px borderstyle='solid' bordercolor='blue' cellspacing=2>

<tr>
<td width=35%>機號: A049 </td>
<td width=35% '>工號: 12345678</td>
<td width=35% '>工單件號: SROPN_1 </td>
</tr>
</table>


3>畫 <table> 的 row底線


<div id='print_area' style='width:10cm;height:4cm;border:5px solid green; margin:2px 5px 1px 15px;'>
<div id='my_div_1' style='width: 9.8cm; height: 3.5cm;border: 1px solid yellow;font-size:4pt; margin:2px 5px 1px 15px; '>
<table id='my_tbl1' style='width:100%;padding:0 0 0 10;' border=0px borderstyle='solid' bordercolor='blue' cellspacing=0>
<tr style="border-bottom:1px solid blue">
<td width=35% style='border-bottom:1px solid black;'>機號: A049 </td>
<td width=35% style='border-bottom:1px solid black;'>工號: 12345678</td>
<td width=35% style='border-bottom:1px solid black;'>工單件號: SROPN_1 </td>
</tr> </table>






Sample:


Source:   
測試網址 : https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: lightgrey;
  width: 300px;
  height: 200px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p>

<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>
</html>





張貼者： 於 沒有留言:
標籤： , , ,

2022年11月3日 星期四

V120502A - Table 的邊框設定 - 放大縮小設定 - 預覽列印設定

 目的: Table 的邊框設定 - 利用 border=1 和  style=' border:1 red solid;' 的差異

處理說明:  1>Cell無邊框
                         <table style = 'border: 1px solid blue; ' id = 'my_tbl' >
                            style設定的border只有針對目前的邊框做設定
                            並不會針對 table.cell設定邊框

                   2>Cell 有邊框
<table id = 'my_tbl' border=2px borderstyle='solid' bordercolor='#0000ff' width=100% height=100% >
                             table 的border設定, 也針對 cell 的邊框




1>*.js

var pub_print_area_Str = "<div  id='print_area'   style = 'border: 1px solid red;' width=100%  height=100% >"
    + "<table id = 'my_tbl'  style = 'border: 1px solid blue; '  > "
    //+ "<table  id = 'my_tbl'  border=2px  borderstyle='solid'   bordercolor='#0000ff'  width=100% height=100% > "
    + "<tr  id='my_tr1'><th>件號<br>(PART NO)</th><td>R=8-84-766-21-1</td></tr>"
    + "<tr  id='my_tr2'><th>EO號碼<br>(EONO)</th><td>GM1381+A15</td></tr>"
    + "<tr  id='my_tr3'><th>日期<br>(EONO)</th><td>2022/11/03</td></tr>"
    + "<tr  id='my_tr4'><th>數量<br>(EONO)</th><td>2</td></tr>"
    + "<tr  id='my_tr5'><th>工令單號<br>(SOR NO)</th><td>23169622</td></tr>"
    + "<tr  id='my_tr6'><th>品保<br>(QC)</th><td></td></tr>"
    + "<tr  id='my_tr6'><th>備註<br>(REMARK)</th><td>A052</td></tr>"
    + "</table>"
    + "</div>";


    var Tmp_sub_panel1 = $('#sub_panel1');
    Tmp_sub_panel1.append(pub_print_area_Str);
    

3>Table 邊框的設定


3.1>>*.js

var pub_print_area_Str = "<div  id='print_area'   class='break' style='width: 10cm; height: 6cm;border: 5px solid green;transform: scale(1);'>"
    + "<table  id = 'my_tbl' style='line-height: 14px; font-size: 12px;border-collapse:collapse;' border=1px  borderstyle='solid'   bordercolor='blue'  width=100% height=100% > "
    + "<tr ><th width=20% style='transform: scale(1);'>件號1<br>(PART NO)</th><td width=80%>R=8-84-766-21-1</td></tr>"
    + "<tr  ><th width=20% style='transform: scale(0.75);'>EO號碼<br>(EONO)</th><td width=80%>GM1381+A15</td></tr>"
    + "<tr  ><th width=20% style='transform: scale(0.75);'>日期<br>(DATE)</th><td width=80%>2022/11/03</td></tr>"
    + "<tr ><th width=20% style='transform: scale(0.75);'>數量<br>(QTY)</th><td width=80%>2</td></tr>"
    + "<tr  ><th width=20% style='transform: scale(0.75);'>工令單號<br>(SOR NO)</th><td width=80%>23169622</td></tr>"
    + "<tr  ><th width=20% style='transform: scale(0.75);'>品保<br>(QC)</th><td width=80%></td></tr>"
    + "<tr  ><th width=20% style='transform: scale(0.75);'>備註<br>(REMARK)</th><td width=80%>A052</td></tr>"
    + "</table>"
    + "</div>";






張貼者： 於 沒有留言:
標籤： , , , ,
訂閱： 文章 (Atom)