How can I use Chameleon or Zope Page Templates to easily create CSS zebra striping? I want to add odd and even classes to each row in a table, but using a condition with repeat/name/odd or repeat/name/even looks rather verbose even with a conditional expression:
<table>
<tr tal:repeat="row rows"
tal:attributes="class python:repeat['row'].odd and 'odd' or 'even'">
<td tal:repeat="col row" tal:content="col">column text text</td>
</tr>
</table>
This gets especially tedious if you have multiple classes to calculate.
The Zope Page Templates implementation for the repeat variable has an under-documented extra parameter, parity, than gives you the string 'odd' or 'even', alternating between iterations:
<table>
<tr tal:repeat="row rows"
tal:attributes="class repeat/row/parity">
<td tal:repeat="col row" tal:content="col">column text text</td>
</tr>
</table>
This is also much easier to interpolate into a string expression:
tal:attributes="class string:striped ${row/class} ${repeat/row/parity}"
This works in Chameleon as well.
Related
Here is that list of JSONObject which is coming from Spring MVC Controller.
List<JSONObject> jsonDataList =
[{"key1":"value1","key2":"value2","key3":"value3","key4":"value4"}, {"key1":"value1","key2":"value2","key3":"value3","key4":"value4"}]
How to Iterate List of JSONObject in Thymeleaf using th:each?
Code IN HTML FILE below:=>
<tr th:each="data: ${jsonDataList}">
<td align="center"><span th:text="${data.key1}"></span></td> // getting exception here
</tr>
Getting Exception as :
Caused by: org.attoparser.ParseException: Exception evaluating SpringEL expression: "data.key1"
Here is one approach, but it makes some assumptions:
a) Each JSON object has the same number of entries (otherwise you could have a ragged table, containing different numbers of cells in each row).
b) Each JSON object has the same keys in the same order (if you want the table to have consistent column headings).
Also, the sample JSON in the question assumes all values are strings (value1 and so on). If you have different types of objects in your JSON values, then you will need to ensure they have the required string representations (e.g. using toString()).
The approach:
<table>
<tr>
<th:block th:each="heading : ${jsonDataList.get(0).names()}">
<th th:text="${heading}"></th>
</th:block>
</tr>
<tr th:each="item : ${jsonDataList}">
<th:block th:each="name : ${item.names()}">
<td th:text="${item.get(name)}"></td>
</th:block>
</tr>
</table>
The first <tr> section handles reading the JSON object keys from the first object in the list:
${jsonDataList.get(0).names()}
The final <tr> section is similar, but uses the keys to look up their related values:
${item.get(name)}
The resulting HTML gives you a simple table:
<table>
<tr>
<th>key1</th>
<th>key2</th>
<th>key3</th>
<th>key4</th>
</tr>
<tr>
<td>value1</td>
<td>value2</td>
<td>value3</td>
<td>value4</td>
</tr>
<tr>
<td>value1</td>
<td>value2</td>
<td>value3</td>
<td>value4</td>
</tr>
</table>
References:
The th:block tag is documented here.
The methods available to be used for JSONObject are documented here.
how about this?
<tr th:each="data: ${jsonDataList}">
<td align="center"><span th:text="[[${data.key1}]]"></span></td>
</tr>
So I have built a table in semantic-ui. very simple. however styles dont seem to apply to my table in certain aspects and i cant get the headings to map over the columns. see the below screenshot
the L column is fine but the others are a bit wonky and name is just well off. how can i adjust the styles so make this work?
I have tried to add a width to the div my table sits in but it just extends it without altering the table body or head
here is the code:
<div className="tableContainer">
<h1> Table </h1>
<table className="ui striped table">
<thead>
<tr>
<th className="headings">Ranks</th>
<th className="headings">Name</th>
<th className="headings">P</th>
<th className="headings">W</th>
<th className="headings">L</th>
</tr>
</thead>
<tbody>
{this.props.players.sort(function(a, b) {
return (a.rank) - (b.rank);
}).map(function(player, index) {
index +=1;
return <tr key={index} className="table-rows">
<td className="stats">{player.rank}</td>
<td className="stats">{player.name}</td>
<td className="stats">{player.played}</td>
<td className="stats">{player.wins}</td>
<td className="stats">{player.losses}</td>
</tr>
}, this)}
</tbody>
</table>
</div>
If you are working in Reactjs, you should use Semantic-UI's reactjs package: Semantic-UI React. In the Table section, you can see that certain properties are passed through props. You can set the column number with columns prop. And under the Table.Header tab, you can see that there's a className prop. You can use it to style your header. For reference, visit: Semantic-UI React Table.
Hi I want to make a row in a table inactive. Even if it is easy to hack by myself and add a custom css with the same colour of the inactive elements of my current theme I think it can be handles by bootstrap itself.
Any suggestions?
Bootstrap has a few elements you might find helpful:
Use contextual classes to change row colors:
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
http://getbootstrap.com/css/#tables-contextual-classes
Use contextual colors to change the color of text:
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
http://getbootstrap.com/css/#helper-classes-colors
The disabled element is primary for form elements and buttons. Check that out here,
I've created a custom class table-inactive:
.table-inactive td {
background-color: #ececec;
color: #b9b9b9;
}
Does the table row contain any inputs? If so, add the disabled HTML5 attribute to the input and perhaps make the text in that row greyed out to show it is inactive? Just an idea..
I.E.
<tr>
<td style="color:grey;">Sample Text</td>
<td><input type="text" disabled/></td>
</tr>
I have worked with Twitter Bootstrap a bit and did not see any of these features though.
Bootstrap 4 requires you to add "table-" to the class.
<tr class="table-danger">...</tr>
https://getbootstrap.com/docs/4.4/content/tables/#contextual-classes
I have 2 objects results and headers being headers generated from _.keys(result[0])
r{
data:{
headers:['head1','head2']
result:[
{head1:'content1',head2:'content2'}
{head1:'content3',head2:'content4'}
{head1:'content5',head2:'content6'}
]
}
I have to create a table dinamically so I create this:
<table class="ui celled table segment">
<thead>
<tr>
{{#headers}}
<th>{{.}}</th>
{{/headers}}
</tr></thead>
<tbody>
{{#result:i}}
<tr>
{{#headers:h}}
<td>{{????}}</td> <-- Here is where I fail to know what to put into
{{/headers}}
</tr>
{{/result}}
</tbody>
</table>
Can someone help me to fill in the blanks. So I can create a table that display the contents
If I remove the {{#headers}} part and I already know the elements <td>{{.head1}}</td> work perfectly the problem is that I'am generating different objects on the fly.
{{#result:i}}
<tr>
{{#headers:h}}
<td>{{result[i][this]}}</td>
{{/headers}}
</tr>
{{/result}}
The reason this works is that the <td> is repeated for each item in the headers array, because it's inside a headers section - so far, so obvious. Because of that, we can use this to refer to the current header (head1, head2 etc). The trick is to get a reference to the current row - and because you've already created the i index reference, we can do that easily with result[i]. Hence result[i][this].
Here's a demo fiddle: http://jsfiddle.net/rich_harris/dkQ5Z/
I need to apply style to last cell of last row of class "fose_table_row".
Table is next
<table class="fose_table">
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr class="fose_table_row">
<td>3</td>
<td>4</td>
</tr>
<tr class="fose_edit_row">
<td colspan="4">56</td>
</tr>
<tr class="fose_table_row">
<td>7</td>
<td>8</td>
</tr>
<tr class="fose_edit_row">
<td colspan="4">90</td>
</tr>
</table>
Rows of class fose_edit_row are not visible rows so I need last of fose_table_row to be styled.
I tried .fose_table .fose_table_row:last-child td:last-child and .fose_table tr.fose_table_row:last-child td:last-child but that doesn't seem to work. Last or of class fose_edit_row gets styled. What is right way to do this? And is it even possible?
W3C :last-child
The :last-child pseudo-class represents an element that is the last child of some other element.
:last-child will get the last element of its parent and then it will apply style if it has class .fose_table_row. So CSS can't solve your problem.
A possible jQuery solution:
$('table.fose_table').find('tr.fose_table_row').eq(-1).addClass('extra-style');
DEMO
The only way, currently, to solve your problem (as I noted in the comments) is to use JavaScript. Using plain JavaScript, rather than a library, I'd suggest:
var foseTableRows = document.querySelectorAll('.fose_table_row'),
last = foseTableRows[foseTableRows.length - 1];
console.log(last);
last.classList.add('lastFoseTableRow');
JS Fiddle demo.
Coupled with CSS, to apply the specific styles in order that they're reusable elsewhere without manipulating the style property of the specific nodes/elements.