HTML – Sibeesh Passion https://sibeeshpassion.com My passion towards life Tue, 27 Feb 2018 06:07:32 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 /wp-content/uploads/2017/04/Sibeesh_Passion_Logo_Small.png HTML – Sibeesh Passion https://sibeeshpassion.com 32 32 Create Tooltip Without Any Plugins https://sibeeshpassion.com/create-tooltip-without-any-plugins/ https://sibeeshpassion.com/create-tooltip-without-any-plugins/#disqus_thread Tue, 29 Sep 2015 00:33:50 +0000 http://sibeecst_passion.com/?p=10708 In this post we will discuss how we can create a tool tip by using JQuery.Here we are not going to use any plugins to create the tool tip. We will use only jquery and html table for this demo. I hope you will like this.

Background

Recently I was going through a situation to create a tool tip for my grid. As we all know there are plenty of plugins are available for the tool tip generation. But I was not ready to go with any plugins for this. So I thought of creating it manually. You might be think this could be done by adding the title attribute to the elements directly, but I had a different situation. I was using a third tool, in which I was forced to include an additional js file, I was not ready to do that. Adding any unwanted js file to your project is a bad habit. So I thought of creating tool tip in the custom way.

Using the code

First of all we will create a page and a html table.

[html]
<!DOCTYPE html>
<html>
<head>
<title>Create Tooltip Without Any Plugins</title>
<script src="jquery-2.0.2.min.js"></script>
</head>
<body>
<table class="table" border="1" style="width: 100%">
<tr>
<td>Sibi</td>
<td>Ajay</td>
<td>50</td>
</tr>
<tr>
<td>Ansu</td>
<td>Akhil</td>
<td>94</td>
</tr>
<tr>
<td>Shanto</td>
<td>Libin</td>
<td>80</td>
</tr>
</table>
</body>
</html>

[/html]

Now if you run your page and, you can see the table.

Create Tooltip Without Any Plugins

Create Tooltip Without Any Plugins

No we will add our script to the page.

[js]
<script>
$(document).on(‘mouseover’, ‘.table td’, function () {
$(this).attr(‘title’, $(this).text());
});
</script>
[/js]

Here what we are doing is, we are just appending the title attribute for the td element in the mouseover event. Now run your page, and see our tool tip works perfectly.

Create Tooltip Without Any Plugins

Create Tooltip Without Any Plugins

We have done it finally.

Complete Code

[html]
<!DOCTYPE html>
<html>
<head>
<title>Create Tooltip Without Any Plugins</title>
<script src="jquery-2.0.2.min.js"></script>
<script>
$(document).on(‘mouseover’, ‘.table td’, function () {
$(this).attr(‘title’, $(this).text());
});
</script>
</head>
<body>
<table class="table" border="1" style="width: 100%">
<tr>
<td>Sibi</td>
<td>Ajay</td>
<td>50</td>
</tr>
<tr>
<td>Ansu</td>
<td>Akhil</td>
<td>94</td>
</tr>
<tr>
<td>Shanto</td>
<td>Libin</td>
<td>80</td>
</tr>
</table>
</body>
</html>

[/html]

Conclusion

Did I miss anything that you may think which is needed?Have you ever faced this issue in your programming life? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I am able to.

Kindest Regards
Sibeesh Venu

]]> https://sibeeshpassion.com/create-tooltip-without-any-plugins/feed/ 4 Check for any unsaved changes in page https://sibeeshpassion.com/check-for-any-unsaved-changes-in-page/ https://sibeeshpassion.com/check-for-any-unsaved-changes-in-page/#disqus_thread Tue, 29 Sep 2015 00:04:14 +0000 http://sibeecst_passion.com/?p=10714 In this post we will discuss how we can check for any unsaved changes in the page by using JQuery. Normally this may need to be implemented in an application where we need to give any alert if any user try to reload the page when there any unsaved changes in the page. I hope you will like this.

Background

I was creating a page where I have some text boxes, So I wanted to give an alert if user try to get away from the page with out saving the data entered.

Using the code

First of all we will create a page and a html table.

[html]
<!DOCTYPE html>
<html>
<head>
<title>Check for any unsaved changes in page</title>
<script src="jquery-2.0.2.min.js"></script>
</head>
<body>
<table class="table" border="1" style="width: 40%">
<tr>
<td>Sibi</td>
<td>Ajay</td>
<td><input class="text" type="text" /></td>
</tr>
<tr>
<td>Ansu</td>
<td>Akhil</td>
<td><input class="text" type="text" /></td>
</tr>
<tr>
<td>Shanto</td>
<td>Libin</td>
<td><input class="text" type="text" /></td>
</tr>
</table>
</body>
</html>

[/html]

Now if you run your page and, you can see the table.

Check for any unsaved changes in page

Check for any unsaved changes in page

No we will create a bool variable which will be true when there is an unsaved data.

[js]
var unsaved = false;
[/js]

What next? We will add call to an existing function when user reloads the page. Sounds good?

[js]
window.onbeforeunload = unloadPage;
[/js]

As you can see we are calling a function unloadPage, preceding is the function definition.

[js]
function unloadPage() {
if (unsaved) {
return "You have unsaved changes on this page.";
}
}
[/js]

Now please run your page and type anything in the text box given, then reload your page.
You will get an alert of You have unsaved changes on this page.. Shall we check that?

Check for any unsaved changes in page

Check for any unsaved changes in page

We have done it finally.

Complete Code

[html]
<!DOCTYPE html>
<html>
<head>
<title>Check for any unsaved changes in page</title>
<script src="jquery-2.0.2.min.js"></script>
<script>
var unsaved = false;
$(document).on(‘change’, ‘.table .text’, function () {
unsaved = true;
});

$(document).on(‘mouseover’, ‘.table td’, function () {
$(this).attr(‘title’, $(this).text());
});
function unloadPage() {
if (unsaved) {
return "You have unsaved changes on this page.";
}
}
window.onbeforeunload = unloadPage;
</script>
</head>
<body>
<table class="table" border="1" style="width: 40%">
<tr>
<td>Sibi</td>
<td>Ajay</td>
<td>
<input class="text" type="text" /></td>
</tr>
<tr>
<td>Ansu</td>
<td>Akhil</td>
<td>
<input class="text" type="text" /></td>
</tr>
<tr>
<td>Shanto</td>
<td>Libin</td>
<td>
<input class="text" type="text" /></td>
</tr>
</table>
</body>
</html>

[/html]

Conclusion

Did I miss anything that you may think which is needed? Have you ever faced this requirement in your programming life? Does this article helps you in anyway? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can. Have a happy coding!.

Kindest Regards
Sibeesh Venu

]]> https://sibeeshpassion.com/check-for-any-unsaved-changes-in-page/feed/ 0 Client Side Chart Widget in HTML 5: Part 3 (Line Chart) https://sibeeshpassion.com/client-side-chart-widget-in-html-5-part-3-line-chart/ https://sibeeshpassion.com/client-side-chart-widget-in-html-5-part-3-line-chart/#disqus_thread Fri, 29 May 2015 19:51:17 +0000 https://sibeeshpassion.com/?p=1061 Introduction

I hope you have read my first two articles in this series that explains about loading a Bar chart and Pie chart. If you have not read them then please see the following links.

Now we will explain a client-side line chart widget in HTML5.

Background

Please download the necessary files here.

Using the code

A simple HTML

  1. <!DOCTYPE html>
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>
  3. <head>
  4.     <title>Line Chart Using Chart.js</title>
  5. </head>
  6. <body></body>
  7. </html>

Included JavaScript file

  1. <script src=“Chart.js”></script>

Call the Chart Function

  1. window.onload = function () {
  2.         var canvasObject = document.getElementById(“myChart”).getContext(“2d”);
  3.         window.myLine = new Chart(canvasObject).Line(lineChartData, {
  4.             responsive: true
  5.         });
  6.     }

Here we are loading the chart into myChart.

As you can see in the preceding code, lineChartData is the data we will load into the chart.

  1. var lineChartData = {
  2.         labels: [“Monday”, “Tuesday”, “Wednesday”, “Thursday”, “Friday”, “Saturday”, “Sunday”],
  3.         datasets: [
  4.                 {
  5.                     label: “My First dataset”,
  6.                     fillColor: “rgba(220,220,220,0.2)”,
  7.                     strokeColor: “rgba(220,220,220,1)”,
  8.                     pointColor: “rgba(220,220,220,1)”,
  9.                     pointStrokeColor: “#fff”,
  10.                     pointHighlightFill: “#fff”,
  11.                     pointHighlightStroke: “rgba(220,220,220,1)”,
  12.                     data: [scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor()]
  13.                 },
  14.                 {
  15.                     label: “My Second dataset”,
  16.                     fillColor: “rgba(151,187,205,0.2)”,
  17.                     strokeColor: “rgba(151,187,205,1)”,
  18.                     pointColor: “rgba(151,187,205,1)”,
  19.                     pointStrokeColor: “#fff”,
  20.                     pointHighlightFill: “#fff”,
  21.                     pointHighlightStroke: “rgba(151,187,205,1)”,
  22.                     data: [scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor()]
  23.                 }
  24.         ]
  26.     }

Properties

  • Labels
  • Datasets
    1. fillColor
    2. strokeColor
    3. pointColor
    4. pointStrokeColor
    5. pointHighlightFill
    6. pointHighlightStroke
    7. data

Here you can change the properties as you want.

To generate data

  1. var scalingFactor = function () { return Math.round(Math.random() * 100) };

Complete HTML

  1. <!DOCTYPE html>
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>
  3. <head>
  4.     <title>Line Chart Using Chart.js</title>
  5.     <script src=“Chart.js”></script>
  6.     <script>
  7.     var scalingFactor = function () { return Math.round(Math.random() * 100) };
  8.     var lineChartData = {
  9.         labels: [“Monday”, “Tuesday”, “Wednesday”, “Thursday”, “Friday”, “Saturday”, “Sunday”],
  10.         datasets: [
  11.                 {
  12.                     fillColor: “rgba(220,220,220,0.2)”,
  13.                     strokeColor: “rgba(220,220,220,1)”,
  14.                     pointColor: “rgba(220,220,220,1)”,
  15.                     pointStrokeColor: “#fff”,
  16.                     pointHighlightFill: “#fff”,
  17.                     pointHighlightStroke: “rgba(220,220,220,1)”,
  18.                     data: [scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor()]
  19.                 }
  20.         ]
  22.     }
  23.     window.onload = function () {
  24.         var canvasObject = document.getElementById(“myChart”).getContext(“2d”);
  25.         window.myLine = new Chart(canvasObject).Line(lineChartData, {
  26.             responsive: true
  27.         });
  28.     }
  30.     </script>
  31. </head>
  32. <body>
  33.     <div>
  34.         <canvas id=“myChart”></canvas>
  35.     </div>
  36. </body>
  37. </html>

Conclusion

I hope you have created your own chart.

Output

Output

]]> https://sibeeshpassion.com/client-side-chart-widget-in-html-5-part-3-line-chart/feed/ 0 Client-Side Chart Widget in HTML 5: Part 1 (Bar Chart) https://sibeeshpassion.com/client-side-chart-widget-in-html-5-part-1-bar-chart/ https://sibeeshpassion.com/client-side-chart-widget-in-html-5-part-1-bar-chart/#disqus_thread Thu, 29 Jan 2015 19:49:39 +0000 https://sibeeshpassion.com/?p=1041 Introduction

Hi all, I hope you are fine. Today we will explain a client-side chart widget in HTML 5.

Background

As in the header, we will work with a client-side chart. For that we have a powerful widget.

That is Chart.JS. Please download the necessary files here.

Using the code

The following is a simple HTML:
[html]
<!DOCTYPE html>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>Bar Chart Using Chart.js</title>
</head>
<body></body>
</html>
[/html]

Included JavaScript file.

[js]
<script src=“Chart.js”></script>
[/js]

Call the Chart Function as in the following:
[js]
window.onload = function () {
var canvasObject = document.getElementById(“myChart”).getContext(“2d”);
window.myBar = new Chart(canvasObject).Bar(barChartData, {
responsive: true
});
}
[/js]

Here we are loading the chart into the myChart.

As you can see in the preceding code, barChartData is the data we will load into the chart.

[js]
var barChartData = {
labels: [“Monday”, “Tuesday”, “Wednesday”, “Thursday”, “Friday”, “Saturday”, “Sunday”],
datasets: [
{
fillColor: “rgba(220,220,220,0.5)”,
strokeColor: “rgba(220,220,220,0.8)”,
highlightFill: “rgba(220,220,220,0.75)”,
highlightStroke: “rgba(220,220,220,1)”,
data: [scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor()]
},
{
fillColor: “rgba(151,187,205,0.5)”,
strokeColor: “rgba(151,187,205,0.8)”,
highlightFill: “rgba(151,187,205,0.75)”,
highlightStroke: “rgba(151,187,205,1)”,
data: [scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor()]
}
]
}
[/js]

Properties

  • Labels
  • Datasets
  • fillColor
  • strokeColor
  • highlightFill
  • highlightStroke
  • data

    • Here you can change the properties as you want.

    Use the following to generate data:
    [js]
    var scalingFactor = function () { return Math.round(Math.random() * 100) };
    [/js]

    Complete Code
    [html]
    <!DOCTYPE html>
    <html xmlns=“http://www.w3.org/1999/xhtml”>
    <head>
    <title>Bar Chart Using Chart.js</title>
    <script src=“Chart.js”></script>
    <script>
    var scalingFactor = function () { return Math.round(Math.random() * 100) };
    var barChartData = {
    labels: [“Monday”, “Tuesday”, “Wednesday”, “Thursday”, “Friday”, “Saturday”, “Sunday”],
    datasets: [
    {
    fillColor: “rgba(220,220,220,0.5)”,
    strokeColor: “rgba(220,220,220,0.8)”,
    highlightFill: “rgba(220,220,220,0.75)”,
    highlightStroke: “rgba(220,220,220,1)”,
    data: [scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor()]
    },
    {
    fillColor: “rgba(151,187,205,0.5)”,
    strokeColor: “rgba(151,187,205,0.8)”,
    highlightFill: “rgba(151,187,205,0.75)”,
    highlightStroke: “rgba(151,187,205,1)”,
    data: [scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor(), scalingFactor()]
    }
    ]
    }
    window.onload = function () {
    var canvasObject = document.getElementById(“myChart”).getContext(“2d”);
    window.myBar = new Chart(canvasObject).Bar(barChartData, {
    responsive: true
    });
    }
    </script>
    </head>
    <body>
    <div>
    <canvas id=“myChart”></canvas>
    </div>
    </body>
    </html>
    [/html]

    Conclusion

    I hope you can now create your own chart.

    Output

    Output

    Conclusion

    I hope you liked my article. Please share me your feedback. Thank you.

    Kindest Regards
    Sibeesh venu

    ]]>     https://sibeeshpassion.com/client-side-chart-widget-in-html-5-part-1-bar-chart/feed/ 0     Export From HTML Table Using jQuery https://sibeeshpassion.com/export-html-table-using-jquery/ https://sibeeshpassion.com/export-html-table-using-jquery/#disqus_thread Wed, 29 Oct 2014 18:55:52 +0000 https://sibeeshpassion.com/?p=352 [toc]

    Introduction

    In this article, we will see how to export from an HTML table using jQuery. We all work in some applications where we are playing with data’s. It might be some data returned by the server or it might be some client-side data like HTML table. No matter whichever forms the data is, there will be an export option. Isn’t it? 80% of our clients need the data to be exported to excel. So we need to give the option to export the given data to excel, not dependent on the data format. In my case, my data is in the form of an HTML table, so in this post, we will explain how to export an HTML data to excel, pdf, png, jpeg etc. I hope you will like it.

    Download Files here: HTML Table Export

    Background

    As I said earlier, this article explains how to export an HTML table using jQuery. In this article we will see how we can export the given data to the following formats:

    • Excel
    • PDF
    • Image
    • CSV
    • PPT
    • Word
    • TXT
    • XML

    You can always see other exporting related articles here.

    Why

    In my project, we are doing 80% of our work in the client side. So I decided to implement the export feature in the client side itself. The same can be done using server-side code also but I prefer the client-side one.

    What you must know

    Using the code

    Before you start, you need to download the necessary files from TableExport.jquery.plugin.

    Once you have download the files, you need to include those in your project. Here I am using a MVC4 web application.

    [js]
    <script src=“~/Contents/jquery-1.9.1.js”></script>
    <script src=“~/Contents/tableExport.js”></script> @*Main file which does export feature *@
    <script src=“~/Contents/jquery.base64.js”></script> @*Main file which does convert the content to base64 *@
    <script src=“~/Contents/html2canvas.js”></script> @*Main file which does export to image feature *@
    <script src=“~/Contents/jspdf/libs/base64.js”></script> @*Main file which does convert the content to base64 for pdf *@
    <script src=“~/Contents/jspdf/libs/sprintf.js”></script> @*Main file which does export feature for pdf *@
    <script src=“~/Contents/jspdf/jspdf.js”></script> @*Main file which does export feature for pdf *@
    [/js]

    Let’s say you have an HTML table as follows:

    [html]
    <table id=“activity” >
    <thead>
    <tr>
    <th>Name</th>
    <th>Activity on Code Project (%)</th>
    <th>Activity on C# Corner (%)</th>
    <th>Activity on Asp Forum (%)</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Sibeesh</td>
    <td>100</td>
    <td>98</td>
    <td>80</td>
    </tr>
    <tr>
    <td>Ajay</td>
    <td>90</td>
    <td>0</td>
    <td>50</td>
    </tr>
    <tr>
    <td>Ansary</td>
    <td>100</td>
    <td>20</td>
    <td>10</td>
    </tr>
    <tr>
    <td>Aghil</td>
    <td>0</td>
    <td>30</td>
    <td>90</td>
    </tr>
    <tr>
    <td>Arya</td>
    <td>0</td>
    <td>0</td>
    <td>95</td>
    </tr>
    </tbody>
    </table>
    [/html]

    Add some more UI elements for firing the click events.

    [html]
    <table>
    <tr id=“footerExport”>
    <td id=“exportexcel”><img src=“~/icons/xls.png” title=“Export to Excel” /></td>
    <td id=“exportpdf”><img src=“~/icons/pdf.png” title=“Export to PDF” /></td>
    <td id=“exportimage”><img src=“~/icons/png.png” title=“Export to PNG” /></td>
    <td id=“exportcsv”><img src=“~/icons/csv.png” title=“Export to CSV” /></td>
    <td id=“exportword”><img src=“~/icons/word.png” title=“Export to Word” /></td>
    <td id=“exporttxt”><img src=“~/icons/txt.png” title=“Export to TXT” /></td>
    <td id=“exportxml”><img src=“~/icons/xml.png” title=“Export to XML” /></td>
    <td id=“exportppt”><img src=“~/icons/ppt.png” title=“Export to PPT” /></td>
    </tr>
    </table>
    [/html]

    Add a few styles to the table to make it viewable.

    [css]
    <style>
    #activity {
    text-align:center;border:1px solid #ccc;
    }
    #activity td{
    text-align:center;border:1px solid #ccc;
    }
    #footerExport td{
    cursor:pointer;
    text-align:center;border:1px solid #ccc;
    border:none;
    }
    </style>
    [/css]

    Now it is time to fire our events 🙂 You can do that as in the following.
    [js]
    <script>
    $(document).ready(function () {
    $(‘#exportexcel’).bind(‘click’, function (e) {
    $(‘#activity’).tableExport({ type: ‘excel’, escape: ‘false’ });
    });
    $(‘#exportpdf’).bind(‘click’, function (e) {
    $(‘#activity’).tableExport({ type: ‘pdf’, escape: ‘false’ });
    });
    $(‘#exportimage’).bind(‘click’, function (e) {
    $(‘#activity’).tableExport({ type: ‘png’, escape: ‘false’ });
    });
    $(‘#exportcsv’).bind(‘click’, function (e) {
    $(‘#activity’).tableExport({ type: ‘csv’, escape: ‘false’ });
    });
    $(‘#exportppt’).bind(‘click’, function (e) {
    $(‘#activity’).tableExport({ type: ‘powerpoint’, escape: ‘false’ });
    });
    $(‘#exportxml’).bind(‘click’, function (e) {
    $(‘#activity’).tableExport({ type: ‘xml’, escape: ‘false’ });
    });
    $(‘#exportword’).bind(‘click’, function (e) {
    $(‘#activity’).tableExport({ type: ‘doc’, escape: ‘false’ });
    });
    $(‘#exporttxt’).bind(‘click’, function (e) {
    $(‘#activity’).tableExport({ type: ‘txt’, escape: ‘false’ });
    });
    });
    </script>
    [/js]

    Please note that you can export to a few more formats in the same way. You can learn more here:tableExport.jquery.plugin.

    Explanation

    Now its time go deeper into that plugin. In the downloaded files you can see a file called tableExport.js. just open that file, you can see some conditions for specific formats. And the default property for exporting as follows.
    [js]
    var defaults = {
    separator: ‘,’,
    ignoreColumn: [],
    tableName:‘yourTableName’,
    type:‘csv’,
    pdfFontSize:7,
    pdfLeftMargin:20,
    escape:‘true’,
    htmlContent:‘false’,
    consoleLog:‘false’
    };
    [/js]

    You can change these properties depending on your needs as follows.

    [js]
    var varpdfFontSize= ‘7’;
    $(‘#activity’).tableExport({ type: ‘excel’, escape: ‘false’,pdfFontSize:varpdfFontSize});
    [/js]

    You can try all the properties listed above like this :).

    Now in that file you can see an if else if condition that is satisfied for multiple formats. Let me explain for Excel formatting alone.

    [js]
    var excel=“<table>”;
    // Header
    $(el).find(‘thead’).find(‘tr’).each(function() {
    excel += “<tr>”;
    $(this).filter(‘:visible’).find(‘th’).each(function(index,data) {
    if ($(this).css(‘display’) != ‘none’){
    if(defaults.ignoreColumn.indexOf(index) == -1){
    excel += “<td>” + parseString($(this))+ “</td>”;
    }
    }
    });
    excel += ‘</tr>’;
    });
    // Row Vs Column
    var rowCount=1;
    $(el).find(‘tbody’).find(‘tr’).each(function() {
    excel += “<tr>”;
    var colCount=0;
    $(this).filter(‘:visible’).find(‘td’).each(function(index,data) {
    if ($(this).css(‘display’) != ‘none’){
    if(defaults.ignoreColumn.indexOf(index) == -1){
    excel += “<td>”+parseString($(this))+“</td>”;
    }
    }
    colCount++;
    });
    rowCount++;
    excel += ‘</tr>’;
    });
    excel += ‘</table>’
    if(defaults.consoleLog == ‘true’){
    console.log(excel);
    }
    var excelFile = “<html xmlns:o=’urn:schemas-microsoft-com:office:office’ xmlns:x=’urn:schemas-microsoft-com:office:”+defaults.type+“‘ xmlns=’http://www.w3.org/TR/REC-html40′>”;
    excelFile += “<head>”;
    excelFile += “<!–[if gte mso 9]>”;
    excelFile += “<xml>”;
    excelFile += “<x:ExcelWorkbook>”;
    excelFile += “<x:ExcelWorksheets>”;
    excelFile += “<x:ExcelWorksheet>”;
    excelFile += “<x:Name>”;
    excelFile += “{worksheet}”;
    excelFile += “</x:Name>”;
    excelFile += “<x:WorksheetOptions>”;
    excelFile += “<x:DisplayGridlines/>”;
    excelFile += “</x:WorksheetOptions>”;
    excelFile += “</x:ExcelWorksheet>”;
    excelFile += “</x:ExcelWorksheets>”;
    excelFile += “</x:ExcelWorkbook>”;
    excelFile += “</xml>”;
    excelFile += “<![endif]–>”;
    excelFile += “</head>”;
    excelFile += “<body>”;
    excelFile += excel;
    excelFile += “</body>”;
    excelFile += “</html>”;
    var base64data = “base64,” + $.base64.encode(excelFile);
    window.open(‘data:application/vnd.ms-‘+defaults.type+‘;filename=exportData.doc;’ + base64data);
    [/js]

    Procedure

    • Find the UI element (in this case it is our HTML table).
    • Loop through the rows of the thread for the header information.
    • Apply a filter to avoid the UI elements that have a display as none (filter(‘:visible’)).
    • If the UI is visible, append it to the variable (excel += “” + parseString($(this))+ “”;)
    • The same procedure is done for the row vs column values also. The only difference is, here we are looping through the tbody instead of thread.
    • After the data is manipulated, data is formulated in the Excel format.

    You can learn more in the attachment.

    Output

    Export From HTML Table

    Export From HTML Table

    Points of Interest

    jquery, CSS, HTML, Export

    History

    1st version: 18-11-2014
    2nd Version: 24-11-2014

    Changes did

    1. Added Images to UI elements
    2. Added some export feature

    Conclusion

    Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

    Your turn. What do you think?

    A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

    Kindest Regards
    Sibeesh Venu

    ]]>     https://sibeeshpassion.com/export-html-table-using-jquery/feed/ 135