I'm developing a simple TV guide for use in browsers.
My current HTML draws the table with the scheduled times and also displays the channel names on the left hand side
I would like to know what the best way to insert films into this HTML table at the correct times using my XML film data
I've been trying to load my XML data using the tutorial here
http://www.w3schools.com/xml/tryit.asp?filename=tryxml_display_table
And insert the data at appropriate part in table using this
http://www.w3schools.com/jsref/met_table_insertrow.asp
Heres my
HTML Code:
<!DOCTYPE html>
<html>
<!--HEADER CONTENT-->
<head>
<title>My website</title>
<link type="text/css" rel="stylesheet" href="style.css"/>
<div class="page-title">
<p>TV Guide</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<!-- MAIN BODY -->
<body>
<table class="tv-planner">
<tr>
<th class = "information">Channel</th>
<th class="times">9AM</th>
<th class="times">10AM</th>
<th class="times">11AM</th>
<th class="times">12PM</th>
<th class="times">1PM</th>
<th class="times">2PM</th>
<th class="times">3PM</th>
</tr>
<tr>
<th class = "information">Channel 1</th>
</tr>
<tr>
<th class = "information">Channel 2</th>
</tr>
<tr>
<th class = "information">Channel 4</th>
</tr>
<tr>
<th class = "information">Sky One</th>
</tr>
<tr>
<th class = "information">Channel Five</th>
</tr>
</table>
<button onclick="myFunction()">Update TV-guide</button>
<script>
function myFunction() {
// Code to read XML file + insert into existing table
}
</script>
XML code:
<MOVIE_DATA>
<MOVIE>
<movie_id="1">
<channel_1>
<name>Simpsons</name>
<start_time>10.00am</start_time>
<end_time>1.00pm</end_time>
</sean_channel>
</MOVIE>
<MOVIE>
<movie_id="2">
<roger_channel>
<name>Suits</name>
<start_time>9.00am</start_time>
<end_time>12.00pm</end_time>
</roger_channel>
</MOVIE>
<MOVIE>
<movie_id="3">
<sean_channel>
<name>Mighty Boosh</name>
<start_time>1.00pm</start_time>
<end_time>2.00pm</end_time>
</sean_channel>
</MOVIE>
</MOVIE_DATA>
CSS:
.main-area{
font-style: italic;
}
.page-title{
text-align: center;
font-style: italic;
font-size: 50px;
text-shadow: hoff voff blur #000;
}
.times{
width: 11%;
text-align: center;
color: #FF0000;
background-color: #d3d3d3;
border: 1px solid black;
}
.tv-planner{
width: 100%;
border: 1px solid black;
}
.information{
width: 15%;
border: 1px solid black;
padding-right: 10px;
padding-left: 10px;
padding-top: 15px;
padding-bottom: 15px;
background-color: #d3d3d3;
}
Any advice on how I should approach this problem, and whether i'm onto the right idea with the resources i'm using would be really helpful
Thanks!
My advice would be to give each row a unique identifier equal to the channel name as appears in your XML (i.e. sean_channel ... ).
As you cycle through your XML data, locate the row using javascript/jquery and using insert HTML as you cycle through the hours of the day. If you columns start at 9AM, then you need to offset the show's duration, such that 10AM-11AM would mean the 2nd column.
For every hour you cycle through and duration the hour does not fall into the duration, use empty . Convert the XML data for time to an integer, such that 2.30pm becomes the 24h equivalent of 14.5. With this you can use simple math to calculate the offset. So if starting 9am then a duration of 11am start would be 11-9=2. The result 2 would relate to your counter as you cycle through, starting at 0 so 2 directly matches with the 3rd column (no adjustment needed to the counter).
All this is very simplistic and hopefully should be enough to get you started and possibly thinking about a more refined and complex solution like a cell being the duration between time markers, so cell headers should be left aligned to match beginning of a certain time duration. Going further you could relate 1 cell per 15min duration, and so on.
Related
My task is to add table rows dynamically in the email template.
This is how I created email template
<html>
<head>
<style type=3D"text/css">
</style>
</head>
<body><div>
<p>
{{userName}} modified the order. Here are the latest order details...
<br/>
<br/>
<table style="font-family: arial, sans-serif; border-collapse: collapse; width: 100%;">
<tr>
<th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">Product</th>
<th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">Quantity </th>
<th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">Price</th>
</tr>
{{data}}
</table>
<br/>
<br/>
<p>- - - - -</p>
<p>Please do not reply to this email. You have received this email because you have opted in to these notifications. If you wish to no longer receive these notifications, you can turn them off in your user profile.</p>
</div></body>
</html>
And from the backend, I am passing an object with the required data as below
val tableData = '<tbody>
<tr><td>ABC</td> <td>5</td> <td>100</td></tr>
<tr><td>PQR</td> <td>2</td> <td>200</td></tr>
<tr><td>XYZ</td> <td>1</td> <td>75</td></tr>
</tbody>';
const processData = {
data: table,
userName: "XYZ"
}
But in mail, I'm getting below content
Can someone please help me to pass table rows dynamically.
Apart from the above solution here is another one.
From the backend, you can pass an array of objects. And in hbs template, built-in-helpers functions of handlebars.
Built-in-helpers Doc link
Here is the link where I tried creating dynamic rows by passing an array of objects from the backend using handlebars built-in functions
Link
In your email template, you are passing the variable "data" to the table, which contains the HTML string for the table body, but it is not being rendered as HTML in the email.
To render the table body as HTML, you can use triple curly braces {{{data}}} instead of double curly braces {{data}} in your Handlebars template. This will tell Handlebars to render the HTML string as-is, without escaping the HTML tags.
So the final result should look like:
<html>
<head>
<style type=3D"text/css"></style>
</head>
<body>
<div>
<p>
{{userName}} modified the order. Here are the latest order details...
<br/>
<br/>
<table style="font-family: arial, sans-serif; border-collapse: collapse; width: 100%;">
<tr>
<th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">Product</th>
<th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">Quantity </th>
<th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">Price</th>
</tr>
{{{data}}}
</table>
<br/>
<br/>
<p>- - - - -</p>
<p>Please do not reply to this email. You have received this email because you have opted in to these notifications. If you wish to no longer receive these notifications, you can turn them off in your user profile.</p>
</div>
</body>
</html>
You can check HTML-escaping part in the docs for more details.
I am doing some basic coding but for the life of me cannot work out how to do it. I am trying to link up a table which has information about some frogs, to a leaflet map which has the spatial extent of where they live.
Ideally I would like the map to be blank, then using if constructions and a hover to hover over the table and then for the corresponding frog habitat to appear.
Sorry for the code dump but I am not sure what would be needed (also sorry if the language is not the most techincal!). Do I need to make the allFrogs array into a featurecollection? And then I assume I would have to use an if event to ensure the habitats only came up when hovered over the table rows. Any guidance here would be very appreciated, thanks for taking a look!
<!-- Load CSS for Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.4.0/dist/leaflet.css"/>
<!-- Load JavaScript for Leaflet -->
<script src="https://unpkg.com/leaflet#1.4.0/dist/leaflet.js"></script>
<script src="http://geographicalinformation.science/maps/data/countries.js"></script> <!-- country data -->
<!-- Add CSS for the page -->
<style>
/* This is where we can set dimensions of the web page */
html, body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
/* This is where we can set the style of our map div using an id selector (#) */
#map {
width: 50%;
height: 80%;
top: 2%;
margin: left;
}
/* Style of the table NEEEEEED TO PUT THEM SIDE BY SIDE, FLOAT TO INLINE BLOCK WITH DIV?
and do i neeeeeeed to hashtag??*/
.floatedTable {
float: left;
}
.inlineTable {
display: inline-block;
}
table, th, td {
border-bottom: 1px solid #ddd;;
padding: 15px;
}
table {
position: absolute;
left: 50%;
width: 50%;
height: 80%;
top: 0%;
}
tr:hover {background-color: #8bd989;}
th {
height: 50px;
color: gold;
text-align: center;
background: #188e07;
font-weight: bold;
font-size: ;
}
td {
height: 25px;
color: #188e07;
vertical-align: center;
}
h1 {
font-size: large;
text-align: center;
}
</style>
</head>
<body onload="initMap();">
<h1>Which Fwoggie dya wanna see next?</h1>
<p>This is where Im gonna chat some sheeeeieit about how to use the website etc</p>
<!-- Make a division to put the map in -->
<div id='map'></div>
<script src='blueSided.js'></script>
<script src='redEyeddited.js'></script>
<script src='lemurLeaf.js'></script>
<script src='moreletsTree.js'></script>
<script src='glidingTree.js'></script>
<script src='splendidLeaf.js'></script>
<script src='phantasmalPoison.js'></script>
<script src='goldenPoison.js'></script>
<script src='giantMonkey.js'></script>
<script src='tigerLeg.js'></script>
<script src='trinitatis.js'></script>
<script src='whiteLined.js'></script>
<!-- Add in the frog tablE, styled in the CSS-->
<div style="overflow-x:auto;"> <!-- div to help people scroll across the table if it doesn't fit on their screen -->
<table> <!-- can I MAKE THE POP STATUS DIFFERENT COLOURS?-->
<tr>
<th>Frog Name</th>
<th>Latin Name</th>
<th>Population Status</th>
</tr>
<tr id="blueSidedTree"> <!-- id so the whole row can be used to as a hover / link -->
<td>Blue Sided Tree Frog</td>
<td>Agalychnis Annae</td>
<td>Endangered</td>
</tr>
<tr>
<td>Red Eyed Leaf Frog</td>
<td>Agalychnis Callidryas</td>
<td>Least Concern</td>
</tr>
<tr>
<td>Lemur Leaf Frog</td>
<td>Agalychnis Lemur</td>
<td>Critically Endangered</td>
</tr>
<tr>
<td>Morelet's Tree Frog</td>
<td>Agalychnis Morelleti</td>
<td>Critically Endadngered</td>
</tr>
<tr>
<td>Gliding Tree Frog</td>
<td>Agalychnis Spurelli</td>
<td>Least Concern</td>
</tr>
<tr>
<td>Splendid Leaf Frog</td>
<td>Cruziohyla Calcarifer</td>
<td>Least Concern</td>
</tr>
<tr>
<td>Yellow-Banded Poison Dart Frog</td>
<td>Dendrobates Leucomelas</td>
<td>Least Concern</td>
</tr>
<tr>
<td>Phantasmal Poison Frog</td>
<td>Epipedobates Tricolor</td>
<td>Endangered</td>
</tr>
<tr>
<td>Golden Poison Frog</td>
<td>Phyllobates Terriblilis</td>
<td>Endangered</td>
</tr>
<tr>
<td>Giant Monkey Frog</td>
<td>Phyllomedusa Bicolor</td>
<td>Least Concern</td>
</tr>
</tr>
<tr>
<td>Tiger Leg Monkey Tree Frog</td>
<td>Phyllomedusa Tomopterna</td>
<td>Least Concern</td>
</tr>
</tr>
<tr>
<td>n/a</td>
<td>Phyllomedusa Trinitatis</td>
<td>Least Concern</td>
</tr>
</tr>
<tr>
<td>White Lined Leaf Frog</td>
<td>Phyllomedusa Vailant</td>
<td>Least Concern</td>
</tr>
</table>
</div>
<!-- Add JavaScript -->
<script>
//setup global map variable
var map, geojson;
/**
* Initialise the Map
*/
function initMap(){
// this is a variable that holds the reference to the Leaflet map object
map = L.map('map').setView([4,-68], 3.5); //view centered on a central point across S America landmass so the central America and the whole Amazon basin is clear
// this adds the basemap tiles to the map
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
var allFrogs = [blueSided,lemurLeaf,moreletsTree,goldenPoison,phantasmalPoison,glidingTree,redEyeddited,splendidLeaf,giantMonkey,tigerLeg,trinitatis,whiteLined]; // array with all the frogs
geojson = L.geoJson(allFrogs, {
}).addTo(map);
}
</script>
</body>
I am new to coding and am trying to create a table where each column can be filtered. I've pieced together this code from JSFiddle resources, and it works beautifully on their website, but I can't get it to work anywhere else. It references an external js, and I think that's where it might be going wrong.
Here is the link to the original resource:
http://jsfiddle.net/eCqG3/3229/
And here is my version:
var table2_Props = {
col_0: "select",
col_1: "select",
col_2: "select",
col_3: "select",
display_all_text: " [ Show all ] ",
sort_select: true
};
var tf2 = setFilterGrid("table2", table2_Props);
table.table2 {
background-color: #ffffff;
color: #4e4e4e;
cursor: pointer;
padding: 10px;
width: 100%;
border: none;
text-align: left;
<script src="http://tablefilter.free.fr/TableFilter/tablefilter_all_min.js"></script>
<p>Add a drop-down filter, define its first option, sort it and remove a filter</p>
<table id="table2" cellpadding="0" cellspacing="0">
<tr>
<th>Account Type</th>
<th>Form Name</th>
<th>Form Type</th>
<th>Account Name</th>
<th>Special Instructions</th>
</tr>
</table>
Thanks so much for your help - I'm really stuck!
Your script it's being executed before the DOM it's ready.
Place your script just before the ending </body> tag or use this code:
document.addEventListener("DOMContentLoaded", function(event) {
// your js code
});
The javascript is not loading.
I have a question about a html table, i know a windows application that has this, a vertical scrollable table, but some columns are fixed on the page and others are always outside the page. I have a example:
The black border is the page, wich is responsive.
The red border is the table.
The green border is the part that is always fullscreen on the page,
always with The same columns.
The blue border is the part thats always off the screen with
information thats not required but if you need it you can scroll to
the right.
Anyone have an idea how to do this? In CSS? Or do i need Javascript for it?
My current code:
This class is attached to the tag.
/*MAIN TABLE*/
.tableMain {
font-size: 13px;
margin: 0;
padding: 0;
width: 200%;
table-layout: fixed;
}
But i think i need 2 classes, 1 on page class, and 1 off page class so i can define the columns that should be ouside the page. But i really dont know how to do that. Currently i've edited my headercells with this idea.
.tableCell, .tableHeaderCell{
width: 8.5%;
}
.tableSecondCell{
width: 150px;
}
This is my current HTML:
<table class='tableMain'>
<thead class='tableHeader'>
<tr class='tableHeaderRow'>
<th class='tableCell'>Name</th>
<th class='tableCell'>Email</th>
<th class='tableCell'>Role</th>
<th class='tableCell'>Username</th>
<th class='tableCell'>Department</th>
<th class='tableSecondCell'>Team</th>
<th class='tableSecondCell'>Web</th>
<th class='tableSecondCell'>App</th>
</tr>
</thead>
<tbody class='tableBody'>
<tr class='tableRow'>
<td class='tableCell'>User Name</td>
<td class='tableCell'>username1#example.com</td>
<td class='tableCell'>employee</td>
<td class='tableCell'>username1</td>
<td class='tableCell'>Support</td>
<td class='tableSecondCell'>Team1</td>
<td class='tableSecondCell'>True</td>
<td class='tableSecondCell'>True</td>
</tr>
</tbody>
</table>
Thanks for your time.
You can use instead below css for the table to scroll
.tableMain {
width: 100%;
max-width: 100%;
}
and wrap a div .table-responsive around table tag
.table-responsive {
min-height: .01%;
overflow-x: auto;
}
Copy/paste this html code snippet and try it out in IE7. When you toggle the hidden columns it leaves a gap between the columns. In Firefox it works fine, the columns touch when minimized. Haven't tried IE8 yet, would be curious to hear how it works there. Any ideas? I've tried a bunch of things in the CSS like table-layout:fixed but no luck.
Note: Not looking for a different toggling method because the table I'm really dealing with is 50+ columns wide and 4000+ rows so looping/jquery techniques are too slow.
Here's the code - if someone can re-post a working version of it I'll instantly give them the check and be forever in your debt!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script>
function toggle() {
var tableobj = document.getElementById("mytable");
if (tableobj.className == "") {
tableobj.className = "hide1 hide2";
}
else {
tableobj.className = "";
}
}
</script>
<style>
table { border-collapse: collapse; }
td, th { border: 1px solid silver; }
.hide1 .col1 { display: none; }
.hide2 .col2 { display: none; }
</style>
</head>
<body>
<input type="button" value="toggle" onclick="toggle();" />
<table id="mytable">
<tr>
<th>A</th>
<th colspan="2">B</th>
<th colspan="2" class="col1">B1</th>
<th colspan="2">C</th>
<th colspan="2" class="col2">C1</th>
</tr>
<tr>
<td>123</td>
<td>456</td>
<td>789</td>
<td class="col1">123</td>
<td class="col1">456</td>
<td>789</td>
<td>123</td>
<td class="col2">456</td>
<td class="col2">789</td>
</tr>
</table>
</body>
</html>
Here's a solution that uses JQuery to toggle the column headers (see my other answer for the rationale). Apart from the JQuery stuff, the rest of the html page is the same.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
function toggle() {
var tableobj = document.getElementById("mytable");
if (tableobj.className == "") {
tableobj.className = "hide1 hide2";
$('th[class^=col]').hide();
}
else {
tableobj.className = "";
$('th[class^=col]').show();
}
}
</script>
<style>
table { border-collapse: collapse; }
td, th { border: 1px solid silver; }
.hide1 .col1 { display: none; }
.hide2 .col2 { display: none; }
</style>
</head>
<body>
<input type="button" value="toggle" onclick="toggle();" />
<table id="mytable">
<tr>
<th>A</th>
<th colspan="2">B</th>
<th colspan="2" class="col1">B1</th>
<th colspan="2">C</th>
<th colspan="2" class="col2">C1</th>
</tr>
<tr>
<td>123</td>
<td>456</td>
<td>789</td>
<td class="col1">123</td>
<td class="col1">456</td>
<td>789</td>
<td>123</td>
<td class="col2">456</td>
<td class="col2">789</td>
</tr>
</table>
</body>
</html>
Don't yet have an explanation of why IE is doing this, but here's what's happening and here's how to work around it.
1) If you set the table class to 'hide1 hide2' in the html, then the table will render properly (no gap). Therefore, the problem seems to be related to the way that IE handles changes to a table via styles.
2) The gap between the columns is the width of the spanned column header.
3) If you eliminate column spanning (and the extra columns), then everything works fine.
I've found two workarounds. The first is to use code to toggle the display, but you've rejected that option.
The alternative is to eliminate the colspans. There are a variety of ways to do that. One is to convert the group of cells to be spanned into an embedded table (that is, instead of two TD elements, you'll have one TD which contains a TABLE with one TR and two TDs). Or you can use SPANs for cleaner code (with, say, a BORDER-RIGHT for all cells but the last).
Try this doctype declaration:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">