I have the following table with the hyperlink currently not working:
<div class="table">
<table id="personTable">
<tbody>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
{{#each person}}
<tr>
<td>{{id}}</td>
<td>{{name}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
How can I add the placeholder to the end of the Hyperlink so it is added dynamically?
Solutions:
Try single quote '
<a href='https://www.mywebsite/person/{{id}}'>{{id}}</a>
Related
<div *ngFor = "let recordData of employees.record">
<div *ngIf = 'recordData.queryName==="style-size-query"'>
<table class ="table">
<thead>
<tr> product </tr>
<tr> size </tr>
<tr> sortOrder </tr>
</thead>
<tbody>
<tr>
<td> {{recordData.data.product}} </td>
<td> {{recordData.data.size}} </td>
<td> {{recordData.data.sortOrder}} </td>
</tr>
</tbody>
</table>
</div>
</div>
// **this is Angular code and this is the output this code is working but table header data is repeating after the each iteration.
I used ngFor for iteration the record array (it is in the first photo) loop. I used the ngIf to select the queryName and there are six record will come (it is in the first photo). I want that six record under a one table
**
Just moved structural directives and used ng-container to use ngIf and ngFor
I don't want to add extra element like div or span to apply ngIf and ngFor condition. that's why I used ng-container.
<div>
<div>
<table class ="table">
<thead>
<tr> product </tr>
<tr> size </tr>
<tr> sortOrder </tr>
</thead>
<tbody>
<ng-container *ngFor = "let recordData of employees.record">
<ng-container *ngIf = 'recordData.queryName==="style-size-query"'>
<tr>
<td> {{recordData.data.product}} </td>
<td> {{recordData.data.size}} </td>
<td> {{recordData.data.sortOrder}} </td>
</tr>
</ng-container>
</ng-container>
</tbody>
</table>
</div>
</div>
Please try like this
<table class ="table">
<thead>
<tr> product </tr>
<tr> size </tr>
<tr> sortOrder </tr>
</thead>
<div *ngIf = 'recordData.queryName==="style-size-query"'>
<tbody>
<tr>
<td> {{recordData.data.product}} </td>
<td> {{recordData.data.size}} </td>
<td> {{recordData.data.sortOrder}} </td>
</tr>
</tbody>
</div>
</table>
I have a Html Table
<div class="clearfix">
<table class="table table-contract-module">
<thead>
<tr>
<th>Group Name</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="cli in creativeGroupMarket">
<td>{{cli.GroupName}}</td>
<td>
<a>Edit</a>
<a ng-click="deleteCreativeMarket(cli.GroupID)">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
The Table Format Looks Like
Now When I Click Edit Button here I need user to be able to edit Group Name in textbox and Edit button should be replaced by Update.
After I Click Edit button on 1st row of the table the table should Look Like :-
How Can I do this?
<tr ng-repeat="cli in creativeGroupMarket">
<td ng-show="cli.edit_mode">{{cli.GroupName}}</td>
<td ng-show="!cli.edit_mode"><input ng-model="cli.GroupName"></td>
<td>
<a ng-click=cli.edit_mode=true>Edit</a>
<a ng-click="deleteCreativeMarket(cli.GroupID)">Delete</a>
</td>
</tr>
Following is the code from a .hbs file to create multiple tables one after another.
At the end there are two <br> tags to ensure two line breaks between the different tables created
{{#each container}}
<div>
<table class="table table-responsive table-condensed table-bordered" style="margin-left:0px;float: left;align:left;">
<thead>
<tr>
<th style="color:rgb(68, 67, 67);font-weight: normal;">...</th>
</tr>
</thead>
<tbody>
{{#each variable}}
<tr>
<td style="border:none;">...</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
<br><br>
{{/each}}
But after using this hbs to create an html page, the two line breaks are not visible. How to get this working?
Instead of br use inline style and add margin-bottom
{{#each container}}
<div style:"margin-bottom:30px;">
<table class="table table-responsive table-condensed table-bordered" style="margin-
left:0px;float: left;align:left;">
<thead>
<tr>
<th style="color:rgb(68, 67, 67);font-weight: normal;">...</th>
</tr>
</thead>
<tbody>
{{#each variable}}
<tr>
<td style="border:none;">...</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
{{/each}}
The issue is with the line-height of <br> element and nothing to do with Handlebars. You could write inline style to handle the space and may use one instead of two.
<br style="line-height: 5rem;" />
Hope this helps.
I have a table inside table in html as follows:
<table class="sortable draggable">
<thead>
<tr>
<th class="col-salesOrderId">Order Number</th>
<th class="col-orderDate">Date of Order</th>
<th class="col-party">Party</th>
<th class="col-edit">Edit</th>
<th class="col-delete">Delete</th>
</tr>
</thead>
<tbody>
{#orders}
<tr>
<td class="col-salesOrderId">{.salesOrderId}</td>
<td class="col-orderDate">{#formatDate date=orderDate format="DD-MM-YYYY" /}</td>
<td class="col-party">{.party.partyName}</td>
<td class="col-edit">
<button class="btn btn-info btn-edit">
</button>
</td>
<td class="col-delete">
<button class="btn btn-danger btn-delete">
</button>
</td>
</tr>
<tr>
<table class="sortable draggable row-details">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<th class="col-rate">Rate</th>
<th class="col-amount">Amount</th>
</tr>
</thead>
<tbody>
{#items}
<tr>
<td>{.item.itemName}</td>
<td>{.quantity}</td>
<td>{.rate}</td>
<td>{.quantity * .rate}</td>
</tr>
{/items}
</tbody>
</table>
</tr>
{/orders}
</tbody>
</table>
I get the output as shown below:
Why I get such an output? I expected to see nested tables.
Your HTML has several errors, starting with this:
{#orders}
As others have mentioned, this is also bad:
<tr>↩ <table class="sortable draggable row-details"
Do yourself a big favor and start using an HTML validator like W3C's. It will find problems like this quickly. (It will also find other things to complain about that you might not need to fix, but when it helps, it will save a lot of time.)
Also, start using the Chrome inspector to see what it's done when your markup goes haywire. In this case, you can see that Chrome closed your first table, instead of nesting it. When Chrome messes with your HTML like this, it's a sign you might have an error in that spot.
</tr></tbody></table>
{#items}
{/items}
<table class="sortable draggable row-details">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<table>
<tr>
<td> <!-- must be in td -->
<table> <!-- nested table -->
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
your nested table need to be inside of td or th.
You need to nest the child <table> tag inside a <td> tag, not inside a <tr> tag. Doing this should make it display properly, as only a <td> or <th> tag can go directly inside a <tr> tag.
The <table> tag needs to be inside <td> or <th> tag for it to be nested. In your code, you have put the <table> tag as a child of <tr> tag which is wrong. It should be child of <td> or <th>.
Inserting <td> or <th> between <tr> and <table> will give the output correctly.
Here is working link for reference:
Nested Tables in HTML
Example:
<table border="1">
<thead>
<tr>
<th>Item 1
<th>Item 2
</tr>
</thead>
<tbody>
<tr>
<td>
<table border="1">
<tr>
<td>1
<td>2
</tr>
<tr>
<td>1
<td>2
</tr>
</table>
<td>A
</tr>
</tbody>
</table>
I have following table structure
<table>
<table>
<thead>
<tr>...header template...</tr>
</thead>
</table>
<tbody>
<tr> ... </tr>
<tr> ... </tr>
<tr> ... </tr>
</tbody>
<table>
My problem is that the datarows and header rows are not aligned to each other.
The table structure looks wierd.
Any clue how can i make them aligned.
Edit:
I have used Jqgrid to populate my grid.
The table structure which jqgrid produces is like the above one.
If i dont wrap within tag, then the first inside disappears.
Somewhere i found that jquery.clean will clean up if we dont wrap within table.
do u guys have any idea on this
You have so much syntax errors.
This is normal table:
<table border=1>
<thead>
<tr><th>header template</th></tr>
</thead>
<tbody>
<tr><td>...</td></tr>
<tr><td>...</td></tr>
</tbody>
</table>
A table have head and body and each can have rows and columns:
<table>
<thead>
<tr><td></td></tr>
</thead>
<tbody>
<tr><td></td></tr>
</tbody>
<table>
You can also see following link for more details.
Cheers !!
Try using a syntax like this:
<table>
<thead>
<tr>
<th colspan="2"> ...header template... </th>
</tr>
</thead>
<tbody>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
</tbody>
</table>