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.
Related
I'd like to create a table with content from my database. I have a table without a header for multiple reasons (e.q. scrolling). Is it possible set the colums to the same width as the table before without JS? I dont want to add a class to each td element if possible. Not all columns have the same width. Nth-child is a bad solution because I have multiple tables.. :/
Here is a shorter version of my table:
table, th, td {
border: 1px solid #000;
}
table {
border-collapse: collapse;
}
.h1 {
width: 125px;
}
.h2 {
width: 150px;
}
<table>
<tr>
<th class="h1">
<span>a</span>
</th>
<th class="h2">
<span>b</span>
</th>
</tr>
</table>
<table>
<tr>
<td>
<span>c</span>
</td>
<td>
<span>d</span>
</td>
</tr>
</table>
one of the tables has header and one of them doesn't. and in your css you do not specify the table without header... you should has a code like this
table , tr, td{}
I have a table declared statically with html and the quantity of table rows is dependent on information stored on a database. The cells are created using Javascripts insertRow function and I can access the TD element by using table.row[x].cells[y]. My goal is to insert Angular's md-button in place of the HTML button attribute I created using .innerHTML.
If you are using angular - then you should use the ng-repeat (or *ngFor in Angular 2+) directives to add the content to the page instead of using javascript. The following will give a table with two rows and 3 tds per tr.
So its really more a case of getting your data, adding it to $scope and formatting it in a way that you can iterate over in the ng-repeat.
If you really want to keep it the way yuo have it - then simple create a button and styling it with the stylnig to make it look like the button you like.
var angularTest = angular.module('angularDiv',[]);
angularTest.controller('tableController', ['$scope', function($scope) {
$scope.items= [
{ contents: ['content 1.1', 'content 1.2','content 1.3']},
{ contents: ['content 2.1', 'content 2.2','content 2.3']},
];
}])
table {border-collapse: collapse}
th {
border: solid 1px #d4d4d4;
padding: 5px 10px;
background: #ededed;
border-bottom-width: 2px
}
td {
border: solid 1px #d4d4d4;
padding: 5px 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="angularDiv">
<table ng-controller="tableController">
<thead>
<tr>
<th ng-repeat="heading in items[0].contents">
Heading {{$index + 1}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td ng-repeat ="content in item.contents">{{content}}</td>
</tbody>
</table>
</div>
To extract "href" and "src" inside HTML Email, I used below code in console log in browser. It extract "href" and "src" from non outlook code only.
var urls=$$('a');
for(url in urls){
console.log("%c#"+url+" > %c"+urls[url].innerHTML +" >> %c"+urls[url].href,"color:red;","color:green;","color:blue;");
}
But I need to extract "href" and "src" from VML(Outlook code) also. See below VML code for detail.
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:50px; v-text-anchor:middle; width:460px;" arcsize="45%" strokecolor="#db2b91" href="**http://somewebsite.com/**" strokeweight="4pt" fillcolor="#db2b91">
<w:anchorlock/>
<center>
<table width="455" align="center" valign="bottom" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; border-spacing: 0; mso-table-lspace: 0px; mso-table-rspace: 0px;"><tr><td align="center" valign="middle" style="font-family: Arial, sans-serif; font-size:16px; line-height:20px; font-weight: bold; vertical-align: middle; padding: 5px 0px 13px 0px; color: #ffffff;">Button text</td> </table>
</center>
</v:roundrect>
<![endif]-->
You can access those elements using jQuery or pure Javascript once they are attached to the DOM. Note, this <!--[if mso]> is specific to outlook and will be attached to DOM only in those environments. So you can not access them outside outlook with the <!--[if mso]> condition.
Now, you can select any vml elements by jQuery as below:
$('v\\:roundrect')
Or, by Javascript,
document.getElementsByTagName('v:roundrect')
Hope this helps.
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.
I am trying to create a tooltip on a web page. I want the user to be able to roll over a link, and when they do, display arbitrary html. In this case, its a simple table, containing some meta data. I have tried using jquery.tools, but I am not sure how to use it correctly. Here is the idea:
<a id="foo">FOO</a>
<div id="tooltip-content">
I am visible when the user hovers over FOO
<table>
<tr>
<td>Name</td>
<td>Foo</td>
</tr>
<tr>
<td>Value</td>
<td>Waka waka</td>
</tr>
....
</table>
</div>
When the user hovers over the link text FOO, I want the div and its content to become visible, floating near the mouse, I don't care if its above, below, left or right of the link text. It just needs to work. What is the simplest / best way to do this? I don't think I can use the title attribute of the link since I want to support an html table, is that correct? How do I do this?
Basic stuff, really. Here's a fiddle: http://jsfiddle.net/MqcMM/. The reason the table and the link are wrapped in a container is to allow hovering over the table once it is displayed.
HTML:
<div id = "container">
<a id="foo" href = "#">FOO</a>
<table>
<tr>
<td>Name</td>
<td>Foo</td>
</tr>
<tr>
<td>Value</td>
<td>Waka waka</td>
</tr>
</table>
</div>
CSS:
body {
padding: 50px;
}
#container {
position: relative;
display: table;
}
#container > table {
position: absolute;
white-space: nowrap;
border-collapse: collapse;
display: none;
}
#container > table td {
border: 1px dotted #000;
padding: 2px;
}
#container:hover > table {
display: table;
}