title: Get column value onClick in nested HTML Table [Javascript]
body: <p>I have a nested HTML table which expands on click. When I click inner row, I would like to get column value. Right now, I am getting the column value on click of outer row.
  For instance in the below image, when I click coding/testing, I would like to pass an alert as "Place". Right now, I get alert as "place" when I click city.</p>
  
  <p><a href="https://i.stack.imgur.com/Avggb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Avggb.png" alt="enter image description here"></a></p>
  
  <p>Component: </p>
  
  <pre><code> trigger(){
    var table: any = document.getElementById("table");
    var rows = table.rows;
    for (var i = 0; i &lt; rows.length; i++) {
    rows[i].onclick = (function (e) {
      var j = 0;
      var td = e.target;
      while( (td = td.previousElementSibling) != null ) 
          j++;
      alert(rows[0].cells[j].innerHTML);
   });
   }
   }
  </code></pre>
  
  <p><a href="https://stackblitz.com/edit/angular-7rdtdb?file=src/app/app.component.html" rel="nofollow noreferrer">Demo</a></p>