I have thead and tbody in the table.
Thead contains a few s in . Each of it have an id. I need to find the index of td in thead by id and then find by index in tbody.
<table>
<thead>
<tr>
<td data-date="2019-08-05"></td>
<td data-date="2019-08-06"></td> //find index of this element
<td data-date="2019-08-07"></td>
</tr>
</thead>
<tbody>
<tr>
<td>aaa</td>
<td>bbb</td> //find this element by found index
<td>ccc</td>
</tr>
</tbody>
</table>
upd
<table>
<thead>
<tr>
<td data-date="2019-08-05"></td>
<td data-date="2019-08-06"></td>
<td data-date="2019-08-07"></td>
<td data-date="2019-08-08"></td> //find index of this element
<td data-date="2019-08-09"></td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2"></td>
<td rowspan="2" class="rrrr">event1 2019-08-06</td>
<td class="rrrr">event1 2019-08-07</td>
<td class="rrrr"event1 2019-08-08</td> //find this element by found index
<td rowspan="2"></td>
</tr>
<tr>
<td class="rrrr">event2 2019-08-07</td>
<td class="rrrr">event2 2019-08-08</td> //find this element by found index
</tr>
</tbody>
</table>
This xpath expression
//tbody//td[count(//thead//td[#data-date='2019-08-06']/preceding-sibling::*)+1]
selects
<td>bbb</td>
Related
There are some values returned by ngFor in Total Column. Now I wanted to add those value to get a one grandTotal. I didn't get the idea. Anyone can help me??
In below second table:
I want {{sales.Total}} values to be added and return grand total.
/*****First Table*****/
<table class="table">
<thead>
<tr>
<th scope="col">S.N</th>
<th scope="col">Items</th>
<th scope="col">Quantity</th>
<th scope="col">Rate</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let sales of salesTransaction, let i = index">
<th>{{i+1}}</th>
<!-- <td mat-cell *matCellDef="let salesTransaction">{{salesTransaction.ProductName}}</td> -->
<td>{{sales.ProductName}}</td>
<td>{{sales.Quantity}}</td>
<td>{{sales.Rate}}</td>
<td>{{sales.Total}}</td>
</tr>
</tbody>
</table>
/*****Second Table*****/
<table class="right-table">
<tbody>
<tr>
<th>Sub-Total</th>
<td *ngFor="let sales of salesTransaction">{{sales.Total}}</td>
</tr>
<hr class="divider">
<tr>
<th>Tax</th>
<td>Happy</td>
</tr>
<hr class="divider">
<tr>
<th>Grand Total</th>
<td>0000</td>
</tr>
</tbody>
</table>
You need to create a method that returns grand total
getGrandTotal(): number {
return this.salesTransaction.reduce((acc, val) => acc += val.Total, 0);
}
<tr>
<th>Grand Total</th>
<td>{{getGrandTotal()}}</td>
</tr>
<table class="right-table">
<tbody>
<tr>
<th>Sub-Total</th>
<td *ngFor="let sales of salesTransaction">{{sales.Total}}</td>
</tr>
<hr class="divider">
<tr>
<th>Tax</th>
<td>Happy</td>
</tr>
<hr class="divider">
<tr>
<th>Grand Total</th>
<td>{{salesTransaction.reduce((total, value) => total += value.Total, 0)}}</td>
</tr>
</tbody>
</table>
I am using nested array in angularjs and bootstrap and that is dynamically coming from server side code.In that displaying table format using rowspan but it is working two level nested array only need to have more level.I tried plunker code.In this example using sample only but I need more levels
<table class="table table-bordered">
<thead>
<tr>
<td>check</td>
<th>Member</th>
<th>Age</th>
<th>Branch</th>
</tr>
</thead>
<tbody ng-repeat="group in groups">
<tr ng-repeat="member in group.members">
<td rowspan="{{group.members.length}}" ng-hide="$index>0">
{{group.id}}
</td>
<td >
{{member.name}}
</td>
<td >
{{member.age}}
</td>
<td >
<table >
<tbody>
<tr ng-repeat="stu in member.student" >
<td >{{stu.Branch}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
FIDDLE
You did not add class="table" for inner table.
Also give padding:0px to td
Fiddle
<td style="padding:0px">
<table class="table">
<tbody>
<tr ng-repeat="stu in member.student" >
<td>{{stu.Branch}}</td>
</tr>
</tbody>
</table>
</td>
I wanted to know how to display the data by reading a local json. In a row having 4 columns, 2 columns are coming from 1 array and 2 are coming from a different array.
HTML:
<table class="table table-striped table-bordered">
<thead>
<tr>
<th></th>
<th>IT</th>
<th>IT User</th>
<th>CT</th>
<th>CT User</th>
</tr>
</thead>
<tbody>
<tr>
<td class="currency">Type A</td>
<td class="currency"></td>
<td class="currency"></td>
<td class="currency"></td>
<td class="currency"></td>
</tr>
<tr>
<td class="currency">Type B</td>
<td class="currency"></td>
<td class="currency"></td>
<td class="currency"></td>
<td class="currency"></td>
</tr>
</tbody>
JSON:
{
"intr_liab":[
{
"ty":"typeA",
"it":"100",
"ct":"200"
},
{
"ty":"typeAITUser",
"it":"300",
"ct":"400"
},
{
"ty":"typeB",
"it":"500",
"ct":"600"
},
{
"ty":"typeBITUser",
"it":"700",
"ct":"800"
}
]
}
So data in the table should come as:
<body ng-controller="MainCtrl">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th></th>
<th>IT</th>
<th>IT User</th>
<th>CT</th>
<th>CT User</th>
</tr>
</thead>
<tbody>
<tr>
<td class="currency">Type A</td>
<td class="currency">100</td>
<td class="currency">300</td>
<td class="currency">200</td>
<td class="currency">400</td>
</tr>
<tr>
<td class="currency">Type B</td>
<td class="currency">500</td>
<td class="currency">700</td>
<td class="currency">600</td>
<td class="currency">800</td>
</tr>
</tbody>
</table>
</body>
Please refer this Plunker for more clarity:
https://plnkr.co/edit/USt7nXmwCTRcCfOx8sma
Please replace the HTML code with following. I hope it will help you.
<body ng-controller="MainCtrl">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th></th>
<th>IT</th>
<th>IT User</th>
<th>CT</th>
<th>CT User</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in intLiab">
<td class="currency">{{item.ty}}</td>
<td class="currency">{{item.it}}</td>
<td class="currency"></td>
<td class="currency">{{item.ct}}</td>
<td class="currency"></td>
</tr>
</tbody>
</table>
</body>
Please comment if you need more specific answer.
I want to use same ng-show condition in more than 7-8 table rows of a table.
I dont want to repeat the ng-show="same condition" in all 7-8 tr elements.
is there any way i can put the condition in top level?
Below is my code, here sometimes both condition1 and condtion2 are true and sometimes only condition1 is true and some time only condition2 is true
I dont want to repeat conditions everytime.
<table>
<tr ng-show="condition1" >
<td>test1 </td><td>some value</td>
</tr>
<tr ng-show="condition1" >
<td>test2</td><td>some value</td>
</tr>
<tr ng-show="condition2" >
<td>test3</td><td>some value</td>
</tr>
<tr ng-show="condition2" >
<td>test4</td><td>some value</td>
</tr>
<tr ng-show="condition2" >
<td>test5</td><td>some value</td>
</tr>
<tr ng-show="condition2" >
<td>test6</td><td>some value</td>
</tr>
</table>
You can try the below way (instead of div try with span as well):
<table>
<div ng-show="condition1">
<tr>
<td>test1 </td><td>some value</td>
</tr>
<tr>
<td>test2</td><td>some value</td>
</tr>
</div>
<div ng-show="condition2">
<tr>
<td>test3</td><td>some value</td>
</tr>
<tr>
<td>test4</td><td>some value</td>
</tr>
<tr>
<td>test5</td><td>some value</td>
</tr>
<tr>
<td>test6</td><td>some value</td>
</tr>
</div>
</table>
Try
<table>
<tr>
<td>test1 </td><td>some value</td>
</tr>
<tr>
<td>test2</td><td>some value</td>
</tr>
<tbody ng-show="condition2">
<tr>
<td>test3</td><td>some value</td>
</tr>
<tr>
<td>test4</td><td>some value</td>
</tr>
<tr>
<td>test5</td><td>some value</td>
</tr>
<tr>
<td>test6</td><td>some value</td>
</tr>
</tbody>
</table>
I have this table.I have details on every row and my idea is when user click on that details to expend another row below that row but problem is that it always expand at the bottom of page.I need to expand below specific row where i click.Any suggestion? This is my html for that table :
<div class="table-layout clean-table">
<table class="table responsive-table">
<thead>
<tr>
<th>#Translator.Translate("STATUS")</th>
<th>#Translator.Translate("ID_TICKET_NUMBER")</th>
<th>#Translator.Translate("TICKET_TIME")</th>
<th>#Translator.Translate("PAYIN_AMOUNT")</th>
<th>#Translator.Translate("PAYOUT_AMOUNT")</th>
<th>#Translator.Translate("TICKET_DETAIL")</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="tickets in GetAllTickets">
<th><img ng-src="~/Content/img/Icons/{{tickets.Status | lowercase}}.png" /></th>
<th>{{tickets.Pin}}</th>
<th>{{tickets.TimeCreated | date: 'dd.MM.yyyy - hh:mm:ss'}}</th>
<th>{{tickets.PayIn}}</th>
<th>{{tickets.PayoutAmount}}</th>
<th><button class="details" ng-click="toggleExpandOffer($event);PinTicketSearch(tickets.Pin)"></button></th>
</tr>
<!--extended-->
<tr class="extended-offer-container-row" ng-class=" {'expanded':isExpanded}">
<th colspan="14">
<div ng-slide-down="isExpanded" duration="0.3" lazy-render>
<table class="offer-table-extended">
<tbody>
<tr>
<td>
<table>
<tr>
<td class="popup-text">#Translator.Translate("DATE"):</td>
<td class="white">{{ TicketDetail != null ? TicketDetail.BettingSlipResult.TicketHolder.Date : TopTicket.TimeCreated }} {{ TicketDetail != null ? TicketDetail.BettingSlipResult.TicketHolder.Time : '' }}</td>
</tr>
<tr>
<td class="popup-text">
#Translator.Translate("GAME_TYPE"):
</td>
<td class="white">{{ TicketDetail != null ? TicketDetail.BettingSlipResult.TicketHolder.GameType : TopTicket.GameType }}</td>
</tr>
</table>
</td>
</tr>
<div ng-if="TicketDetail.BettingSlipResult.TicketHolder.BingoBets.length >= 1">
<table class="ticket-table" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="text-center">#Translator.Translate("PICK")</th>
<th class="text-center">#Translator.Translate("ROUND_NUMBER")</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="a in TicketDetail.BettingSlipResult.TicketHolder.BingoBets">
<td>{{a.Pick}}</td>
<td>{{a.RoundNumber}}</td>
</tr>
</tbody>
</table>
</div>
</tbody>
</table>
</div>
</tr>
</tbody>
</table>
</div>
You can move ng-repeat to the tbody element instead of the tr element:
<tbody ng-repeat="tickets in GetAllTickets">
There will be multiple tbody elements but this is valid html. Since there will be multiple extended <tr class="extended-offer-container-row" ng-class=" {'expanded':isExpanded}"> instead of the one now, you can update that to reference tickets which is now in it's scope.