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>

ClickEvent (or query selector) does not work properly

I am trying to build small calculator using HTML/CSS and JS.
The thing is that when I am trying to select buttons of the calculator from HTML script and add EventListener to them, they are not working properly. Here is part of my HTML:
`<table class="table1">
<tr>
<td id="n-1">1</td>
<td id="n-2">2</td>
<td id="n-3">3</td>
</tr>
<tr>
<td id="n-4">4</td>
<td id="n-5">5</td>
<td id="n-6">6</td>
</tr>
<tr>
<td id="n-7">7</td>
<td id="n-8">8</td>
<td id="n-9">9</td>
</tr>
</table>`
And here is my event function:
document.querySelector(.table1 td).addEventListener('click',function(){
console.log('It works');
var z = this.value;
console.log(z);
});
The only time I am receiving the console output is when I click on first cell of table (1). I am not sure why when I click on the other cells (for example 3 or 7) this do not work.
Thanks!

querySelector() Only returns one element, in your case it returns the first td inside .table1
If you want to add the listener to all td's you must use querySelectorAll():
document.querySelectorAll('.table1 td').addEventListener('click',function(){
.... // The rest of your code
});
More info here: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Make a table cell editable by placing input box over td

I want to make a table cell editable on double click so that I can put some value in cell :
Currently I am placing a input box inside td on dblclick on it :
$('<input type="text" />').val(oldCellval).appendTo($this).end().focus().select();
$this is my td element in which I want to show input box on double click, On blur I am removing input box and setting new value back.
I would like to show input box over td element instead of inside it so that it will appear input is inside td element, because I am using a table library which only allows text inside td elements, on adding html element(input) inside td its not working properly. Any help is much appreciated.

For similar result you can use contenteditable
<table border="3">
<thead>
<tr>Heading 1</tr>
<tr>Heading 2</tr>
</thead>
<tbody>
<tr>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
</tbody>
</table>
Fiddle:https://jsfiddle.net/kpkjr7ev/

You can do something like this,using contenteditable attribute that you can avoid input tag
$('td').on({
'dblclick': function() {
$(this).prop('contenteditable', true);
},
'blur': function() {
$(this).prop('contenteditable', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border=1>
<thead>
<tr>Heading 1</tr>
<tr>Heading 2</tr>
</thead>
<tbody>
<tr>
<td>ddd</td>
<td>ddd</td>
</tr>
<tr>
<td>ddd</td>
<td>ddd</td>
</tr>
</tbody>
</table>

https://code.google.com/p/jquery-datatables-editable/
I think you should use this great plugin called JQuery Datatables
https://www.datatables.net/
This has a "editable" feature, https://editor.datatables.net/, working great, from where you can also update your MySQL DB :
https://code.google.com/p/jquery-datatables-editable/
You need to dive in and spend some time to master it. Once done it is a great tool for lots of table projects.

If you set contenteditable='true' in this way
this will probably not work in IE.
So I recommend you to add a div in td in this way
and in Js on double click of cell make the cell editable
$(this).find('#editdiv').prop('contenteditable', true)

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());

Remove table row that contains a table

I have html that displays a table similar to:
<table>
<tr>
<th>col1</th>
<th>col2</ht>
</tr>
<tr>
<td>0001</td>
<td>Test</td>
</tr>
<tr>
<td colspan="2" id="detailsTable">
<table>
<tr>
<th>one</th>
<th>two</th>
</tr>
<tr>
<td>xxxxxx</td>
<td>xxxxxxx</td>
</tr>
</table>
</td>
</tr>
There is a column of expand and contract buttons on the outer table so that the nested table is only shown when the user clicks to expand.
The expansion works and the table gets displayed. However when when I try and remove the row from the outer table that contains the child table it doesn't work.
I had code like:
var rowIndex = $(this).parent().parent().prevAll().length;
$("table[id$=gvParentAccounts] tr").eq(rowIndex + 1).remove();
If the row only contains text it works as I'd like and removes the row, however if like in this case the row contains a table it is unable to remove the row as required.
I'm using ASP.Net and jQuery for this.
Thanks
Alan.

How about:
$(this).parent().parent().remove();
I'm not sure if this is exactly what you have, but here's a JSFiddle demonstrating that it works:
http://jsfiddle.net/9TQG9/1/
EDIT: Actually this:
$(this).parents("tr").eq(0).remove();
would be much nicer and more reliable. See here:
http://jsfiddle.net/9TQG9/2/