table with one header and data from Array inside a Map with thymeleaf - html

I want to create a table that its data is a Map< String, List < Object> >.
So the table has one header that and the rows should have the exact data.
Map.key
Object.item1
Object.item2
Object.item3
So since it is a List of Object i want one row for every Object of the List and the Map.key to be repeated.
So i need to iterate through keys like
<table>
<thead>
<tr>
<th>Code</th>
<th>Status</th>
<th>Flag</th>
<th>Message</th>
</tr>
</thead>
<tbody>
<tr th:each= "result : ${myMap}">
<td th:text="${result.key}"></td>
<td><table>
<tr th:each="obj: ${result.value}">
<td th:text="${not #lists.isEmpty(obj.errorList)}?'Error':'Warning'"></td>
<td th:text="${obj.flag}==true?'YES':'NO'"></td>
<td th:text="${not #lists.isEmpty(obj.errorList)}?${obj.warningList}:${obj.errorList}"></td>
</tr>
</table></td>
</tr>
</tbody>
</table>
but this solution places a table in a table. I want to use one header and iterate the lists and place the variables in the main table .

I think you're looking for a structure like this:
<table>
<thead>
<tr>
<th>Code</th>
<th>Status</th>
<th>Flag</th>
<th>Message</th>
</tr>
</thead>
<tbody>
<th:block th:each= "result : ${myMap}">
<tr th:each="obj: ${result.value}">
<td th:text="${result.key}" />
<td th:text="${not #lists.isEmpty(obj.errorList)}?'Error':'Warning'" />
<td th:text="${obj.flag}==true?'YES':'NO'" />
<td th:text="${not #lists.isEmpty(obj.errorList)}?${obj.warningList}:${obj.errorList}" />
</tr>
</th:block>
</tbody>
</table>

Related

Extract weather values from app.weathercloud.net

Hi all I would like to extract 25.8 value from this html block using xpath
the html code is from a weather website, https://app.weathercloud.net/
"<div id=""gauge-rainrate""><h3>Intensidad de lluvia</h3><canvas id=""rainrate"" width=""200"" height=""200""></canvas><div class=""summary"">
<table>
<tbody><tr>
<th> mm/h</th>
<th class=""max""><i class=""icon-chevron-up icon-white""></i> Máx </th>
</tr>
<tr>
<td class=""grey"">Diaria</td>
<td><a id=""gauge-rainrate-max-day"" rel=""tooltip"" title="""" data-original-title=""22/04/2022 00:00"">0.0</a></td>
</tr>
<tr>
<td class=""grey"">Mensual</td>
<td><a id=""gauge-rainrate-max-month"" rel=""tooltip"" title=""21/04/2022 02:15"">25.8</a></td>
</tr>
<tr>
<td class=""grey"">Anual</td>
<td><a id=""gauge-rainrate-max-year"" rel=""tooltip"" title=""21/04/2022 02:15"">25.8</a></td>
</tr>
</tbody></table>
</div></div>"
I use this expression to extract in a google spreadsheet cell
=IMPORTXML("https://app.weathercloud.net/d5044837546#current";"//a[#id='gauge-rainrate-max-month']")
apparently the code is correct but my output is always
-
I don't understand why...

Accessibility: How to configure "column header" announcement?

I'm working on optimizing a website for visually impaired. I have a table on the page in the following format -
<table>
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Surname</th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
Currently the screen reader is announcing "row 1 col 1 number" but the expectation is that it should announce "row 1 col 1 number column header" when its a element. How can I configure it? Setting role="columnheader" is not working.
It is scope you are looking for to associate columns and rows.
scope="col" will associate a table header as a column header.
You can also associate a row header if you wish with scope="row"
<table>
<caption>My table caption - don't forget this so people know what a table is for / about</caption>
<thead>
<tr>
<th scope="col">Number</th>
<th scope="col">Name</th>
<th scope="col">Surname</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>John</td>
<td>Smith</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Mike</td>
<td>Simmons</td>
</tr>
</tbody>
</table>
See https://www.w3.org/TR/WCAG20-TECHS/H63.html for more info on this technique.
p.s. don't forget to add a <caption> to your table!

Get Elements from IE Table via VBScript

I'm having some problems getting the elements I need from a web page table. The example code from the table is:
<tr>
<td colspan="11" class="anscalls">Answered Calls</td>
</tr>
<tr class="daterow">
<td>01/01/2001</td>
<td colspan="10"> </td>
</tr>
<tr class="item">
<td>User 1</td>
<td>#</td>
</tr>
<tr class="daterow">
<td>02/01/2001</td>
<td colspan="10"> </td>
</tr>
<tr class="changeditem">
<td>User 1</td>
<td>#</td>
</tr>
<tr class="changeditem">
<td>User 2</td>
<td>#</td>
</tr>
<tr class="daterow">
<td>03/01/2001</td>
<td colspan="10"> </td>
</tr>
<tr class="item">
<td>User 1</td>
<td>#</td>
</tr>
<tr class="daterow">
<td>04/01/2001</td>
<td colspan="10"> </td>
</tr>
<tr class="changeditem">
<td>User 1</td>
<td>#</td>
</tr>
<tr class="changeditem">
<td>User 2</td>
<td>#</td>
</tr>
<tr class="changeditem">
<td>User 3</td>
<td>#</td>
</tr>
<tr class="daterow">
<td>05/01/2001</td>
<td colspan="10"> </td>
</tr>
<tr class="item">
<td>User 1</td>
<td>#</td>
</tr>
I'm able to get the information between the "changeditem" class, which is what I need, but I also need the information from the "daterow" class to go along with the "changeditem" information. I'm currently using the following code:
For j = 0 To (.Document.getElementsByClassName("changeditem").Length - 1)
MsgBox .Document.getElementsByClassName("changeditem").Item((j + 0)).InnerText & Chr(44) & _
.Document.getElementsByClassName("changeditem").Item((j + 1)).InnerText
j = j + 1
Next
Which Outputs:
User1,#
User2,#
User1,#
User2,#
User3,#
I would need to loop through the entire table, which is much bigger than shown, and get the "daterow" class relevant to the "changeditem" classes, which I cannot figure out how to do.
What I'm aiming to get is:
02/01/2001,User 1,#
02/01/2001,User 2,#
04/01/2001,User 1,#
04/01/2001,User 2,#
04/01/2001,User 3,#
Thanks in advance.
Not a VBScript answer, but jQuery exists specifically for this kind of DOM manipulation and is very widely used, so I'll suggest it anyway. Using jQuery you could do something like the following. I am by no means fluent in jQuery and this will not output the exact desired output, but it illustrates the idea. You could
do all of this with standard DOM methods, jQuery just makes it much easier.
<script>
$(function() {
// get a reference to all changeditem rows
var $changedItem = $('tr.changeditem');
// loop the results
$changedItem.each(function() {
// contents of first td in tr
console.log( $(this).children('td').first().text());
// if there is a sibling tr daterow, get a reference
var $dateRow = $(this).next('tr.daterow');
// contents of first td in tr
console.log( $dateRow.children('td').first().text());
});
});
</script>

HTML tables - How to use rowspan properly?

I want to create a table like:
T1----T2----T3
--------------
B1
A1 B2 C1
B3
I'm using the following code:
<table class="table">
<thead>
<tr>
<th>T1</th>
<th>T2</th>
<th>T3</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">A1</td>
<tr>
<td>B1</td>
<tr>
<td>B2</td>
</tr>
<td>C1</td>
</tr>
</tbody>
</table>
Demo: https://jsfiddle.net/90yegr6f/
I have problems with C1. How to solve this?
You need to focus on doing things one row at a time. Deal with everything in the first row. Then start a new row and deal with everything in that.
So the first row contains A1, B1 and C1.
<tr>
<td>A1
<td>B1
<td>C1
The second row contains only B2
<tr>
<td>B2
and so on.
Now, you want the first and last cells of the first row to span multiple rows:
<tr>
<td rowspan=3>A1
<td>B1
<td rowspan=3>C1
Which gives you:
<table class=table>
<thead>
<tr>
<th>T1
<th>T2
<th>T3
<tbody>
<tr>
<td rowspan=3>A1
<td>B1
<td rowspan=3>C1
<tr>
<td>B2
<tr>
<td>B3
</table>

Angularjs, two data in a single row in table

I have a problem to implement table with thin width.
myData = { name:"Foo", age:11, sex:"M", weight:77, height:77, hobby:'gaming'}
I wanna table like belows.
<table>
<tr>
<td>name</td><td>Foo</td><td>age</td><td>11</td>
</tr>
<tr>
<td>sex</td><td>M</td><td>weight</td><td>77</td>
</tr>
<tr>
<td>height</td><td>77</td><td>hobby</td><td>gaming</td>
</tr>
</table>
Is it possible to show data like this using ngRepeat and its built-in variable?
The question John posted would solve your problem but I think it would be less of a hack to use ng-repeat-start and ng-repeat-end e.g.:
<table>
<tr ng-repeat-start="item in myData">
<td>name</td><td>{{item.name}}</td><td>age</td><td>{{item.age}}</td>
</tr>
<tr>
<td>sex</td><td>{{item.sex}}</td><td>weight</td><td>{{item.weight}}</td>
</tr>
<tr ng-repeat-end>
<td>height</td><td>{{item.height}}</td><td>hobby</td><td>{{item.hobby}}</td>
</tr>
</table>
If you have yr myData like this :
myData = [{ name:"Foo", age:11, sex:"M", weight:77, height:77, hobby:'gaming'},{ name:"Foo", age:11, sex:"M", weight:77, height:77, hobby:'gaming'},{ name:"Foo", age:11, sex:"M", weight:77, height:77, hobby:'gaming'}]
Then Your table will be like this :
<table>
<tr ng-repeat="row in myData">
<td>{{row.name}}</td>
<td>{{row.age}}</td>
<td>{{row.sex}}</td>
<td>{{row.weight}}</td>
<td>{{row.height}}</td>
<td>{{row.hobby}}</td>
</tr>
</table>