Tried to get table's tr second td value but not working.I think closest is not working in chrome or firefox properly. I am using this script in angular 6.How to resolve this issue?
const target = e.originalEvent.toElement.closest('td');
Asked
Active
Viewed 229 times
0
Nila Vaani
- 203
- 1
- 8
- 27
-
please write html file too – miladfm Dec 19 '19 at 15:20
-
@miladfm: https://stackblitz.com/edit/angular-6maxqx?file=src/app/app.component.ts – Nila Vaani Dec 19 '19 at 15:22
-
Did you try any debugging at all? Are you sure `target` is is grabbing a `tr` element correctly? – Stephen M Irving Dec 19 '19 at 15:27
-
@StephenMIrving: e.originalEvent.toElement is working fine but closest is not working – Nila Vaani Dec 19 '19 at 15:29
-
@NilaVaani, What is the output of ```e.originalEvent.toElement```? – Maniraj Murugan Dec 19 '19 at 15:31
-
`closest` has decent browser compatibility: https://caniuse.com/#search=closest. What `console.log(e.originalEvent.toElement)` would print? then what `console.log(e.originalEvent.toElement.closest('tr')` prints – Loi Nguyen Huynh Dec 19 '19 at 15:32
-
Btw why would you want to directly manipulate the DOM while using Angular: https://www.reddit.com/r/javascript/comments/6btma7/whats_so_wrong_with_direct_dom_manipulation/ – Loi Nguyen Huynh Dec 19 '19 at 15:34
-
e.originalEvent.toElement.closest('div') is working fine but if i use tr or td is not working – Nila Vaani Dec 19 '19 at 15:35
-
@NilaVaani, Can you try my below given solution? That gives you how to fetch the data you wish from table ```tr``` and ```td```.. – Maniraj Murugan Dec 19 '19 at 15:36
-
@ManirajMurugan:you did not use any event – Nila Vaani Dec 19 '19 at 15:38
-
1@NilaVaani, THe solution is pure javascript form.. In stackblitz I could not able to get the line ```e.originalEvent.toElement.closest('div')``` executable.. Can you eloborate what should i need to do to view the console in ```onSelectType(e)``` I have tried inputting some text in select box but it doesn't run.. – Maniraj Murugan Dec 19 '19 at 15:40
-
Can you produce the code that `e.originalEvent.toElement.closest('div')` works meanwhile `e.originalEvent.toElement.closest('tr')` doesn't work please. – Loi Nguyen Huynh Dec 19 '19 at 15:49
-
@LoiNguyenHuynh: Yes..e.originalEvent.toElement.closest('tr') is not working – Nila Vaani Dec 19 '19 at 15:53
-
@NilaVaani meanwhile `e.originalEvent.toElement.closest('div')` is working? Can you produce the code demonstrates that. – Loi Nguyen Huynh Dec 19 '19 at 15:55
1 Answers
0
When reading the title of your question and looking at the option "Get ID" from your drop-down, I assume that you simply want to know how to write the ID of the current table row to component.selectedVal.
Since you're building individual table rows by iterating over the component.data array, the solution is straight forward. Just add below event handler to your p-dropdown element and get rid of the method component.onSelectType.
(onChange)="selectedVal= data"
Please have look at this StackBlitz
uminder
- 23,831
- 5
- 37
- 72