Export HTML table to XLS and retain formatting - html

I would like to export a HTML table to XLS and at the same time retain all formatting.
The following code seems to be working, except that the hilight is lost on export. How do I keep it in place?
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id='data'>
<table border='1'>
<tr>
<td>
<strong>Greeting</strong>
</td>
<td>
<strong>Message</strong>
</td>
</tr>
<tr>
<td>
Hello
</td>
<td>
World. <mark>I am hilighted!</mark>
</td>
</tr>
</table>
</div>
<script type='text/javascript'>
$(document).ready(function()
{
$("#btnExport").click(function(e)
{
var path = 'data:application/vnd.ms-excel,' + encodeURIComponent($('#data').html());
window.open(path);
e.preventDefault();
});
});
</script>
<input type='button' id='btnExport' value='Export as XLS'>
</body>

To the best of my knowledge, only inline CSS on the table elements will export properly.
So, if you had style="background-color: yellow" on a <td>, the export file would have a yellow cell, but I don't believe spans, marks or inline divs carry their CSS through at all.

Related

Gifs wont appear on website

I'm making a small website for one of my classes, I want to put 2 gifs and 2 images in one table 2x2 for some reason they just show up as tiny red boxes, The css on the page creates a red border so I'm assuming all that's showing is the css.
<html>
<head>
<title> HYPE! HYPE! HYPE! HYPE! HYPE! HYPE! HYPE! HYPE! HYPE! </title>
<meta name="description" content ="Website for the game mirrors edge 2" />
<meta name="author" content="---" />
<meta name="copyright" content="©2015" />
<!-- specify a base formatting style sheet file-->
<link rel="stylesheet" type="text/css" href="base.css" />
<!-- specify a local formatting style sheet for this page-->
<style>
body {background-color : light-grey; color : silver;}
</style>
</head>
<body>
<table>
<caption> Mirrors edge 2 </caption>
<tr>
<td> Home </td>
<td>Commments</td>
<td>Story</td>
<td>What we know</td>
<td>Hype!</td>
<td>List of Characters</td>
<td>The Studio</td>
</tr>
</table>
<header> <h2> I can't wait </h2>
<p>It's going to be so good</p>
</header>
<h1> GET STOKED </h1>
<table>
<caption> HYPE </caption>
<tr>
<td><img src"hype1.gif"></img></td>
<td><img src"hype2.gif"></img></td>
</tr>
<tr>
<td><img src"faith3.jpg"></img></td>
<td><img src"logo.jpg"></img></td>
</tr>
</table>
<h3> My Sub sub heading </h3>
<br />
my text my text my text
</br>
Return
</body>
</html>
If they are showing up as error boxes inside the table, the URLs of the images are probably incorrect. Check and ensure the images are correctly named and in the same folder as the HTML file.

How to mesh two pictures together

I did ask a similar question not too long ago, but I found some new information on the topic and I think that I can explain a bit better now.
I have two puzzle pieces, both are transparent .pngs (except the actual pieces):
Here's the code that I'm using to display my two pieces right now -
<body>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<img src="http://i.imgur.com/UPYw2i4.png">
</td>
<td>
<img src="http://i.imgur.com/7rkQ0hz.png">
</td>
</tr>
</table>
</div>
The images are beside each other, but not interlocking like they should. I know that this is supposed to happen, because who wants overlapping pictures. So my question is, how do I have them overlap?
The puzzle isn't meant to be built, it's meant to be pre-built and the pieces appear at different times using opacity, if that makes any sense.
Any direction would be awesome, as I'm new to this (having a blast learning though).
Here is an example of a "fancier" solution using the Jquery UI draggable widget:
http://plnkr.co/edit/BYDyqjBLUOXFcuPvqWvx?p=preview
html
<head>
<meta charset="utf-8" />
<title><!-- Title here --></title>
<link data-require="jqueryui" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="jqueryui" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script src="script.js"></script>
</head>
<body>
<img src="http://i.imgur.com/UPYw2i4.png" class="draggable">
<img src="http://i.imgur.com/7rkQ0hz.png" class="draggable">
</body>
</html>
JS
//js
$(function(){
$( ".draggable" ).draggable();
});
This allows you to grab and move each piece with the mouse. Had to use plnkr...because like you, i could not figure out for the life of me how to save a JSFiddle.
You cannot do this with a tableset. The columns won't overlap properly. Even if you could pull it off, you can't expect it to work across all browsers.
You could easily accomplish this with DIVs and CSS. There you have complete control over placement.
I was able to produce the desired result with some CSS Magic
<body>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<img src="http://i.imgur.com/UPYw2i4.png">
</td>
<td>
<img src="http://i.imgur.com/7rkQ0hz.png" class="merge">
</td>
</tr>
</table>
</div>
</body>
CSS
.merge
{
position:relative;
right:92px;
top:4px;
}

Unable to display images through media queries form stylesheet

I'm trying to create a responsive homepage with max-width of 1024 first. However the images are not displaying when I called from the css file.
I did include the stylesheet inside the home page and the current viewport is 1024.
I can't find my mistake, please help.
Thanks.
homepage
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Responsive design</title>
<link rel="stylesheet" href="res-style.css" type="text/css" media="screen and (max-width:1024px)"/>
</head>
<body>
<table class="ct">
<tr>
<td class="1">
<?php include 'menu.php'; ?>
</td>
</tr>
<tr>
<td class="2">
</td>
</tr>
<tr>
<td class='3'>
<img src="NewLogo1.png"></td>
</tr>
<tr>
<td class='4'>
</td>
</tr>
<tr>
<td class='5'>
wefhuiweabhfuia</td>
</tr>
</table>
</body>
</html>
stylesheet
#charset "utf-8";
/* CSS Document */
#media screen and (max-width:1024px)
{
.ct{min-width:1000px;height:898px;border:0;}
.1{background-image:url('images/text-5_02.png');min-width:1000px;height:43px;margin-left:10px;background-repeat:no-repeat;display:inherit;}
.2{background-image:url('images/text-5_04.png');min-width:1000px;height:256px;background-repeat:no-repeat;}
.3{background-image:url('images/text-5_05.png');min-width:1000px;height:288px;padding-left:25%;background-repeat:no-repeat;}
.4{background-image:url('images/text-5_06.png');min-width:1000px;height:256px;background-repeat:no-repeat;}
.5{background-image:url('images/text-5_07.png');min-width:1000px;height:55px;background-repeat:no-repeat;}
}
Don't use numbers as css classes. Starting with a number is breaking it for you. A CSS class name should start with an underscore, letter, or -. Class names starting with a dash are reserved for browser extensions. Typically start a class with a letter, though.
The following fiddle works. You can see in the console it tries to load the images, but gets a 404 in this case.
http://jsfiddle.net/nks7S/
HTML
<table class="ct">
<tr>
<td class="a1"> </td>
</tr>
<tr>
<td class="a2"></td>
</tr>
<tr>
<td class='a3'><img src="NewLogo1.png"></td>
</tr>
<tr>
<td class='a4'>
</td>
</tr>
<tr>
<td class='a5'>
wefhuiweabhfuia</td>
</tr>
</table>
CSS
#charset "utf-8";
/* CSS Document */
#media screen and (max-width:1024px)
{
.ct{min-width:1000px;height:898px;border:0;}
.a1{background-image:url('images/text-5_02.png');min-width:1000px;height:43px;margin-left:10px;background-repeat:no-repeat;display:inherit;}
.a2{background-image:url('images/text-5_04.png');min-width:1000px;height:256px;background-repeat:no-repeat;}
.a3{background-image:url('images/text-5_05.png');min-width:1000px;height:288px;padding-left:25%;background-repeat:no-repeat;}
.a4{background-image:url('images/text-5_06.png');min-width:1000px;height:256px;background-repeat:no-repeat;}
.a5{background-image:url('images/text-5_07.png');min-width:1000px;height:55px;background-repeat:no-repeat;}
}
Suggestion: Instead of 1, or a1 in my example, try to be a bit more descriptive in your class names. It makes it a lot easier for anyone other than you to follow.

Toggle table row based on class name in HTML

Hi I am having a piece of code. Here I am toggling my table based on the class name which I have hardcoded over here. I want to pass my class name as a variable in order to toggle it.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function alok(){
$(".b:not(:first)").toggle();
}
</script>
</head>
<body>
<table>
<tr class="b" onclick=alok()><td>qw</td></tr>
<tr class="b"><td>alok</td></tr>
<tr class="b"><td>verma</td></tr>
<tr class="c" onclick=alok()><td>qw</td></tr>
<tr class="c"><td>alok</td></tr>
<tr class="c"><td>verma</td></tr>
</table>
</body>
</html>
Thanks guys for looking into it... anyways I solved it.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function alok(obj){
var s= $(obj).attr('class');
$("."+s+":not(:first)").toggle();
}
</script>
</head>
<body>
<table>
<tr class="b" onclick=alok(this)><td>qw</td></tr>
<tr class="b"><td>alok</td></tr>
<tr class="b"><td>verma</td></tr>
<tr class="c" onclick=alok(this)><td>qw</td></tr>
<tr class="c"><td>alok</td></tr>
<tr class="c"><td>verma</td></tr>
</table>
</body>
</html>
You should make use of jQuery here.
$(document).on('click', 'tr', function () {
var elemClass = $(this).attr('class');
$('.' + elemClass + ':not(:first)').toggle();
});
I've wrote a fiddle - check it out.
http://jsfiddle.net/Wc5km/
As you're including jQuery in your document, it'd be a shame not to make use of it. Cleaner, more readable and it gets rid of that ugly inline onclick!

how to select the "td tag" by getElementById

<script>
alert(document.getElementById('a'));
</script>
<html>
<table>
<tr>
<td id='a' class="test">test</td>
</tr>
</table>
</html>
I tried this but get the "null" as a result.
anyone can help?
Thanks~
Try this
<html>
<table>
<tr>
<td id='a' class="test">test</td>
</tr>
</table>
<script>
alert(document.getElementById('a'));
</script>
</html>
have script tag below the <td>. Null is because you are trying to have a which is not there when script gets executed.
<html>
<head>
<script>
var readyStateCheckInterval = setInterval(function() {
if (document.readyState === "complete") {
alert(document.getElementById('a'));
clearInterval(readyStateCheckInterval);
}
}, 10);
</script>
</head>
<body>
<table>
<tr>
<td id='a' class="test">test</td>
</tr>
</table>
</body>
</html>
The document.readyState is a property built into all browsers to check if the page has loaded or not.
More info about the readyState property:
Opera
Mozilla
Internet Explorer