sondmk header
เรียนรู้การเขียน JavaScript เบื้องต้น

Javascript :: Print Page With Out Button (ใช้ Css แทน) , Print โดยไม่เอา Button

Post by Goborijung at 2019-12-16 15:20:13 | ID: 327

<!DOCTYPE html>
<html>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    @media print {
    #printPageButton {
    display: none;
    }
    }
  </style>
  <body>
    <button class='btn btn-sm btn-primary' id="printPageButton" onClick="window.print();"><i class='fa fa-print'></i> Print Now</button>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Doe</td>
          <td>john@example.com</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Javascript :: Print Page WithOut Button

Post by Goborijung at 2019-12-16 15:11:59 | ID: 326

<!DOCTYPE html>
<html>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <body>
    <button class='btn btn-sm btn-primary' id="printpagebutton" type="button" onclick="printpage()"/><i class='fa fa-print'></i> Print Now</button>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Doe</td>
          <td>john@example.com</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
      </tbody>
    </table>
    <script>
      function printpage() {
              //Get the print button and put it into a variable
              var printButton = document.getElementById("printpagebutton");
              //Set the print button visibility to 'hidden' 
              printButton.style.visibility = 'hidden';
              //Print the page content
              window.print()
              printButton.style.visibility = 'visible';
          }
    </script>
  </body>
</html>
Javascript :: SET Value ById

Post by Goborijung at 2019-06-07 09:54:51 | ID: 88

document.getElementById("idname").value = "value_name";
Javascript :: Swap Image

Post by Goborijung at 2018-12-24 14:43:49 | ID: 56

<a href="filename.html">
<img src="img1.jpg" onmouseover="this.src='img1.jpg'" onmouseout="this.src='img2.jpg'">
</a>
Js : Export Table to Excel

Post by Goborijung at 2022-02-07 16:46:06 | ID: 1369

// HTML

<button class="btn btn-sm btn-success" type="button" name="export" onclick="exceller()"><i class="fa fa-file-excel"></i> Export</button>

<div id="toExcel">Table</div>

---------------------


// JS : วางไว้ก่อน page footer

<script>
  function exceller() {
    var filename = "CuttingView.xls";
    var uri = 'data:application/vnd.ms-excel;base64,',
      template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
      base64 = function(s) {
        return window.btoa(unescape(encodeURIComponent(s)))
      },
      format = function(s, c) {
        return s.replace(/{(w+)}/g, function(m, p) {
          return c[p];
        })
      }
    
    var toExcel = document.getElementById("toExcel").innerHTML;
    var ctx = {
      worksheet: name || '',
      table: toExcel
    };

    var link = document.createElement("a");
    link.download = filename;
    link.href = uri + base64(format(template, ctx))
    link.click();
  }
</script>
JS : Keypress

Post by Goborijung at 2022-07-09 11:03:00 | ID: 1688

-- On Keypress


<input type="text" onkeypress="myFunction()">
<script>
function myFunction() {
  alert("You pressed a key inside the input field");
}
</script>

--------------------------------------------------------------------------


-- On Keypress In HTML


<input type="text" id="demo" onkeypress="myFunction()">

<script>
function myFunction() {
  document.getElementById("demo").style.backgroundColor = "red";
}
</script>

--------------------------------------------------------------------------


-- On Keypress In Javascript


<input type="text" id="demo">

<script>
document.getElementById("demo").onkeypress = function() {myFunction()};

function myFunction() {
  document.getElementById("demo").style.backgroundColor = "red";
}
</script>

--------------------------------------------------------------------------


-- On Keypress In Javascript using the addEventListener()


<input type="text" id="demo">

<script>
document.getElementById("demo").addEventListener("keypress", myFunction);

function myFunction() {
  document.getElementById("demo").style.backgroundColor = "red";
}
</script>
Js : > ESC to Close Page

Post by Goborijung at 2021-07-08 07:52:13 | ID: 1276

// Normaly Javascript :: Recommend

window.onkeydown = function( event ) {
    if ( event.keyCode == 27 ) {
        console.log( 'escape pressed' );
        window.close();
    }
};

OR


// jQuery

$(document).keydown(function(e) {
    // ESCAPE key pressed
    if (e.keyCode == 27) {
        window.close();
    }
});
JS : Ctrl + Enter Submit

Post by Goborijung at 2020-08-03 09:26:13 | ID: 695

<form action="" method="post">
	<input name="cmd" id="cmd" placeholder="Input SQL Statement" value="<?=@$cmd?>">
	<button style="display: none;" class="btn btn-sm btn-success" name="submit" id="submit"><i class="fa Search"></i> Search</button>
</form>

<script>
	window.onload = function ()
	{
		document.getElementById("cmd").onkeydown = function (e)
		{
			if (e.keyCode == 13 && e.ctrlKey)
			{ 
				document.getElementById("submit").click(); // submit the form by hitting ctrl + enter
				document.getElementById("cmd").foucus();
				return false;
			}
		}
	}
</script>
JS : Enter to Tab Event (Enter to Next ID)

Post by Goborijung at 2020-06-25 11:01:22 | ID: 635

<body>
  <input type="text" name='name' id='01'onkeypress="test('02')">
  <input type="text" name='name' id="02" onkeypress="test('03')">
  <input type="text" name='name' id="03" onkeypress="test('01')">
</body>

<script>
  function test(nexId)
   {
     if(window.event && window.event.keyCode == 13)
       {
         //alert(555);
         document.getElementById(nexId).focus();
       }
   }
</script>
JS : Export to Excel V1(.xlsx)

Post by Goborijung at 2023-06-16 17:59:26 | ID: 1928

<script src="https://cdn.jsdelivr.net/gh/linways/table-to-excel@v1.0.4/dist/tableToExcel.js"></script>

<button id="btnExport" onclick="exportReportToExcel(this)">EXPORT REPORT</button>

<script>
function exportReportToExcel() {
  let table = document.getElementsByTagName("table"); // you can use document.getElementById('tableId') as well by providing id to the table tag
  TableToExcel.convert(table[0], { // html code may contain multiple tables so here we are refering to 1st table tag
    name: 'Export.xlsx', // fileName you could use any name
    sheet: {
      name: 'Sheet 1' // sheetName
    }
  });
}
</script>
<<<12345>>>
Programming

Framework

Library

Lernnings

เครื่องมือพัฒนาเว็บ

Computer Network

Computer Security

การออกแบบและพัฒนาเว็บไซต์

Download Tools

Download SourceCode

Operating System

Webs Hacking

copyAllright © 2016 soundmk.com