I am new to front end and using thymeleaf. I am looking for an approach to build a dynamic form. I am sending a map from controller to front end (html), I am able to display the values of my map using below code with thymeleaf attributes
<tr class="row" th:each="element : ${elementMap}">
<td th:text="${element.key}"></td>
<td>
<input type="text" id=${element.keyth:name=${element.key} th:value="${element.value}" /><br>
</td>
</tr>
I need to display 4 columns in a row. Or If converting above Map to ArrayList is it possible to allow 4 columns in a row. But when I use th:each && th:text for iterating content of Arraylist how to mention 4 columns in a row (Any css style would be available)? Is there any other approach available to fix this ?
on your page you are iterating one line for each element
the columns are the td tags, which according to the code you informed are two columns per line (key and value).
but if you want to limit the number of columns, you can use css, but by the structure of your code, you have dynamic lines (1 line for each element of the list) and you only have two columns per line.
if the problem is too many columns, you can only put up to 4 td tags
Related
Normally angular material table groups radio buttons column wise, How can I achieve row wise grouping?
As per the angular material documentation on radio groups it states that
Radio-buttons should typically be placed inside of an
<mat-radio-group> unless the DOM structure would make that
impossible (e.g., radio-buttons inside of table cells).
So if you want to have a radio button group per row, then you would just use the name property to group these controls together (exactly how you would for an HTML input type="radio").
<tr>
<td></td>
<td>
<p>Escalation Teams</p>
</td>
<td>
<mat-radio-button value="1" name="escalationTeam"></mat-radio-button>
</td>
<td>
<mat-radio-button value="2" name="escalationTeam"></mat-radio-button>
</td>
</tr>
See my Stackblitz example as shown below:
Notice how for each row you can only check one radio at a time
I don't understand what you want to do. Do you want a column of radio buttons in a single table cell, or multiple rows each with a single radio button in the same column (this doesn't seem likely)? The image shows radio buttons in separate data columns in the same row. You can't have multiple data columns appear in a single view column and and row, so you would need a single data column contain the selected option, and the view for that cell to lay out the various radio options in a vertical format. Here is a stackblitz example.
I am using bootstrap to display and sort a table. I was wondering how/if I could implement a temporary arrow(or something) in each header in the table to indicate which direction it is being sorted.
Yes this is possible. For the header, add the following...
<table>
<thead>
<tr>
<th>Column 1 <span class="glyphicon glyphicon-sort"></th>
...
</tr>
</thead>
</table>
EDIT: I assume you actually want the icon to sort the table, as well.
This is dynamic behavior, so you won't be able to do this in pure HTML/CSS: you will need to use JavaScript. Here are the general steps that you would do to make this happen:
Store all of the table rows inside of a JavaScript variable
Inside the <th>, place another element, like a <span> or <img> that contains your arrow image.
Attach a click handler to the arrow, that sorts the array of table rows
After the array is sorted, use DOM API functions to remove the old table, create a new table, and then insert a new table in its place. Bootstrap usually is used with jQuery, so you can look at some jQuery functions to remove the table, build a new one (by going through the rows), and then render the built table to the page, in place of the old one.
There are a variety of libraries that do this, but you can accomplish it more simply by doing it yourself.
I need help creating a dynamic table in the format of a round robin competition using HTML and AngularJS. An array of strings will be given and then the table will be created based on how many names were in the list so part of the table will be generated dynamically and part of the table will always be the same. This is an example of a table that would be generated if I passed an array with 8 names. Only columns A, B, and C should have any information when the table is generated though I kept everything blank for simplicity's sake. The rest of the boxes should all be text input fields.
Until now most of the tables I have done have been pretty simple and I am a little out of my depth here, any help would be much appreciated.
Assuming you always have a full 8 teams this would get you started
<table>
<tr>
<th>club</th>
<th>team</th>
<th>#</th>
<th ng-repeat="item in items">{{$index+1}}</th>
<th>V</th>
<th>TS</th>
</tr>
<tr ng-repeat="item in items">
<td>{{item.club}}</td>
<td>{{item.team}}</td>
<td>{{item.rank}}</td>
<td ng-repeat="item in items" ng-class="{black:$index==$parent.$index}"></td>
<td><input ng-model="item.v"></td>
<td><input ng-model="item.ts"></td>
</tr>
</table>
DEMO
This is a really nice example of using nested ng-repeat elements.
Please see this plunker for a working demo.
The main trick for detecting when to black out a box is to use ng-init="$rowIndex=$index" on the outer ng-repeat (where we generate a row for each entry). This allows the inner ng-repeat (where we generate a column for each entry) to have an ng-class="{'blackout': $index==$rowIndex}"
I have a table representing data in a database and I'd like there to be checkboxes to the left so that the user can do operations on the selected items (ie delete, modify). My question is, how can I align the checkboxes to be to the left of the table?
<table border="2">
<tr>
<th>A bunch of headers</th>
</tr>
<tr>
<td>A row of items</td>
</tr>
A lot more rows
</table>
Pretty straitforward, I have no idea how to proceed with checkboxes, I tried to put a form around the table but that didn't work.
You can add a column that contains checkboxes only. Using td elements, they will be left-aligned by default.
However, checkboxes should be used to provide a control for selecting or not selecting some parameters, not for triggering actions. Consider using e.g. button elements for actions.
Use CSS to align them.
margin-left:100px;
float:left;
You could just create an "actions" column which you insert as the first column in your table that contains the checkboxes. That way all checkboxes are kept separate from the contents which makes formatting and manipulation via javascript easier.
Alternatively if you must use a form for each row you could do something like:
<td><input type="checkbox" /><span>Data...</span></td>
... but if you go the second route you loose the power of tables** & may as well go for a div only solution.
** for displaying tabular data; before someone shoots me down for table vs div for layouts.
I have a table that consists of multiple rows that each contain 5 cells, like this:
<tr>
<td></td>
<td>123456</td>
<td>statusText</td>
<td><a>linkText</a></td>
<td>editButton</td>
</tr>
The 123456 could be any string of random letters and numbers. I want to be able to select a link based on the contents of the second cell in the table. I've been trying something like this:
//tr[contains(td, '123456')]
to get me to the cell, but it either returns every row or nothing, depending on how I tweak the xpath.
I've been trying something like this:
//tr[contains(td, '123456')]
to get me to the cell, but it either
returns every row or nothing,
depending on how I tweak the xpath
You get what you asked for. The above XPath expression selects any tr element (row) in the document that has (at least one) td child whose string value contains '123456'.
But you want:
//tr/td[text() = '123456']
this selects every td element (cell) in the document, that has a text node child, whose string value is '123456'.
There can be different variations, depending on whether a td may have more than one text nodes and on whether the white space in a text node should be normalized, but the question doesn't provide any information if any of these apply in this particular case.
I'd research something like //tr[string(td[2]) = '123456']. If this does not work, I'd look up XPath axes.