How use css selector find the last element in same elements each line on python? I'm using package pyquery.
I has tried tr td:nth-child(2) .score.fill:last-child, tr td:nth-child(2) .score.fill:nth-last-child(1). all failed.
<table>
<tbody>
<tr>
<td>Vote A</td>
<td>
<span class="score fill">1</span>
<span class="score">2</span>
<span class="score">3</span>
<span class="score">4</span>
<span class="score">5</span>
</td>
</tr>
<tr>
<td>Vote B</td>
<td>
<span class="score fill">1</span>
<span class="score fill">2</span>
<span class="score fill">3</span>
<span class="score fill">4</span>
<span class="score fill">5</span>
</td>
</tr>
<tr>
<td>Vote C</td>
<td>
<span class="score fill">1</span>
<span class="score fill">2</span>
<span class="score fill">3</span>
<span class="score">4</span>
<span class="score">5</span>
</td>
</tr>
</tbody>
</table>
I want get result like this:
<span class="score fill">1</span>
<span class="score fill">5</span>
<span class="score fill">3</span>
this won't work, because of .score.fill:last-child this selector means element with classes score and fill AND also last child.
You can select this with only CSS, you have to located this by JS and for examle add one more class for them.
This is feature which will be in new css :nth selectors here is link
Here is something can help
Related
I am stuck in creating xpath which is under TR tag and
i want to get the value of td[2], td[3], td[4] and td[5] from each TR tag. See below HTML.
<tbody>
<tr role="row" class="odd">
<td><img src="/Content/Uploaded//Profile//MasterAdmin/ashishadmin/95.jpg" class="profilepic img-responsive img-circle"></td>
<td>Ashish A Admin</td>
<td>ashishad#mailinator.com</td>
<td></td>
<td>ashishadmin</td>
<td><label class="chkcontainer pointer-none"><input type="checkbox" class="chk" checked="checked"><span class="checkmark"></span> </label></td>
<td><i class="fa fa-circle text-warning"></i></td>
<td>EditDelete</td>
</tr>
<tr role="row" class="even">
<td><img src="/Content/Uploaded//Profile//MasterAdmin/shpatel/download.jpg" class="profilepic img-responsive img-circle"></td>
<td>Shree A Patel</td>
<td>shpatel#mailinator.com</td>
<td>8767676766</td>
<td>shpatel</td>
<td><label class="chkcontainer pointer-none"><input type="checkbox" class="chk" checked="checked"><span class="checkmark"></span> </label></td>
<td><i class="fa fa-circle text-warning"></i></td>
<td>EditDelete</td>
</tr>
<tr role="row" class="odd">
<td><img src="/content/custom/img/default-user.jpg" class="profilepic img-responsive img-circle"></td>
<td>Ashish G Savaliya</td>
<td>ashish#mailinator.com</td>
<td>7897897890</td>
<td>asavaliya</td>
<td><label class="chkcontainer pointer-none"><input type="checkbox" class="chk" checked="checked"><span class="checkmark"></span> </label></td>
<td><i class="fa fa-circle text-warning"></i></td>
<td>EditDelete</td>
</tr>
</tbody>
Want to create xpath of the only 2,3,4, and 5 TD values from each row. see below image of all the required data which i want to print using the xpath.
//tr/td[position() >= 2 and position() <= 5]
Can anyone help me solving the below issue, Currently I am using below code to display the values where i am using the two <td> tags derive the conditional values , Is there any way I can do kind of else in one <td> tag?
<td class="features" ng-if="OrderStatus.length>0">
<span ng-repeat="indi in ServiceDisconnects.Service">{{indi.serviceID}}<br></span>
</td>
<td class="features" ng-if="!OrderStatus.length>0">
<span ng-repeat="indi in ServiceDisconnects.Service">{{indi.productID}}<br></span>
</td>
Why dont you check it inside ng-repeat
<td ng-repeat="indi in ServiceDisconnects.Service">
<span ng-if="OrderStatus.length>0" >{{indi.serviceID}}<br></span>
<span ng-if="!OrderStatus.length>0" >{{indi.serviceID}}<br></span>
</td>
Just add your condition in expression({{}})
<td ng-repeat="indi in ServiceDisconnects.Service">
<span>{{ OrderStatus.length>0? indi.serviceID:indi.productID}}</span><br>
</td>
This is what you are looking for. Modify as per your need.
<td class="features" >
<span ng-repeat="indi in ServiceDisconnects.Service">
<span ng-if="OrderStatus.length>0">{{indi.serviceID}}</span>
<span ng-if="!OrderStatus.length>0">{{indi.productID}}</span>
<br></span>
</td>
ok i have this code:
<table class="table">
<thead>
<tr>
<th>
Description
</th>
<th>
Amount
</th>
<th>
Period
</th>
</tr>
</thead>
<tbody data-ng-repeat="expense in expenses">
<tr class="danger">
<td>
<button data-ng-if="expense.Children.length > 0 && expense.ShowChildren" type="button" class="btn btn-default btn-sm" ng-click="expense.ShowChildren = false">
<span class="glyphicon glyphicon-minus" aria-hidden="true" ></span>
</button>
<button data-ng-if="expense.Children.length > 0 && !expense.ShowChildren" type="button" class="btn btn-default btn-sm" ng-click="expense.ShowChildren = true">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
{{ expense.Description }}
</td>
<td>
{{ expense.Amount }}
</td>
<td>
{{ expense.Period }}
</td>
</tr>
<tr class="active" ng-show="expense.ShowChildren" data-ng-repeat="child in expense.Children">
<td>
{{ child.Description }}
</td>
<td>
{{ child.Amount }}
</td>
<td>
{{ child.Period }}
</td>
</tr>
</tbody>
</table>
now i want to expense can have a child like u see in the photo
and this is work but when the child have child how I display that ?
i want to do the plus/minus button
I have been using a table from swimlane with much success lately. This is a feature that they support. This table is available here.
http://swimlane.github.io/angular-data-table/
You can do it, but you basically have to use expressions that insert the buttons where appropriate and ng-show/css to hide and display the rows when the buttons are clicked and a lot of other manual work.
I found a easy way to do it
Tree View: http://jsfiddle.net/brendanowen/uXbn6/8/
its better then other ways and more simple
I have a simple ng-repeat, that displays a list of statuses. I wanted to extend this ng-repeat to ng-switch to display a value depending on the status.
Current ng-repeat:
<td ng-repeat="myStatus in history.Status.slice(0, 12)">
{{ myStatus }}
</td>
With ng-switch:
<td ng-repeat="myStatus in history.Status.slice(0, 12)" ng-switch="myStatus">
<span ng-switch-when="1">test1</span>
<span ng-switch-when="2">test2</span>
<span ng-switch-when="3">test3</span>
<span ng-switch-when="4">test4</span>
<span ng-switch-when="5">test5</span>
<span ng-switch-when="6">test6</span>
<span ng-switch-when="7">test7</span>
<span ng-switch-default>Error</span>
</td>
However, witht eh above ng-switch, nothing is displayed.
Works at my end, here is the Plunker
However as a suggestion i would prefer to use a function expression instead of ng-switch.
<td ng-repeat="myStatus in history.Status.slice(0, 12)">
<span>{{getStatus(myStatus)}}</span>
</td>
getStatus is a function which would return the required information.
Use This
<td ng-repeat="myStatus in history.Status.slice(0, 12)" >
<span ng-switch="myStatus">
<span ng-switch-when="1">test1</span>
<span ng-switch-when="2">test2</span>
<span ng-switch-when="3">test3</span>
<span ng-switch-when="4">test4</span>
<span ng-switch-when="5">test5</span>
<span ng-switch-when="6">test6</span>
<span ng-switch-when="7">test7</span>
<span ng-switch-default>Error</span>
</span>
</td>
I'm trying to understand how I can work with multiple ng-repeat-end's.
I have a table that shows 20 years worth of data, split into 5 year chunks.
Each row on the table displays 5 years worth of data. This is how I am displaying the first 1-5 years.
<table>
<tbody>
<tr ng-repeat="history in HistoryCategory.Category[key]">
<th>{{ history.CompanyName }} 1-5 years</th>
<td ng-repeat="mycredits in history.Histories.slice(0, 5)" ng-switch="mycredits.Status">
<span ng-switch-when="0">Some text</span>
<span ng-switch-when="1">Some text</span>
<span ng-switch-when="2">Some text</span>
<span ng-switch-when="3">Some text</span>
<span ng-switch-when="4">Some text</span>
<span ng-switch-when="null">null</span>
<span ng-switch-default>Error</span>
</td>
</tr>
</tbody>
</table>
<div ng-repeat-end class="scroll-btns">
<div class="scroll-btns">
<div class="scroll-left icon-left" ng-click="scrollLeft()"></div>
<div class="scroll-right icon-right" ng-click="scrollRight()"></div>
</div>
</div>
At the bottom of the table is a DIV with class scroll-btns.. All this does is allow the above table to be scrollable and shows some icons to move left/right.
What I am trying to do now, is show year 6-10, 11-15 & 16-20 (in the same table). I have tried:
<table>
<tbody>
<tr ng-repeat-start="history in HistoryCategory.Category[key]">
<th>{{ history.CompanyName }} 1-5 years</th>
<td ng-repeat="mycredits in history.Histories.slice(0, 5)" ng-switch="mycredits.Status">
<span ng-switch-when="0">Some text</span>
<span ng-switch-when="1">Some text</span>
<span ng-switch-when="2">Some text</span>
<span ng-switch-when="3">Some text</span>
<span ng-switch-when="4">Some text</span>
<span ng-switch-when="null">null</span>
<span ng-switch-default>Error</span>
</td>
<td ng-repeat="emptyCell in getEmptyCells(history.Histories.slice(0, 5).length)"></td>
</tr>
<tr ng-repeat-end>
<th>6 - 10 years</th>
<td ng-repeat="mycredits in history.Histories.slice(5, 10)" ng-switch="mycredits.Status">
<span ng-switch-when="0">Some text</span>
<span ng-switch-when="1">Some text</span>
<span ng-switch-when="2">Some text</span>
<span ng-switch-when="3">Some text</span>
<span ng-switch-when="4">Some text</span>
<span ng-switch-when="null">null</span>
<span ng-switch-default>Error</span>
</td>
</tr>
<tr ng-repeat-end>
<th>11 - 15 years</th>
<td ng-repeat="mycredits in history.Histories.slice(10, 15)" ng-switch="mycredits.Status">
<span ng-switch-when="0">Some text</span>
<span ng-switch-when="1">Some text</span>
<span ng-switch-when="2">Some text</span>
<span ng-switch-when="3">Some text</span>
<span ng-switch-when="4">Some text</span>
<span ng-switch-when="null">null</span>
<span ng-switch-default>Error</span>
</td>
</tr>
</tbody>
</table>
<div ng-repeat-end class="scroll-btns">
<div class="scroll-btns">
<div class="scroll-left icon-left" ng-click="scrollLeft()"></div>
<div class="scroll-right icon-right" ng-click="scrollRight()"></div>
</div>
</div>
With the above I am seeing a ng-repeat-start/end error and the text 6-10years and 11-15years are not displaying.
However, if I only have the one ng-repeat-end (for example for 6-10years) and not the second, the application displays as expected.
**** RESOLVED ****
Resolved by having 2 tags... One with ng-repeat-start, and the other with ng-repeat-end. The tag with ng-repeat-end contains all rows that are 5+ years.
This
<tr ng-repeat-start="item in items"></tr>
<tr></tr>
<tr></tr>
<tr ng-repeat-end></tr>
will give you four tr's for each item.