We Keep Coding

Angular maintaining the variable data for every click event

I am new to angular. I have a set of rows(tr) in the table generated using *ngFor, for each table row(tr) i have a click event, when user clicks on the tr i have expand/collapse functionality to show the data in table format below the tr
Now when the user clicks on the tr, i am calling an API which provides me the data specific to the clicked tr, I am setting that data in the variable which i am using to display in the expanded tr functionality. Until now everything works fine, but when i click on the next tr the data for the previously clicked tr also gets changed and displays the data for the current tr.
<ng-container *ngFor="let data of pageData">
<tr (click)="toggleTable(data.id)">
<td>{{data.x}}</td>
<td>{{data.y}}</td>
<td>{{data.z}}</td>
<td>{{data.a}}</td>
<td>{{data.b}}</td>
</tr>
<tr *ngIf="data.id===currDataid && openTable">
<td colspan="8" [ngClass]="{'p-2': true}">
<div>
...
<tr *ngFor="let idApiData of allApiData"> //problem here: id API data remains same for all parent tr when the user clicks on any parent tr
</tr>
</div>
</td>
</tr>
</ng-container>
All i need is the tr with *ngIf should display the data specific to the id passed, but when the user clicks on multiple tr, data for all the expanded functionality gets changed and displays data with respect to variable set.
is there any way by which i can maintain the data previously clicked tr ?

Add an expanded property to object to handle the expand collapse functionality. And you have to define a method to filter the details of the clicked row
<ng-container *ngFor="let data of data1">
<tr (click)="data.expanded = !data.expanded">
<td> {{ data.expanded ? '–' : '+'}} {{data.name}} </td>
<td> {{data.place}} </td>
<td> {{data.phone}} </td>
<td> {{data.hobbies}} </td>
<td> {{data.profession}} </td>
</tr>
<ng-container *ngIf="data.expanded">
<tr *ngFor="let details of subData(data)">
<td> {{details.datades.name}} </td>
<td> {{details.datades.hobbies}} </td>
<td> {{details.datades.profession}} </td>
</tr>
</ng-container>
</ng-container>
Filter data using the below function or you can create a pipe for that
subData(data) {
return this.data.filter(x => x.id=== data.id);
}

How to get the content of first cell of a table using jquery if table is made using Thymeleaf

The table being made dynamically using Thymeleaf. Each row of the table has a img link attached to it. On the click of which I want to get the selected rows img link first , second and third cell.
Relevant Table Code
<table class="table" id="tblDocType" style="padding: 20px 10px;">
<thead class="thead-dark">
<tr>
<th scope="col"> <b> Document Type </b></th>
<th scope="col"> <b> Practice Area </b> </th>
<th scope="col"><b> Retention Policy </b></th>
<th scope="col"> <b> Effective Date<br> Required </b></th>
<th scope="col"> <b> Termination Date<br> Required </b></th>
<th scope="col"> <b> Action</b></th>
</tr>
</thead>
<tr th:each="doctype,iterStat : ${dlist}">
<td th:text = "${doctype?.doctypes}"></td>
<td th:text = "${doctype?.practiceAreaId}"></td>
<td th:text = "${doctype?.retention_policy}"></td>
<td th:text = "${doctype?.effectiveDateRequired}"></td>
<td th:text = "${doctype?.terminationDateRequired}"></td>
<td>
<a href="#" th:name="${doctype?.practiceAreaId}" th:id="${iterStat.index}" onclick="deleteTrigger(this.id)" style="color: blue;">
<span class="glyphicon glyphicon-trash"></span>
</a>
</td>
</tr>
</table>
I am trying to get the cell values using jquery.
Relevant jquery code
function deleteTrigger(id){
var value=$("#tblDocType").closest("tr").find('td:eq(0)').text();
console.log("value=",value);
var doctypesjson={
"doctypes": id,
"practiceAreaId": pracaticeareaidfrombutton
};
}
In the console the value is coming blank.
Please help me if you know what can be done for the problem. Thank you in advance

Presently, it appears that your code is looking for the first TR, then within that the first TD. However, this won’t do anything as your first TR only contains TH.
In calling your deleteTrigger() function, you should pass through the element that was clicked
deleteTrigger(this); // use this for your TR lookup.
However, since you’re using jQuery already, it may make your life easier to abandon the delete function altogether and use a listener;
$(“tr”).click(function(){
$(this).find(“td”).first() // this will get the first td of a clicked row
$(this).find(“td”).eq(1) // this will get second td etc...
})

Capture cell values of checked rows

I have a table which has several columns holding text values and one column that’s a checkbox element. On a button click event, I’m trying to capture the text data for all elements across checked rows, but I’m having trouble accessing the text data of elements of the checked rows.
I’m able to get the checked rows of the original table by doing the following:
var table =$(‘#TableID tr’).filter(‘:has(:checkbox:checked)’).find(‘td’);
This works, and, logging the resultant jquery object in the console, Im able to see the tds of interest.
However, I’ve not been able to retrieve and store the text values of each td of the “table” jquery object. Here’s what I have so far:
table.find(“tbody tr”).each(function() { var $tds=$(this).find(‘td’),comp_name=$tds.eq(0).text(),pos=$tds.eq(1).text(),address=$tds.eq(2).text();});
etc, basically storing explicitly all attributes of a row, and this is done on the checked rows. But this returns nothing. No error, no values. I’ve also tried other approaches but nothing seems to work.
How can I capture this text row data for checked rows?
Sample row:
Company | Position | Years | Applicable?
Google | janitor | 3 | (checked)
Nokia | swe | 1 | (unchecked)
In the above we’d want the text values for each of the attributes of just the first row

The trick here is in the element to target and how to iterate them.
You were in fact quite close but your function wasn't returning anything.
$('button').click(function() {
var $trs = $('tr:has(:checkbox:checked)', 'table');
var res = [];
$trs.each(function() {
$td = $(this).children('td');
// This is the missing part
res.push({
comp: $td.eq(0).text(),
pos: $td.eq(1).text(),
add: $td.eq(2).text(),
})
})
console.log(res);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="company">Company 1</td>
<td class="position">Position 1</td>
<td class="address">Address 1</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td class="company">Company 2</td>
<td class="position">Position 2</td>
<td class="address">Address 2</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td class="company">Company 3</td>
<td class="position">Position 3</td>
<td class="address">Address 3</td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
<button>
Go to work
</button>

jQuery, Copy hyper-link value when clicked on it in table from one cell to another in the same row

I have the following HTML table:
Which has been generated using the following code:
<table id="myTable">
<thead>
<tr>
<th> ID</th>
<th> Name</th>
<th> Number</th>
<th> Values</th>
</tr>
</thead>
<tbody>
<tr>
<td> 1</td>
<td> House</td>
<td> 324342</td>
<td>
House <br/>
Cat <br/>
Dog <br/>
Street
</td>
</tr>
<tr>
<td> 2 </td>
<td> Car </td>
<td> 45353 </td>
<td>
House <br/>
Cat <br/>
Dog <br/>
Street
</td>
</tr>
<tr>
<td> 3 </td>
<td> Dog </td>
<td > 5353 </td>
<td>
House <br/>
Cat <br/>
Dog <br/>
Street
</td>
</tr>
<tr>
<td> 4</td>
<td> Street </td>
<td> 354235</td>
<td>
House <br/>
Cat <br/>
Dog <br/>
Street
</td>
</tr>
</tbody>
</table>
You can notice from the code that the values column are actually hyper-links.
How is it possible using jQuery that when i click on any of the hyper link in the value column, that value is moved to the name column from the same row. So for example in the third column, when i click on the " Cat " hyper link, the word "Cat" will be moved to the second column and replacing the word "Dog"
The important thing is that I cannot put 'id' tags around each word and then use jQuery to do the replacing based on the ID tag. The reason for that is because the table is SO big that if i generate a jquery script for every single row, it would be too much jquery on the page.
So i need a way for jQuery to identify the values based on the column and row number when i click on the link and then do the replacement based on that in the table with id "myTable". If I click in the "Value" column on the word "Cat" on the third row, then jQuery must find the row number i just clicked in and then replace the word "Dog" in the "Name" column of the same row.
http://jsfiddle.net/isherwood/Z6N65/

http://jsfiddle.net/isherwood/Z6N65/2/
$('#myTable a').click(function () {
$(this).closest('tr').find('td').eq(1).text($(this).text());
});
http://api.jquery.com/click
http://api.jquery.com/closest
http://api.jquery.com/find
http://api.jquery.com/eq
http://api.jquery.com/text
UPDATE:
If you need to be more specific about which anchors get the click function, do this:
http://jsfiddle.net/isherwood/Z6N65/4/
$('#myTable td').eq(3).find('a').click(function () {
$(this).closest('tr').find('td').eq(1).text($(this).text());
});
It will only apply the click function to anchors in column 4.

Along the lines of what isherwood posted, I think the better practice would be -
$('#myTable').on('click', 'a', function(){
$(this).closest('tr').find('td').eq(1).text($(this).text());
});
$('#myTable a') is going to put a jQuery object on every anchor element which is what the OP did not want. $('#myTable').on('click', 'a',... only puts the jQuery object on the #myTable element and bubbles up the anchor click events.
Here's the code with isherwood's fiddle - isherwood's fiddle modified
Here's more info about the .on jQuery object - jQuery On

Change the css class associated with a <TD> column based on value of column with javascript

I have a grid and for one of the columns i want to dynamically change the css used based on the value of another field in the resultset.
So instead of something like
<td class='class1'>
${firstname}
</td>
pseudo-wise I would like
{{if anotherColumnIsTrue }}
<td class='class1'>
${firstname}
</td>
{{/if}}
{{if !anotherColumnIsTrue }}
<td class='class2'>
${firstname}
</td>
{{/if}}
Is this thing possible..?

I think that jQuery makes this a lot easier.
It is very possible. I assume that you would want this for each row. Lets assume you have the following table:
<table id="coolTable">
<tr>
<td class="anotherColumn">True</td>
<td class="firstName">Chris</td>
</tr>
<tr>
<td class="anotherColumn">False</td>
<td class="firstName">Roger</td>
</tr>
</table>
You could go through rows and selectively add classes using the following code:
$(function(){
$("#coolTable tr").each(function(i,row){
if($(row).children("td.anotherColumn").html()=="True") // Any condition here
{
$(row).children("td.firstName").addClass("class1");
}else{
$(row).children("td.firstName").addClass("class2");
}
});
});
Have a look at this fiddle: http://jsfiddle.net/mrfunnel/LXq3w/2/