We Keep Coding

Using JavaScript variables in a Thymeleaf th:each

I am trying to build a table using th:each and have the whole row of the table clickable as a link through JavaScript.
<table>
<th:block th:each='user : ${list}'>
<script th:inline="javascript">
var userid = [[${user.id}]];
</script>
<tr onclick="location.href='user?id='+userid">
<td th:text="${user.firstName}"></td>
<td th:text="${user.lastName}"></td>
</tr>
</th:block>
</table>
However, the variable always refers to the latest value and not the one it was when the row was created. Is there a way to do that? Or maybe a different solution to what I'm trying to do?

No need for the th:block, you can simply put the th:each on the tr.
To accomplish the click, I recommend putting the id in a data attribute, and retrieving it in JavaScript. This should work for you:
<table>
<tr th:each="user : ${list}"
th:data-id="${user.id}"
onclick="location.href = 'user?id='+this.getAttribute('data-id')">
<td th:text="${user.firstName}"></td>
<td th:text="${user.lastName}"></td>
</tr>
</table>

You can avoid using JavaScript by adding an <a> element to each table cell (Inspired by https://stackoverflow.com/a/17147909/40064):
<table>
<th:block th:each='user : ${list}'>
<tr>
<td><a th:href="#{/user(id=${userid})}" th:text="${user.firstName}"></a></td>
<td><a th:href="#{/user(id=${userid})}" th:text="${user.lastName}"></a></td>
</tr>
</th:block>
</table>

angularjs ng-repeat and create two tr

Im creating a toggable element. Im in need to create two tr`s for each ng-repeat.
i want the result below, when clicking the first tr, then it will show the second.
How can i create two tr-`s for each ng-repeat without making multiple tables?
// repeat start
<tr class="rowlink" ng-repeat="i in vm.something" ng-click="show other">
<td><div >some info here</div></td>
<td><div >info</div></td>
<td><div >something here </div></td>
<td><div >49</div></td>
</tr>
<tr class="my toggable element">
<td colspan="4>
<div>some info from the ng-repeat here too.
</div>
</td>
</tr>
// first repeat done
EDIT:
i could make ng-repeat in the tbody, but then i get multiple tbodys, and i dont want that neither :|

Something Like this
<table>
<tr ng-repeat-start="item in items">
<td>am there</td>
</tr>
<tr ng-repeat-end>
<td>am there too</td>
</tr>
</table>
Here is the example

Use an HTML5 parent, like tbody, and use the ng-repeat over it:
<tbody class="rowlink" ng-repeat="i in vm.something" ng-click="show other">
<tr>
<td>some info here</td>
</tr>
<tr>
<td>some other info here</td>
</tr>
</tbody>
This way, you'll end with two tr for each iteration of ng-repeat.
Edit
OP has asked to not use multiple tbody, so this isn't the answer he wanted. Nevertheless, this should be useful anyway to someone who has not those needings.

Replace text in an element in HTML from another element (table) using jQuery

I want to replace a particular text in an HTML with another text from another element, which in this case is a table data.().
Here is my table:
<table id="hftable">
<tr>
<td id="hfpn1">V.Sehwag</td>
<td id="hfp1">DNB</td>
<td id="hfp1b">.-.-..-.</td>
</tr>
<tr>
<td id="hfpn2">G.Gambhir</td>
<td id="hfp2">DNB</td>
<td id="hfp2b">.-.-..-.</td>
</tr>
<tr>
<td id="hfpn3">A.Arora</td>
<td id="hfp3">DNB</td>
<td id="hfp3b">.-.-..-.</td>
</tr>
</table>
where batsman1 is the id of the element where the replacement is to take place or more specifically the table looks like:
<table id="current">
<tr>
<td id="batsman1">Batsman 1</td>
<td id="currentbat1"></td>
</tr>
<tr>
<td id="batsman2">Batsman 2</td>
<td id="currentbat2"></td>
</tr>
<tr>
<td>Bowler</td>
<td></td>
</tr>
</table>
I want to replace Batsman 1 (in the table with id="current") with V.Sehwag (in the table with id="hftable") (when someone clicks on a specific button on the page)
I have tried:
$("#batsman1").text($("#hfpn1").val());
This isn't working. Apart of showing "V.Sehwag" in place of "Batsman 1", it is showing me a blank space.
Any ideas where I am wrong? What is the correct and easy way to do this?
Thank You.

Try to use .text() in this context, You are invoking .val() function over a non-input element, obviously it wont work. And do remember that, .val() only works on input elements on which user can input something via the UI.
$("#batsman1").text($("#hfpn1").text());

The TD element does not have a value, it has text. Modify your code as follows:
$("#batsman1").text($("#hfpn1").text());
Here's the jsFiddle

Use the below, I hope this will help you out to fix the problem.
$("#batsman1").html($("#hfpn1").text());

Taking the count of number of 'table' tags using jquery

This is my HTML code
<div class="tableStyle myWebsiteTable">
<table cellspacing="0" cellpadding="0" id="site0" class="site active">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr class="websiteDetails">
<td colspan="5">
<div id="websiteDetails0" class="divWebsiteDetails" style="display: block;">
<table>
<tbody>
<tr id="190">
<td>index</td>
<td></td>
<td></td>
</tr>
<tr class="addPage">
<td align="center" colspan="5"></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr><!--Website Details-->
</tbody>
</table>
<table id="addNewSiteTable">
<thead>
<tr>
</tr>
</thead>
</table>
</div>`<br/>
Now table get added dynamically to this structure.I want to write some logic based on the no of table inside the first div.I tried doing this but did not work $('myWebsiteTable').children('table').length)
PLease suggest the correct way to achieve it
Thank you

You need to use . before class in Class Selector (“.class”)
Live Demo
$('.myWebsiteTable').children('table').length
Also make sure you have added jQuery and elements are added to DOM.
You may need to use find() as children will give you only first level childs where as find will get all the tables in descendants.
$('.myWebsiteTable').find('table').length

$('.myWebsiteTable').children('table').length
And if you actually want to count nested tables:
$('.myWebsiteTable table').length

i think it's class
http://api.jquery.com/class-selector/
$('.myWebsiteTable')

try this, this is more helpfull for you
Demo Here

Remove all but a specific row from a table

I want to remove all rows apart from the row with id 'row0' from a table:
<table class="mytable">
<tr id="row0" class="myrow">
<td>aaa</td>
</tr>
<tr class="myrow">
<td>bbb</td>
</tr>
<tr class="myrow">
<td>ccc</td>
</tr>
</table>
But the following JQuery code removes ALL rows:
$('.mytable').children().not('#row0').remove();
Could someone explain why this happens? I would think that the child with id 'row0' would be excluded, but obviously that's not the case.
I have found another way to do this but still curious why the above method doesn't work:
$('.mytable').find('tr:not(#row0)').remove();

Because the children of a table element are thead, tfoot or tbody elements. A tbody element is always created in the generated DOM, even if it is not explicitly written in the HTML code.
You can also do:
$('.mytable tr').not('#row0').remove();
or
$('#row0').siblings().remove();