11-Apr-2023
.
Admin
-0.png)
Hi Guys
In this tutorial, I will example you how to jquery table2 excel in convert. I am going to share an awesome plug-in for exporting the HTML table data to the excel sheet by a click of a button.
The table contains the <th> tags that define the headings for the table of HTML. The same headers act as the headings in the excel sheet after export. A few options may also be set like tab name in the excel sheet, the file name of excel etc in the jQuery code that I will explain after the demo.
Bellow The Script Used In The Demo:
<script>
$(function() {
$("button").click(function(){
$("#table2excel").table2excel({
exclude: ".noExl",
name: "Excel Document Name"
});
});
});
</script>
Here this example,the excel export file will download as the demo page loads.
Full Example
<!DOCTYPE html>
<html>
<head>
<title>JQuery Table2 Excel Example</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Export-Html-Table-To-Excel-Spreadsheet-using-jQuery-table2excel/src/jquery.table2excel.js"></script>
</head>
<style type="text/css">
body{
background-color: #211c12;
}
.container{
margin-top:80px;
}
h1{
margin-bottom:20px;
}
table,table th{
text-align: center;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="text-center">JQuery Table2 Excel Example</h1>
<table class="table table-bordered" id="table2excel">
<thead>
<tr style="background-color: #fff">
<th>#</th>
<th>Product Name</th>
<th>Product Price</th>
<th>Product Qut.</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>1</td>
<td>Product 1</td>
<td>200</td>
<td>2</td>
</tr>
<tr style="background-color: #fff">
<td>2</td>
<td>Product 2</td>
<td>220</td>
<td>5</td>
</tr>
<tr class="success">
<td>3</td>
<td>Product 3</td>
<td>300</td>
<td>4</td>
</tr>
<tr style="background-color: #fff">
<td>4</td>
<td>Product 4</td>
<td>500</td>
<td>2</td>
</tr>
<tr class="info">
<td>5</td>
<td>Product 5</td>
<td>550</td>
<td>8</td>
</tr>
</tbody>
</table>
<button class="btn btn-success">Export</button></div>
</div>
</div>
</div>
<script>
$(function() {
$("button").click(function(){
$("#table2excel").table2excel({
exclude: ".xls",
name: "Excel Document Name"
});
});
});
</script>
</body>
</html>
It will help you...
#Jquery
#Html
#Css
