I have item collection and I want to display each item object inside it in a table.
I have an image to display for each item as well.
To do so, i decided to use < tbody ng-repeat>, with that,
each image can occupy 3 rows cell
The issue comes when i need to display calculations in another column, which is an array object reside for each item.
you can see it here http://jsbin.com/nifazanehe/3/edit?html,css,js,output
with background color red.
the first two index of calculations object is hard coded and the rest is using ng-repeat. It solves the problem yet it looks buttugly! i hate it!
any suggestion?
other solutions i can think of :
to nest a table so i can do ng-repeat for that individual row
or maybe just a simple
< ul>< li ng-repeat>
after empty out that section of rows and columns using rowspan and colspan
you can work with np-repeat-start and ng-repeat-end directive
<table>
<tbody>
<tr ng-repeat-start="demo in vm.demoArray">
<td >{{demo.attr1}}</td>
<td>{{demo.attr2}}</td>
</tr>
<tr ng-repeat-end>
<td>{{demo.attr1}}</td>
<td>{{demo.attr2}}</td>
</tr>
</tbody>
</table>
Related
This is the html code I got:
<tr class="">
<td>
Go to Google
</td>
<td>02/10/20, 09:24 AM</td>
<td><button type="button" class="delete"></td>
</tr>
As you can see, the <tr> has three <td>s. Now, we are talking about a table, so we can assume that I have 100 of these <tr>s, with different values, but with the same structure. I would like to get the xpath of the third td (the button), using the value of <a> ('Go to Google'). How can I do that? I know I need to something like:
(//td//parent::a)
but evidently am not smart enough for that.
So you want to find the td element that has a child a with the text “Go to Google”, and then from this td find the next td that has a button element child.
In XPath this could look like this:
//td[a[text()="Go to Google"]]/following-sibling::td[button]
I want to achieve the below result without using jquery:
The table for which data should be scrollable for both axis.
The first column (table header) and first row of the table should be a fixed and with auto adjustable width for the column as per the data entered, similar to google spreadsheet
Above image shows what I have tried, the element containing the table has overflow-x: auto for the horizontal scroll and the element has style="display:block;height:400px;overflow-y:auto" for the vertical scroll for fixed table header. Also some elements contain mat-elements
Following is the html code for above image:
<div style="overflow-x:auto">
<table>
<thead>
<tr>
<th>#</th>
<th>Textbox_1</th>
<th>Textbox_1</th>
<th>Multichoice</th>
</tr>
</thead>
<tbody style="display:block;height:400px;overflow-y:auto">
<tr>
<td>1</td>
<td><div>John</div></td>
<td><div>Ron</div></td>
<td><div><mat-select><mat-option>One</mat-option>
<mat-option>Two</mat-option>
</mat-select>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Expected Result:
Any help is greatly appreciated.
I think it is not possible with CSS only. You might need support of JavaScript/JQuery. Check out this light weight plugin. It will help you for sure.
https://github.com/nitsugario/jQuery-Freeze-Table-Column-and-Rows
I am creating a table from data brought in as a JSON. This could be tonnes of data so I have a loop making all the rows in the table. I want to be able to click on a row and have that row expand showing the 2nd row with the list.extraInfo beneath it. Code looks like this:
<tbody *ngFor= " let list of lists, let i = index ">
<tr data-toggle="collapse" data-target="#{{i}}" class="clickable">
<td > something </td>
<td >{{i+1}}</td>
<td >{{list.name}}</td>
</tr>
<tr >
<td colspan="3">
<div id="{{i}}" class="collapse">
{{list.extraInfo}}
</div>
</td>
</tr>
</tbody>
I'm well aware that having data-target="#{{i}}" and id="{{i}}" doesn't work, but I cannot find anywhere what it is I need to put there to get every row of the table to have a separate and distinct id number so that the collapse feature works on the row that you click on.
As it stands it opens the extraInfo row for the 1st row regardless of which row I click on.
Curly brace syntax ({{ }}), also called interpolation, is meant for inner HTML. That is why {{i+1}} works in your td but not in your tr tag. To use a variable in a <tr> attribute, you don't need to wrap it in curly braces.
Secondly, the Can't bind to 'target' since it isn't a known property of 'tr'. error suggests that you need to use an attribute input binding instead:
<tr data-toggle="collapse" [attr.data-target]="'#'+ i" class="clickable">
I have the following table, and I wanted an expression to get the Percentage of the Category "OC". Is it possible to extract via XPath?
<tbody>
<tr>
<th class="textL">Category</th>
<th class="textR">No. of Items</th>
<th class="textR">Percentage</th>
</tr>
<tr class="data_row">
<td>OC</td>
<td class="textR">100</td>
<td class="textR">4.70</td>
</tr>
<tr class="data_row">
<td>FP</td>
<td class="textR">200</td>
<td class="textR">38.82</td>
</tr>
<tr class="data_row">
<td>FI</td>
<td class="textR">300</td>
<td class="textR">20.39</td>
</tr>
</tbody>
Selecting table entry based on value of another entry
To select the Percentage for the given "OC" Category:
//td[.='OC']/following-sibling::td[count(../..//th[.='Percentage']/preceding-sibling::th)]/text()
The above XPath will return
"4.70"
as requested.
Note that it will continue to work in the face of many changes, including row and column rearrangements as long as the targeted column continues to be named "Percentage" and remains after the Category column in the first column. One could even further generalize the expression by taking the difference of the positions of the two columns rather than assuming that Category is the first column.
Explanation: From the td that contains "OC", go over the number of siblings equal to the position of the "Percentage" column header, and there select the text in the correct sibling td.
Another XPath, also dependent on the order of the table's columns
//td[text()='OC']/following-sibling::td[2]
(explanation: take the second td sibling among the siblings of a td that contains text 'OC')
There are multiple XPaths for that. This one will work:
/tbody[1]/tr[2]/td[3]/text()
But it is based on the current layout of the XML
This works:
tbody/tr/td[. eq "OC"]/../td[#class eq "textR"][2]/text()
It assumes that the OC td element will be there, and that the value you want is the 2nd element with a "textR" attribute.
For logo and and menu I have table with two rows. And Picture of person. Upper part of the body is on first row and lower part is on second row. First row should have only one td that is logo of the site and in second row i should make multiple td Can someone help me with that task. I should use tables because my client want it.
You can use the colspan attribute on a <td> element to make it fit more than one column, just increase the number to however many columns you want it to fit across
<table>
<tr>
<td colspan="2">Long column</td>
</tr>
<tr>
<td>Small</td>
<td>Column</td>
</tr>
</table>
jou can use collspan (like in cell[2,0]), further info: http://reference.sitepoint.com/html/td/colspan