Thymeleaf- Create dynamic id for table row - spring-boot

I am new to Thymeleaf and I am trying to create id for tr and getting dynamic rows.
Successfully getting table rows but I don't know hot to create id for each row in Thymeleaf.
<table class="table table-hover" id="table">
<thead style="background-color:#CCE5FF">
<tr>
<th>ID</th>
<th>Code</th>
<th>Created Date</th>
<th></th>
</tr>
</thead>
<tbody>
<tr th:each="emp,iterStat : ${empList}">
<td th:text="${emp.id}">ID</td>
<td th:text="${emp.mdrcode}">Code</td>
<td th:text="${emp.createDate}">Created Date</td>
<td>
<a id="editview" class="btn btn-sm btn-default" th:href="#{/}"><i class="fa fa-edit"></i> View</a>
</td>
</tr>
</tbody>
</table>

You can use th:id for that.
<!-- this would assign the emp.id to the id attribute of the tr.
<tr th:id="${emp.id}" th:each="emp,iterStat : ${empList}">
<td th:text="${emp.id}">ID</td>
<td th:text="${emp.mdrcode}">Code</td>
<td th:text="${emp.createDate}">Created Date</td>
<td><a id="editview" class="btn btn-sm btn-default" th:href="#{/}"><i class="fa fa-edit"></i> View</a></td>
</tr>
We can also add some text to the id:
<!-- this would assign someText + emp.id to the id attribute of the tr.
<tr th:id="'someText' + ${emp.id}" th:each="emp,iterStat : ${empList}">
<td th:text="${emp.id}">ID</td>
<td th:text="${emp.mdrcode}">Code</td>
<td th:text="${emp.createDate}">Created Date</td>
<td><a id="editview" class="btn btn-sm btn-default" th:href="#{/}"><i class="fa fa-edit"></i> View</a></td>
</tr>

Related

from 2 modals, open one modal base on if else condition

I have 2 modals (Modal1 & Modal2), in table after clicked on action button "edit" base on data, i need to open any one modal.
Say if age is less than 36 months then Modal 1 Else Modal 2 should open. Both modals have few data common and few are added newly.
This is my table code
<table id="cowcalfsummery" class="table table-bordered table-hover table" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Breed Type</th>
<th>Gender</th>
<th>Birth Date</th>
<th>Weight (Kg)</th>
<th>Age (in Months)</th>
<th>Maturity Date</th>
<th>Health Status</th>
<th>Action</th>
</tr>
<tbody>
#foreach ($cowcalfdata as $item )
<tr id="item{{$item->id}}">
<td>{{$item->calfID}}</td>
<td>{{$item->breedtype}}</td>
<td>{{$item->gendertype}}</td>
<td>{{ date('d-m-Y', strtotime ($item->birthdate) ) }}</td>
<td>{{$item->weight}}</td>
<td>{{$item->age}}</td>
<td>{{ date('d-m-Y', strtotime ($item->maturitydate) ) }}</td>
<td>{{$item->health}}</td>
<td>
<i class="fas fa-eye" title="View"></i>
**<button type="button"** class="editcowcalfmodal btn btn-success" data-info="{{$item->id}},{{$item->calfID}},{{$item->birthdate}},{{$item->age}},{{$item->breedtype}},{{$item->gendertype}},{{$item->health}},{{$item->status}},{{$item->color}},{{$item->weight}},{{$item->height}},{{$item->previousvaccinedone}},{{$item->maturitydate}}" data-toggle="modal" data-target="#editcowcalfmodal"><i class="far fa-edit" title="Edit"></i></button>
<button type="button" class="btn btn-danger deletecowcalfdatabtn" data-cowcalfid="{{$item->calfID}}"><i class="fas fa-trash" title="Delete"></i></button>
</td>
</tr>
#endforeach
</tbody>
</thead>
</table>
Thanks in Advance.
You want to create a blade If statement and check if $item->age is below 36.
if it is you want to show the first button, else show the second button with a different data-target to your second modal.
#if($item->age < 36)
<button type="button"
class="editcowcalfmodal btn btn-success"
data-info="
{{$item->id}},
{{$item->calfID}},
{{$item->birthdate}},
{{$item->age}},
{{$item->breedtype}},
{{$item->gendertype}},
{{$item->health}},
{{$item->status}},
{{$item->color}},
{{$item->weight}},
{{$item->height}},
{{$item->previousvaccinedone}},
{{$item->maturitydate}}"
data-toggle="modal"
data-target="#editcowcalfmodal">
<i class="far fa-edit" title="Edit"></i>
</button>
#else
<button type="button"
class="editcowcalfmodal btn btn-success"
data-info="
{{$item->id}},
{{$item->calfID}},
{{$item->birthdate}},
{{$item->age}},
{{$item->breedtype}},
{{$item->gendertype}},
{{$item->health}},
{{$item->status}},
{{$item->color}},
{{$item->weight}},
{{$item->height}},
{{$item->previousvaccinedone}},
{{$item->maturitydate}}"
data-toggle="modal"
data-target="#MySecondModal">
<i class="far fa-edit" title="Edit"></i>
</button>
#endif
You also have your table wrong.
You first want to create a <thead> (table header). fill it with table titles, close the <thead> and after that you create the <tbody> (table body) with the content of the item.
This should create a structure like this:
<table>
<thead>
<tr>
<th>Age</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>12</td>
<td>Cow 1</td>
</tr>
</tbody>
</table>
More information about tables and how to use them

print the last 5 articles in the dashboard

I would like to know how to put a list of the last 5 items in the dashboard using backpack?
I made the table
<div class="table-responsive">
<table class="table table-hover m-0 table-actions-bar">
<thead>
<tr>
<th>
<div class="btn-group dropdown">
<button type="button" class="btn btn-light btn-xs dropdown-toggle waves-effect waves-light"
data-toggle="dropdown" aria-expanded="false"><i class="mdi mdi-chevron-down"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</th>
<th>Titolo Post</th>
<th>Data</th>
<th>Stato</th>
<th>Categria</th>
<th>Azione</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
<td>
<h5 class="m-0 font-weight-medium"></h5>
</td>
<td>
<i class="mdi mdi-map-marker text-primary"></i>
</td>
<td>
<i class="mdi mdi-clock-outline text-success"></i>
</td>
<td>
<i class="mdi mdi-currency-usd text-warning"></i>
</td>
<td>
<i class="mdi mdi-pencil"></i>
<i class="mdi mdi-close"></i>
</td>
</tr>
</tbody>
</table>
</div>
I made the table inside the jumbotron.blade.php then the function that prints you on screen the last 5 posts I put it here? within the dashboard method?
$recentPost : Article::orderBy('id', 'desc')>limit(5)->get()
any other solution?
This line will get you the last 5 articles.
$articles = Article::orderBy('id', 'desc')->limit(5)->get();
You need to pass it to the view. Ex:
return view('dashboard', ['articles' => $articles]);
And loop the articles on the blade file table. Ex:
<table class="table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Title</th>
<th scope="col">Author</th>
<th scope="col">Date</th>
</tr>
</thead>
<tbody>
#foreach($articles as $article)
<tr>
<th scope="row">{{ $article->id }}</th>
<td>{{ $article->title }}</td>
<td>{{ $article->author }}</td>
<td>{{ $article->created_at }}</td>
</tr>
#endforeach
</tbody>
</table>

HTML signature leaves big spaces between rows (Gmail App from Outlook)

This is how it looks in GMail mobile app when sent from Outlook:
How can I avoid those big gaps?
My code is as follows:
<table id="sig" width='320' cellspacing='0' cellpadding='0' border-spacing='0' style="width:320px;margin:0;padding:0;">
<tr>
<td valign='top' width="120" height="48" style="width:120px;height:48px;margin:0;padding:0;vertical-align:top;">
<a style="border:none;text-decoration:none;">
<img moz-do-not-send="true" src="https://s3.amazonaws.com/media_crisalix/signatures/logo.jpg" alt="Crisalix" width='120' height='48' style="border:none;width:120px;height:48px;display:block;">
</a>
</td>
</tr>
<tr>
<td>
<table id="sig1" cellspacing='0' width='320' cellpadding='0' border-spacing='0' style="padding:0;margin:0;font-family:sans-serif,Arial,'Helvetica Neue',Helvetica;mso-line-height-rule:exactly;line-height:11px;color:#b0b0b0;border-collapse:collapse;-webkit-text-size-adjust:none;width:320px;">
<tr style="margin:0;padding:0;">
<td style="width:320px;margin:0;padding:0;font-family:sans-serif,Arial,'Helvetica Neue',Helvetica;white-space:nowrap;font-weight:600;line-height:1.6;font-size:13px;">
<span style="color:#137191">Jaime</span>
</td>
</tr>
<tr style="margin:0;padding:0;">
<td style="width:320px;margin:0;padding:0;font-family:sans-serif,Arial,'Helvetica Neue',Helvetica;white-space:nowrap;font-size:12px;line-height:1">
<span style="color:#555555">Chief Executive Officer</span>
</td>
</tr>
<tr>
<td valign='top' width="27" height='21' style="width:27px;height:1px;margin:0;padding:0;vertical-align:top;">
<img moz-do-not-send="true" src="https://s3.amazonaws.com/media_crisalix/signatures/separator.jpg" alt="Crisalix" width='27' height='21' style="border:none;width:27px;height:21px;display:block;">
</td>
</tr>
<tr style="margin:0;padding:0;">
<td style="width:320px;margin:0;padding:0;font-family:sans-serif,Arial,'Helvetica Neue',Helvetica;white-space:nowrap;font-size:12px;line-height:1.4;">
<div><span style="color:#137191;font-weight:bold">P / </span><span style="color:#555555;"></span></div>
<div><span style="color:#137191;font-weight:bold">A / </span><span style="color:#555555">Parc Scientifique (PSE-A) - EPFL1015</span></div>
<div> <span style="color:#555555"> Lausanne | Switzerland </span></div>
</td>
</tr>
<tr style="margin:0;padding:0;">
<td style="margin:0;padding:0;font-family:sans-serif,Arial,'Helvetica Neue',Helvetica;white-space:nowrap;font-weight:600;line-height:1.6;font-size:13px;width:320px;">
<span style="color:#137191;border:none;text-decoration:none!important;color:#137191;">www.crisalix.com</span>
</td>
</tr>
<tr>
<td valign='top' width="27" height='21' style="width:27px;height:1px;margin:0;padding:0;vertical-align:top;">
<img moz-do-not-send="true" src="https://s3.amazonaws.com/media_crisalix/signatures/separator.jpg" alt="Crisalix" width='27' height='21' style="border:none;width:27px;height:21px;display:block;">
</td>
</tr>
</td>
</table>
</tr>
<tr>
<td valign='top' width="230" height="225" style="width:230px;height:225px;margin:0;padding:0;vertical-align:top;">
<a href='http://www.crisalix.com' title="Crisalix" style="border:none;text-decoration:none;">
<img moz-do-not-send="true" src="https://s3.amazonaws.com/media_crisalix/signatures/signature-banner.jpg" alt="Crisalix" width='230' height='225' style="border:none;width:230px;height:225px;display:block;">
</a>
</td>
</tr>
</table>

Unable to select column with its header through XPath

My HTML
<table id="flex1" cellspacing="0" cellpadding="0" border="0">
<thead>
<tr class="hDiv">
<th width="6%">
<div class="text-left field-sorting asc" rel="IFSC_CODE"> IFSC CODE </div>
</th>
<th width="6%">
<div class="text-left field-sorting " rel="BRANCH_NAME"> BRANCH NAME </div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sorted" width="6%">
<div class="text-left">SACS011151</div>
</td>
<td width="6%">
<div class="text-left">check</div>
</td>
</tr>
<tr class="erow">
<td class="sorted" width="6%">
<div class="text-left">SACS011152</div>
</td>
<td width="6%">
<div class="text-left">Motiram</div>
</td>
</tr>
<tr class="erow">
<td class="sorted" width="6%">
<div class="text-left">SACS011158</div>
</td>
<td width="6%">
<div class="text-left">TESTNAME</div>
</td>
</tr>
</tbody>
</table>
My XPath
//table/tbody/tr/td[count(//table/thead/tr/th[.='BRANCH NAME']/preceding-sibling::th)+4]
Above XPath is Selecting all the column but not selecting its header name 'BRANCH NAME' and I want to select the header name with all its column.Any Idea how to do this?
You can simply use xpath union operator (|) to combine two xpath queries, for example* :
//table/tbody/tr/td[count(//table/thead/tr/th[.='BRANCH NAME']/preceding-sibling::th)+4]
|
//table/thead/tr/th[.='BRANCH NAME']
*: formatted into multiple lines just to make it visible without horizontal scroll

ng-repeat and the mouseover event

this seems like a scope problem, but i am not sure. my goal is to highlight a single row in a table. that implies that any previously highlighted row is returned to an unhighlighted state. the rows are created with the ng-repeat directive, like this:
<div id="myFedContents" style="height:320px" ng-controller="Controller2" class="scroller">
<table border="0" class="span12 table table-condensed" style="margin-left:0px" id="tblData">
<thead>
<tr><th>Year</th><th>Name</th><th>Useful Flag</th></tr>
</thead>
<tbody id="allRows">
<tr ng-repeat="item in itemlist | filter:thisText" ng-style="myStyle"> <td class="span1" valign="top"><a tabindex="-1" href="#">{{item.year}}</a></td>
<td id="{{item.id}}"> <a tabindex="-1" href="#" ng-click="myStyle={'background-color':'#cccccc'};">{{item.name}}</a>
</td> <td>
{{item.usefulflag}
</td> </tr>
</tbody>
</table>
</div>
i have code in a .js file that looks like this:
$("tr").mouseenter(function(){
alert("mouseenter");
});
the row in the table header reacts with the alert, but there is no reaction from the rows created by ng-repeat. how do i correct?
You can actually achieve this effect by using an ng-class in conjuction with ng-mouseenter and ng-mouseleave like so:
<div id="myFedContents" style="height:320px" ng-controller="Controller2" class="scroller">
<table border="0" class="span12 table table-condensed" style="margin-left:0px" id="tblData">
<thead>
<tr>
<th>Year</th>
<th>Name</th>
<th>Useful Flag</th>
</tr>
</thead>
<tbody id="allRows">
<tr ng-repeat="item in itemlist | filter:thisText" ng-style="myStyle" ng-class="highlightclass" ng-mouseenter="highlightclass='highlight'" ng-mouseleave="highlightclass=''">
<td class="span1" valign="top"><a tabindex="-1" href="#">{{item.year}}</a>
</td>
<td id="{{item.id}}"> <a tabindex="-1" href="#" ng-click="myStyle={'background-color':'#cccccc'};">{{item.name}}</a>
</td>
<td>
{{item.usefulflag}
</td>
</tr>
</tbody>
</table>
</div>
In this case you don't need the jquery syntax. If you haven't already you should also read https://stackoverflow.com/a/15012542/281335.

Resources