Skip repeat for some columns in ng-repeat - json

I wanted to have a table like this using angular repeat
HTML
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
I have written an Angularjs code for the above as follows.
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr ng-repeat="row in rows">
<td>{{row.month}}</td>
<td>{{row.savings}}</td>
<td rowspan="2">{{row.holidaysavings}}</td>
</tr>
</table>
The td with rowspan gets repeated using ng-repeat which is not required.
How can I avoid this?


If you want the last td element only if row.holidaysavings is set (you didn't mention it, but it sounds like it!), you can use ngIf.
ngIf is similar to ngShow with the exception that it removes it from the DOM instead of setting display: none if the expression is falsy (for example 0 or the empty string), which sounds like what you want:
<td rowspan="2" data-ng-if="row.holidaysavings">{{row.holidaysavings}}</td>


Have you tried using ng-class? Something like <td ng-class='{rowSpanClass: row.holidaysavings >== "$50"}

Related

How do I give one single data to a whole column in a HTML table?

I am trying to create a table using HTML like this:
I wrote something like this:
<table>
<caption>Bill Summary</caption>
<tr>
<th rowspan="2">Months</th>
<th colspan="3">Bills</th>
<th rowspan="2">Total</th>
</tr>
<tr>
<td>Electricity</td>
<td>Water</td>
<td>Gas</td>
<td align="center">9925</td>
</tr>
<tr>
<td>January</td>
<td>1000</td>
<td>1000</td>
<td>975</td>
</tr>
<tr>
<td>February</td>
<td>1200</td>
<td>1200</td>
<td>975</td>
</tr>
<tr>
<td>March</td>
<td>1500</td>
<td>1100</td>
<td>975</td>
</tr>
</table>
But it gives out put like this:
I need to have that one total amount aligned in the center and a border like the first table image
Thanks in Advance.

I guess you could use the rowspan attribute here as well.
table, th, td {
border: 1px solid;
border-collapse: collapse;
}
<!DOCTYPE html>
<html>
<body>
<table>
<caption>Bill Summary</caption>
<tr>
<th rowspan="2">Months</th>
<th colspan="3">Bills</th>
<th rowspan="2">Total</th>
</tr>
<tr>
<th>Electricity</th>
<th>Water</th>
<th>Gas</th>
</tr>
<tr>
<td>January</td>
<td>1000</td>
<td>1000</td>
<td>975</td>
<td rowspan="3">9925</td>
</tr>
<tr>
<td>February</td>
<td>1200</td>
<td>1200</td>
<td>975</td>
</tr>
<tr>
<td>March</td>
<td>1500</td>
<td>1100</td>
<td>975</td>
</tr>
</table>
</body>
</html>

move total value to third row and modify like this
<td align="center" style="vertical-align: middle" rowspan="3" >9925</td>

HTML table row with double height

I am trying to add a row with double height to that of other row. But unable to make. Not sure what is wrong.
<table border="1">
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
</tr>
<tr>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</table>

You'll need some css to set the height of the row;
table td, tr {
height: 30px;
}
table td, tr {
height: 30px;
}
<table border="1">
<tbody>
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
</tr>
<tr>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</tbody>
</table>
Note; You should add a tbody to your table; What is the purpose for HTML's tbody?

Are you trying to do that ?
<table border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td rowspan="2">A4/B4 <br>(2 rows)</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
<tr>
<td>C1</td>
<td colspan="2">C2/C3 <br>(2 cols)</td>
<td>C4</td>
</tr>
</table>

The rowspan property should only be used if you are trying to have one cell appear across two rows (as if you are using the Merge Cells functionality on Excel). If you want to make one row twice as high as the other, this is a display property and should be done with css or inline styling. The middle (row) should also be removed.
If this is just a general example and you need to use it on something more complex. If you use rowspan on say 1 element, you will need to make sure that the following row has 1 less td element otherwise it will not display correctly.
<table border="1">
<tr style="height: 50px">
<td >A1</td>
<td >A2</td>
<td >A3</td>
<td >A4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</table>

Force column content to be `text-align: right`

What is the best way - if there is any at all, without using js - to force all td that belong to one col to obtain properties that are specified in the col?
A simple
<col style='text-align:right' />
does not seem to have any impact on the underlying table cells content.

Using css and nth-child(column-index)
table tbody td:nth-child(2){
text-align: right;
}
<table border=1>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>

Use style="float: right;" in the tag which you want to align the right side.

XPath - getting data including HTML tags

I have Wordpress with Web Scraper tool (PHP in background) that uses XPath to retreive data from other websites.
I'm facing a problem where I get all needed data, but these data are stripped from HTML tags.
XPath formula I'm using:
//table/tbody/tr[td//text()[contains(., 'FFF')]]
Data I'm using:
<table id="myTable">
<thead>
<tr>
<th>#</th>
<th>First</th>
<th>Second</th>
<th>G</th>
<th>Z</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>D</td>
<td>FFF</td>
<td class="txt-c">6</td>
<td class="txt-c">0</td>
<td class="txt-c">0</td>
</tr>
<tr>
<td>2.</td>
<td>C</td>
<td>YYY</td>
<td class="txt-c">4</td>
<td class="txt-c">1</td>
<td class="txt-c">0</td>
</tr>
<tr>
<td>3.</td>
<td>B</td>
<td>ZZZ</td>
<td class="txt-c">4</td>
<td class="txt-c">0</td>
<td class="txt-c">0</td>
</tr>
<tr>
<td>4.</td>
<td>A</td>
<td>FFF</td>
<td class="txt-c">3</td>
<td class="txt-c">0</td>
<td class="txt-c">0</td>
</tr>
</tbody>
</table>
Result I'm getting:
1. D FFF 6 0 0 4. A FFF 3 0 0
Result I need:
<tr>
<td>1.</td>
<td>D</td>
<td>FFF</td>
<td class="txt-c">6</td>
<td class="txt-c">0</td>
<td class="txt-c">0</td>
</tr>
<tr>
<td>4.</td>
<td>A</td>
<td>FFF</td>
<td class="txt-c">3</td>
<td class="txt-c">0</td>
<td class="txt-c">0</td>
</tr>
Tool I'm using: https://wordpress.org/plugins/wp-web-scraper/
Exact shortcode I'm using in wordpress (url changed):
[wpws url='https://myweb.comm' query='%2F%2Ftable%2Ftbody%2Ftr%5Btd%2F%2Ftext()%5Bcontains(.%2C%20%27FFF%27)%5D%5D' output='html' query_type='xpath' querydecode='1']
All I need is same filtered HTML-tagged table.
Thank you for answers.

Thank you for your thoughts.
I have finally managed to get it working. The plugin itself is working fine. Only problem was missing table pair tag in Wordpress post where shortcode is used.
Solution:
<table>
[wpws url='https://yoururl.com' query='your query' output='html' query_type='xpath']
</table>

HTML code to give heading names to table having <th colpsan=2></th>

I want to implement something like this as attached in the image file... In HTML code..
Can anyone please help..
Table-Format

Try to learn from learning sites like w3schools
Here is the HTML for a table with colspan:
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td>Sl</td>
<td colspan="2">val</td>
</tr>
<tr>
<td>1</td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>2</td>
<td>February</td>
<td>$100</td>
</tr>
</table>