I have two td's under one tr. How can i show the 2nd td in next line.Currently its displaying in same line.I would have to loop the users object and its content multiple times.
<table>
<thead>
<tr>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr v-for="(user,index) in users" :key="index">
<td>
{{ user.id}}
</td>
<td>
<table>
<tbody>
<tr v-for="(info,index) in user.demographic" :key="index">
<td>
{{info.name}}
</td>
<td>
{{info.address}}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
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'm new to HTML/CSS, and I'm having a hard time aligning the Opening days, hours, closing days of the Chicken shop against the Open, Hours, and Close from the table. I want the days and time to align directly below each category. Such as Open (Sun/Mon..), Hours (9-3pm), Close (Tues/Fri). Below are my codes, any advise would be greatly appreciated!!! Thank you!!!
<table id="shops">
<tr>
<th>Shops</th>
<th>Location</th>
<th>Store Hours</th>
<th>Products</th>
</tr> <!-- Nested table for store hours and product types-->
<tr>
<td colspan="2"></td>
<td>
<table id="hours_table">
<tr>
<th>OPEN</th>
<th>HOURS</th>
<th>CLOSE</th>
</tr>
</table>
</td>
<td>
<table id="products_table">
<tr>
<th>Animals</th>
<th>Cost</th>
<th>Items</th>
<th>Cost</th>
</tr>
</table>
</td>
</tr>
<tr>
<td id="chicken_shop">Cuckoo House Chicken Shop</td>
<td>West Natura</td>
<td>
<table id="chicken_hours">
<tr>
<td>SUN/MON/WED/THURS/SAT</td>
<td>9AM - 3PM</td>
<td>TUES/FRI</td>
</tr>
</table>
</td>
</table>
Hi here is the solution:
<table id="shops" border='1'>
<tr>
<th>Shops</th>
<th>Location</th>
<th>Store Hours</th>
<th colspan="4">Products</th>
</tr> <!-- Nested table for store hours and product types-->
<tr>
<td id="chicken_shop">Cuckoo House Chicken Shop</td>
<td>West Natura</td>
<td>
<table width="333" id="hours_table" border='1'>
<tr>
<td>OPEN</td>
<td>HOURS</td>
<td>CLOSE</td>
</tr>
<tr>
<td>SUN/MON/WED/THURS/SAT</td>
<td>9AM - 3PM</td>
<td>TUES/FRI</td>
</tr>
</table>
</td>
<th>Animals</th>
<th>Cost</th>
<th>Items</th>
<th>Cost</th>
</tr>
</table>
Instead of using <th> you have to use <td> even if it is part of the table head.
<table>
<thead>
<tr>
<td>Shops</td>
<td>SOmethng</td>
<td>Something#2</td>
</tr>
</thead>
<tbody>
<tr>
<td>Something in the body of the table</td>
<td>something</td>
<tdSomething</td>
</tr>
</tbody>
</table>
I suggest using w3schools.com for additional info.Also you can add borders in case you want some borders around it.
I need something like this:
<tr>
somecode...
</tr *ngIf="some condition">
which of course isn't supported, but is there any way to achieve this behavior?
I have a table, and I want to add rows to it recursively using a component that receives node's list(List), iterates over the nodes, print them and calls itself for each of the children of each node roughly like this:
main.component.html
<table class="table table-bordered">
<thead>
<tr>
<th>node names</th>
</tr>
</thead>
<tbody>
<tr app-rower [nodes]="nodes"></tr>
</tbody>
</table>
rower.component.html:
<ng-container *ngFor="let node of tree">
<tr>
<td>
{{node.name}}
</td>
</tr *ngIf="node.hasChildren">
<tr *ngIf="node.hasChildren" app-rower [tree]="node.children" >
</tr *ngIf="!node.hasChildren">
</ng-container>
so a final html would be:
<table>
<thead>
<tr>
<th>node's names</th>
</tr>
</thead>
<tbody>
<tr>
<td>node 1</td>
</tr>
<tr>
<td>node 1's child</td>
</tr>
<tr>
<td>node 1's grandchild</td>
</tr>
<tr>
<td>node 2</td>
</tr>
<tr>
<td>node 2's child</td>
</tr>
</tbody>
</table>
No, that's not supported. A template needs to be valid HTML otherwise Angular won't parse it.
<ng-container *ngFor="let node of tree">
<tr>
<td>
{{node.name}}
</td>
</tr>
<tr *ngIf="node.hasChildren" app-rower [tree]="node.children" >
</tr>
</ng-container>
So lets say, in a HTML snippet, I have some non-table tags, then a <table> tag, then some non-table tags, then another <table> tag and so on.
What I wanna do is get the first set of non-table tags into one group, then the table section in another and the next set of non-table tags into another and so on.
I have tried using regex. It is becoming superly complicated. I have tried searching how to do using BeautifulSoup but no use.
And also, if I have to extend it to ordered <ol> and unordered <ul> sections, how can I do it?
For example: I have this (HTML) string:
<h2>Hello There.</h2>\n
<p>
Click ME </p>
<p>Lets have a coffee</p>\n
<table>
<tbody>
<tr>
<th>Drink</th><th>Cost</th></tr>
</tbody>
<tbody>
<tr>
<td>Coffee</td><td>152.61 </td> </tr>
<tr>
<td>Coke</td><td>62.56</td> </tr>
<tr>
<td>Pepsi</td><td>21.71</td> </tr>
</tbody>
</table>
<p>
So? click me too. Here is another list</p>
<table>
<tbody>
<tr>
<th>Food</th><th>cost</th></tr>
</tbody>
<tbody>
<tr>
<td>Bhel</td><td>25.5</td> </tr>
<tr>
<td>Puri</td><td>23.0</td> </tr>
<tr>
<td>Something</td><td>19.4</td> </tr>
<tr>
<td>Pani</td><td>17.12 </td> </tr>
<tr>
<td>Puriya</td><td>10.64 </td> </tr>
<tr>
<td>Done</td><td>9.21</td> </tr>
<tr>
<td>Rice</td><td>9.20 </td> </tr>
</tbody>
</table>
<p>This amazing collection is here.</p>
Required Result:
[<h2>Hello There.</h2>
<p>
Click ME </p>
<p>Lets have a coffee</p>,
<table>
<tbody>
<tr>
<th>Drink</th><th>Cost</th></tr>
</tbody>
<tbody>
<tr>
<td>Coffee</td><td>152.61 </td> </tr>
<tr>
<td>Coke</td><td>62.56</td> </tr>
<tr>
<td>Pepsi</td><td>21.71</td> </tr>
</tbody>
</table>,
<p>
So? click me too. Here is another list</p>,
<table>
<tbody>
<tr>
<th>Food</th><th>cost</th></tr>
</tbody>
<tbody>
<tr>
<td>Bhel</td><td>25.5</td> </tr>
<tr>
<td>Puri</td><td>23.0</td> </tr>
<tr>
<td>Something</td><td>19.4</td> </tr>
<tr>
<td>Pani</td><td>17.12 </td> </tr>
<tr>
<td>Puriya</td><td>10.64 </td> </tr>
<tr>
<td>Done</td><td>9.21</td> </tr>
<tr>
<td>Rice</td><td>9.20 </td> </tr>
</tbody>
</table>,
<p>This amazing collection is here.</p>]
a list containing the parts
I have a very peculiar use case which requires me to use two ng-repeats.
One array is of dates and another contains some date in form of associated array with argument as those dates.
<tbody>
<tr ng-repeat="date in dates">
<!-- <tr ng-repeat="datum in data[date]"> -->
<td> {{date}} </td>
<td> {{datum.carName}} {{datum.regNumber}}</td>
<td> {{datum.driverName}} </td>
<td> {{datum.startTime}} </td>
<td> {{datum.endTime}} </td>
<td> {{datum.trip.sourceName}}</td>
<td> {{datum.trip.destinationName}} </td>
<!-- </tr> -->
</tr>
</tbody>
Now HTML doesn't allow me to use any another tags inside tbody apart from tr and td. Also I know that we cannot have two ng-repeats inside a tag so what could be the workaround for this ? Can I insert any other tag ?
You can repeat <tbody> and then repeat <tr> within each <tbody>
<tbody ng-repeat="date in dates">
<tr ng-repeat="datum in data[date]">
There are no limits on having more than one <tbody>
Another way
<table>
<tbody>
<tr ng-if="0" ng-repeat-start="date in dates"></tr>
<tr ng-repeat="datum in data[date]">
<td> {{date}} </td>
<td> {{datum.carName}} {{datum.regNumber}}</td>
<td> {{datum.driverName}} </td>
<td> {{datum.startTime}} </td>
<td> {{datum.endTime}} </td>
<td> {{datum.trip.sourceName}}</td>
<td> {{datum.trip.destinationName}} </td>
</tr>
<tr ng-if="0" ng-repeat-end></tr>
</tbody>
</table>
This uses a combination of ng-if and ng-repeat-start / ng-repeat-end. Here ng-if="0" ensures that the element won't be rendered.
You can always other tags inside the td.
<tbody>
<tr>
<tr>
<div>here</div>
<p>there</p>
</tr>
</tr>
</tbody>