How to get the ID of the closest TR of the TD clicked

I'm getting the current element clicked on an HTML Table with the OnClick event. See code:

procedure TUsers2Form.GetClickEvents;
var Element :TJSHTMLElement;
begin
   Element:= Document.GetHTMLElementById('UsersTable');
   Element.OnClick := function(Event :TJSMouseEvent):Boolean
                      begin
                         Grid_OnClick(Event);
                      end;
end;

function TUsers2Form.Grid_OnClick(Event :TJSMouseEvent):Boolean;
var CurId: string;
begin
   {Get the ElementId of the row clicked}
   CurId:= Event.TargetElement.GetAttribute('id');
end;

My problem is that the element clicked doesn't have an ID attribute because it is a TD element. Is the TR element ID attribute what I want to get.

Does anyone know how to get the ID of the closest TR of the TD clicked?

I found the next in Java Script, but I don't know how to do this in Delphi + TMS Web Core:

ShowMessage('target closest:', event.target.closest('tr').tagName);

Thanks!

I would assume it should be the parent element, i.e.
td.parentElement

Not always.

<div> or <span> are often direct parent elements.

Because of this, it is a good tool "closest".

In any case, I will investigate a recursive use of ParentElement until I find the one <TR>.

Thanks.

Ok! It is working!

Thanks.

function TUsers2Form.Grid_OnClick(Event :TJSMouseEvent):Boolean;
var CurId   :string;
      Element :TJSElement;
      TagName :string;
begin
   Element := Event.TargetElement.ParentElement;
   TagName := Element.TagName;
   while not(TagName ='TR') do begin
      Element := Element.ParentElement;
      TagName := Element.TagName;
   end;

   {Get the ElementId of the row clicked}
   CurId := Element.GetAttribute('id');
   
   ShowMessage(Format('The MOUSE was made click on %s', [CurId]));
end;
2 Likes