I'm trying to display an address then an email contact in a continuous way. This was my attempt I'm new to html. Right now its appears like this. How can I eliminate the gap between the address and the contact email?
address address address contact
line line line #
1 2 3 gmail.com
<body>
<div id="html_content">
<table id="header-address">
<tbody>
<tr>
{{#address}}
<td>{{ addressLine }}</td>
{{/address}}
<td>
<span class="muted">Contact</span>
</td>
<td>
<img class="text-right" src="{{ logoUrl }}" />
</td>
</tr>
</tbody>
</table>
</div>
<body>
<table>
<tr>
<td>address line 1</td>
</tr>
<tr>
<td>address line 2</td>
</tr>
<tr>
<td>address line 3</td>
</tr>
<tr>
<td>address line 4</td>
</tr>
<tr>
<td><span>abc#example.com 4</span></td>
</tr>
</table>
You can do this in javascript.
const waitBeforeContinuing = ms => new Promise(res => setTimeout(res, ms));
i=0;
i2=0;
i3=0;
function tableBody() {
i+=1;
i2+=1;
i3+=1;
// YOU CAN STORE INFORMATION IN AN ARRAY IF YOU NEED TO, THEN USE array[$i-1];
tableInfo = `${i}${i}<td>${i2}</td>{{/address}}<td><span class="muted">Contact</span></td><td><img class="text-right" src="${i3}" /></td>`;
const tr = document.createElement("tr");
tr.innerHTML = tableInfo;
document.getElementById('tablebody').appendChild(tr);
table2(); // to prevent errors
}
async function table2() {
await waitBeforeContinuing(300); // to prevent errors
tableBody();
}
tableBody();
/*
<tr>
{{#address}}
<td>{{ addressLine }}</td>
{{/address}}
<td>
<span class="muted">Contact</span>
</td>
<td>
<img class="text-right" src="{{ logoUrl }}" />
</td>
</tr>
*/
<table id="header-address">
<tbody id="tablebody">
</tbody>
</table>
This code infinitely adds elements to the table. You can also use arrays to show custom elements, not just numbers.
Related
Can I use an ngFor instead of repeating <table> two times?
NB: I thought to combine all the items into objects as items of a single array of mapping(each object contains a variable, label and value) but it does not work for me)
....
this.maxValueTable.push(selectedData.res.maxValue);
this.minValueTable.push(selectedData.res.minValue);
...
<div style="display: flex;">
<table style="width:100%;">
<thead>
<tr>
<th>Max</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let maxValue of maxValueTable">
<td> {{ maxValue | numberFormatter: (getUnit() | async)}}</td>
</tr>
</tbody>
</table>
<table style="width:100%;">
<thead>
<tr>
<th>Min</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let maxValue of minValueTable">
<td> {{ MinValue| numberFormatter: (getUnit() | async)}}</td>
</tr>
</tbody>
</table>
</div>
Another way:
<!--create an array directly in the .html: you can also use
a variable in your .ts-->
<table *ngFor="let table of [{head:'Max',data:maxValueTable},
{head:'Max',data:maxValueTable}]
style="width:100%;">
<thead>
<tr>
<!--use table.head-->
<th>{{table.head}}</th>
</tr>
</thead>
<tbody>
<!--see how iterate over table.data-->
<tr *ngFor="let maxValue of table.data">
<td> {{ maxValue | numberFormatter: (getUnit() | async)}}</td>
</tr>
</tbody>
</table>
If your arrays has the same length and only want a table, iterate over one array ans use the index to get the value of the another one
<table style="width:100%;">
<thead>
<tr>
<th>Max</th>
<th>Min</th>
</tr>
</thead>
<tbody>
<!--see the "let i=index"-->
<tr *ngFor="let maxValue of maxValueTable;let i=index">
<td> {{ maxValue | numberFormatter: (getUnit() | async)}}</td>
<!--use the "index" "i" to get the element of the another array-->
<td>
{{ minValueTable[i] | numberFormatter: (getUnit() | async)}}
</td>
</tr>
</tbody>
</table>
in this case you can also use map to create a new Array
minMax=this.minValueTable.map((x,index)=>({
min:x,
max:this.maxValueTable[index]
}))
And use {{value.min}} and {{value.max}}
You can create a function that will combine min and max values into an array like that:
mergeIntoArray(maxValue: Array<number>, minValue: Array<number>): IMergedObj[] {
let mergedArray = [];
maxValue.forEach((value, index) => {
let tempObj = {};
tempObj['maxValue'] = value;
tempObj['minValue'] = minValue[index];
mergedArray.push(tempObj);
});
return mergedArray;
}
and call this function like that:
let minAndMax = [];
this.minAndMax = this.mergeIntoArray(this.maxValueTable, this.minValueTable);
after that, use this variable (minAndMax) in your HTML template. This way you do not need to use ngFor twice.
<table style="width:100%;">
<thead>
<tr>
<th>Max</th>
<th>Min</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of minAndMax">
<td>{{ item.maxValue }}</td>
<td>{{ item.minValue }}</td>
</tr>
</tbody>
</table>
Here is the stackblitz link created for you. Hope that might help you.
You can use *ngTemplateOutlet for this case:
<div style="display: flex;">
<ng-container *ngTemplateOutlet="tableTemplate; context: {$implicit: maxValueTable, header: 'Max'}"></ng-container>
<ng-container *ngTemplateOutlet="tableTemplate; context: {$implicit: minValueTable, header: 'Min'}"></ng-container>
</div>
<ng-template #tableTemplate let-values, let-header="header">
<table style="width:100%;">
<thead>
<tr>
<th>{{ header }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let value of values">
<td> {{ value | numberFormatter: (getUnit() | async) }}</td>
</tr>
</tbody>
</table>
</ng-template>
And you will get the same table rendered twice - for Max and Min values.
As you can see, the arguments are passed as a second argument inside ngTemplateOutlet:
context: {$implicit: valuesArgument, header: headerArgument}
Later you could use this template to create infinite amount of tables:
<div *ngFor="let table of tables">
<ng-container *ngTemplateOutlet="tableTemplate; context: {$implicit: table.values, header: table.header}"></ng-container>
</div>
Assuming your tables property will look like
export class C {
tables: Table[] = [{header: 'Min', values: [1, 2, 3]}, {header: 'Max', values: [4, 5, 6]}, {header: 'Other', values: [0, -1, -2]}]
}
I'm using html templates to deliver email to my customers. The template holds a table, and I need this table to show or hide rows based on the data it's receiving. The data is injected to the HTML using handlebars.
I tried to add conditional if to the table, which works fine on the browser, but not when seeing the email:
<table class="tg">
<thead>
<tr>
<th class="tg-0pky">Name</th>
<th class="tg-0pky">{{ recipientName }}</th>
</tr>
</thead>
<tbody>
{{#if recipientId}}
<tr>
<td class="tg-0pky">ID</td>
<td class="tg-0pky">{{ recipientId }}</td>
</tr>
{{/if}}
{{#if recipientBank}}
<tr>
<td class="tg-0pky">Bank</td>
<td class="tg-0pky">{{ recipientBank }}</td>
</tr>
{{/if}}
{{#if recipientBranch}}
<tr>
<td class="tg-0pky">Branch</td>
<td class="tg-0pky">{{ recipientBranch }}</td>
</tr>
{{/if}}
{{#if recipientAccountNumber}}
<tr>
<td class="tg-0pky">Account number<br/></td>
<td class="tg-0pky">{{ recipientAccountNumber }}</td>
</tr>
{{/if}}
{{#if recipientAccountType}}
<tr>
<td class="tg-0pky">Account type</td>
<td class="tg-0pky">{{ recipientAccountType }}</td>
</tr>
{{/if}}
<tr>
<td class="tg-0pky">Amount to receive</td>
<td class="tg-0pky">{{ recipientReceive }}</td>
</tr>
</tbody>
</table>
When receiving the email:
When I receive the email, the rows are shown or not based on the data injected, but the table loses its formatting.
I've read that using a script is not the best way to handle this, because it's not a good practice to use scripts in email.
How can I dynamically show or hide the rows if the variable is present or not?
I'm having some problems getting the elements I need from a web page table. The example code from the table is:
<tr>
<td colspan="11" class="anscalls">Answered Calls</td>
</tr>
<tr class="daterow">
<td>01/01/2001</td>
<td colspan="10"> </td>
</tr>
<tr class="item">
<td>User 1</td>
<td>#</td>
</tr>
<tr class="daterow">
<td>02/01/2001</td>
<td colspan="10"> </td>
</tr>
<tr class="changeditem">
<td>User 1</td>
<td>#</td>
</tr>
<tr class="changeditem">
<td>User 2</td>
<td>#</td>
</tr>
<tr class="daterow">
<td>03/01/2001</td>
<td colspan="10"> </td>
</tr>
<tr class="item">
<td>User 1</td>
<td>#</td>
</tr>
<tr class="daterow">
<td>04/01/2001</td>
<td colspan="10"> </td>
</tr>
<tr class="changeditem">
<td>User 1</td>
<td>#</td>
</tr>
<tr class="changeditem">
<td>User 2</td>
<td>#</td>
</tr>
<tr class="changeditem">
<td>User 3</td>
<td>#</td>
</tr>
<tr class="daterow">
<td>05/01/2001</td>
<td colspan="10"> </td>
</tr>
<tr class="item">
<td>User 1</td>
<td>#</td>
</tr>
I'm able to get the information between the "changeditem" class, which is what I need, but I also need the information from the "daterow" class to go along with the "changeditem" information. I'm currently using the following code:
For j = 0 To (.Document.getElementsByClassName("changeditem").Length - 1)
MsgBox .Document.getElementsByClassName("changeditem").Item((j + 0)).InnerText & Chr(44) & _
.Document.getElementsByClassName("changeditem").Item((j + 1)).InnerText
j = j + 1
Next
Which Outputs:
User1,#
User2,#
User1,#
User2,#
User3,#
I would need to loop through the entire table, which is much bigger than shown, and get the "daterow" class relevant to the "changeditem" classes, which I cannot figure out how to do.
What I'm aiming to get is:
02/01/2001,User 1,#
02/01/2001,User 2,#
04/01/2001,User 1,#
04/01/2001,User 2,#
04/01/2001,User 3,#
Thanks in advance.
Not a VBScript answer, but jQuery exists specifically for this kind of DOM manipulation and is very widely used, so I'll suggest it anyway. Using jQuery you could do something like the following. I am by no means fluent in jQuery and this will not output the exact desired output, but it illustrates the idea. You could
do all of this with standard DOM methods, jQuery just makes it much easier.
<script>
$(function() {
// get a reference to all changeditem rows
var $changedItem = $('tr.changeditem');
// loop the results
$changedItem.each(function() {
// contents of first td in tr
console.log( $(this).children('td').first().text());
// if there is a sibling tr daterow, get a reference
var $dateRow = $(this).next('tr.daterow');
// contents of first td in tr
console.log( $dateRow.children('td').first().text());
});
});
</script>
i need to change quite some html entries in a mysql database. my problem is that some tags need to be replaced while the surrounded code needs to stay the same. in detail: all td-tags in tr-tags with the class "kopf" need to be changed to th-tags (and the addording closing for the tags)
it would not be a problem without the closing tags..
update `tt_content` set `bodytext` = replace(`bodytext`,'<tr class="kopf"><td colspan="2">','<tr><th colspan="2">');
this would work
from what i found the %-sign is used, but how exactly?:
update `tt_content` set `bodytext` = replace(`bodytext`,'<tr class="kopf"><td colspan="2">%</td></tr>','<tr><th colspan="2">%</th></tr>');
i guess this would replace all the code within the old td tags by a %-sign?? how can i achive the needed replacement?
edit: just to clarify things here is a possible entry in the db:
<table class="techDat" > <tbody> <tr class="kopf"> <td colspan="2"> <p><strong>Technical data:</strong></p> </td> </tr> <tr> <td> <p>Operating time depending on battery chargeBetriebszeit je Akkuladung</p> </td> <td> <p>Approx. 4 h</p> </td> </tr> <tr> <td> <p>Maximum volume</p> </td> <td> <p>Approx. 120 dB(A)</p> </td> </tr> <tr> <td> <p>Weight</p> </td> <td> <p>Approx. 59 g</p> </td> </tr> </tbody> </table>
after the mysql replacement it should look like
<table class="techDat" > <tbody> <tr> <th colspan="2"> <p><strong>Technical data:</strong></p> </th> </tr> <tr> <td> <p>Operating time depending on battery chargeBetriebszeit je Akkuladung</p> </td> <td> <p>Approx. 4 h</p> </td> </tr> <tr> <td> <p>Maximum volume</p> </td> <td> <p>Approx. 120 dB(A)</p> </td> </tr> <tr> <td> <p>Weight</p> </td> <td> <p>Approx. 59 g</p> </td> </tr> </tbody> </table>
Try two replaces
update `tt_content` set `bodytext` =
replace(replace(`bodytext`,
'<tr class="kopf"><td colspan="2">','<tr><th colspan="2">'),
'</td></tr>','</th></tr>')
Try updating your records with two queries :
1) for without % sign:
updatett_contentsetbodytext= replace(bodytext,'<tr class="kopf"><td colspan="2">','<tr><th colspan="2">');
2) for % sign
updatett_contentsetbodytext= replace(bodytext,'<tr class="kopf"><td colspan="2">%</td></tr>','<tr><th colspan="2">%</th></tr>')
where instr(bodytext,'%') > 0 ;
I want to perform navigate to other screen when I touch a table row. To do so I did the following :
<table>
<tr>
<td width="80"><img src="http://images.bizrate.com/resize?sq=60&uid=2605377575" width="80px"></img></td>
<td>
<table>
<tr>
<td width="260"><label for="label1">GPS Navigation System-$68.00</label></td>
</tr>
<tr>
<td width="260"><label for="label2">TomTom 3.5 One 125</label></td>
</tr>
</table>
</td>
</tr>
</table>
But nothing happened. I also tried to apply in td. Still no success. Finally I tried with unordered lists. Still nothing happened.
How can we navigate to other screen on table row touch?
You need to specify an action in your anchor tag, not just a controller. You can try something like the following:
<table>
<tr onclick="rowClick();">
<td width="80"><img src="http://images.bizrate.com/resize?sq=60&uid=2605377575" width="80px"></img></td>
<td>
<table>
<tr>
<td width="260"><label for="label1">GPS Navigation System-$68.00</label></td>
</tr>
<tr>
<td width="260"><label for="label2">TomTom 3.5 One 125</label></td>
</tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
function rowClick() {
window.location = "<%= url_for :controller => :Products, :action => :show, :params => { :item_id => 1234 } %>";
}
</script>