title: Get the table row data with a click
body: <p>I have a table and I wanted to allow user to click on any elements on the table to get the row of data. How do I do that?</p>
  
  <p>For example, I have a table like this in my view.</p>
  
  <pre><code>      &lt;table class="myTable"&gt;
        :     &lt;tr class="table"&gt;
                  &lt;th class="table"&gt;
                      Client ID
                  &lt;/th&gt;
                  &lt;th class="table"&gt;
                      Client Name
                  &lt;/th&gt;
                  &lt;th class="table"&gt;
                      Client Address
                  &lt;/th&gt;
              &lt;/tr&gt;
  </code></pre>
  
  <p>When I run the project I'll get something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/o5Oxf.png" alt="enter image description here"></p>
  
  <p>If user click on column Client Name: BBB. It will have a pop out window saying: Hi, you've selected Client ID: 002, Client Name: BBB, Client Add: xxxxx.</p>
  
  <p>User can click on all columns and it will still return the whole row of data in the pop out window. </p>
  
  <p>How to do this? Please help.</p>
  
  <p>HTML:
          @model IEnumerable
      @{
          ViewBag.Title = "Client";
          Layout = "~/Views/Shared/_Layout.cshtml";
      }</p>
  
  <pre><code>&lt;div class="body"&gt;
  
  &lt;div class="outer"&gt;
      &lt;div class="inner"&gt;
          &lt;table class="myTable"&gt;
              &lt;tr class="table"&gt;
                  &lt;th class="table"&gt;
                      Client Name
                  &lt;/th&gt;
                  &lt;th class="table"&gt;
                      Client Code
                  &lt;/th&gt;
                  &lt;th class="table"&gt;
                      Client Address
                  &lt;/th&gt;
                  &lt;th class="searchTable"&gt;
                      Client Lead Partner
                  &lt;/th&gt;
              &lt;/tr&gt;
              @foreach (var i in Model)
              {
                  &lt;tr class="myTable"&gt;
                      &lt;td class="table"&gt;@i.ClientName
                      &lt;/td&gt;
                      &lt;td class="table"&gt;@i.ClientCode
                      &lt;/td&gt;
                      &lt;td class="table"&gt;@i.ClientAddress
                      &lt;/td&gt;
                  &lt;/tr&gt;
              }
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>