Print Html Table with Image using Javascript
รายงานสินค้า
| ยี่ห้อ | สี | รูปภาพ |
|---|---|---|
| Adidas | ขาว เทา |  |
| Umbro | น้ำเงิน ขาว เทา |  |
| Nike | ขาว ชมพู ส้ม เขียว |  |
➤ CSS (Cascading Style Sheets)
<style>
table
{
width: auto;
font: 17px Calibri;
}
table, th, td
{
border: solid 1px #DDD;
border-collapse: collapse;
padding: 2px 3px;
text-align: center;
}
img
{
width: 50%;
}
</style>
➤ HTML Code
<div>
<h2>รายงานสินค้า</h2>
<table id="tablePrint">
<tr>
<th>ยี่ห้อ</th>
<th>สี</th>
<th>รูปภาพ</th>
</tr>
<tr>
<td>Adidas</td>
<td>ขาว เทา</td>
<td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiotjoso5DxmN9AhnTXX3QNjt79TCwei2fmToJKAl7c3Y2zyauFmj8T9kptj2_nUNU73GMvqH0pRea5qGIEY3LBJuhiZfa_-jd38G4IPbIFlwxkyQ_1v1UVIuR7dAcjy1kT4eqQoq10vkEW/s320/Adidas-Phosphere_White_1.png" /></td>
</tr>
<tr>
<td>Umbro</td>
<td>น้ำเงิน ขาว เทา</td>
<td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit-fsNTdQMBEQO6gPvlZyMmbILADxb-iQiGFQWrVhyVdr8QBoYa-3ixq4eB1oBh2nt9u_muEroM4UM5YDVUF-HMSAZNBzoB7peQJVGLPwrshn0jqxO0lmd3j1FJmCU4CfR5KiIXQlhf7S_/s320/footsall_umbro_blue.png" /></td>
</tr>
<tr>
<td>Nike</td>
<td>ขาว ชมพู ส้ม เขียว</td>
<td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuoj4Ohrq39CGTTut69yeGecAUq2OEwStCqSohRaqqMnWANBmL7WWfMzaaddXbChd0z1UGuspWgrsgWegxlXQt-q6A7jBSYGS_GLO77f4-LqOHAtB8au6Bb3jrAXkanM3dzrbnMfAkvH3M/s320/nike_renew_run_white.png" /></td>
</tr>
</table>
</div>
<p>
<input type="button" value="กดพิมพ์รายงาน" onclick="myApp.printTable()" />
</p>
➤ Javascript Code
<script>
var myApp = new function () {
this.printTable = function () {
var tab = document.getElementById('tablePrint');
var win = window.open('', '', 'height=700,width=700');
win.document.write(tab.outerHTML);
win.document.close();
win.print();
}
}
</script>
ความคิดเห็น
แสดงความคิดเห็น