title: Can't get Table Value from HTML
body: <p>I want to get this information here:</p>
  
  <p><a href="https://i.stack.imgur.com/g1wDj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g1wDj.png" alt="Here is what I want"></a></p>
  
  <p>Because I need it to fetch data from a database (primary key). But getting this value is tricky. When the document is ready, I run the following JavaScript to create the table:</p>
  
  <pre><code>function GetActivityAbstracts() {
      $.getJSON("http://localhost:52535/ExampleService.svc/GetTestTableData", function (testData) {
          var object = $.parseJSON(testData);
          var activityTable = $('#activityTable');
  
          // create HTML only by using $.map, it's better for perfs to generate all HTML before adding it into the dom
          var html = $.map(object, function (item, index) {
              //index here is used to generate unique ids
              var activityId = item['ActivityId'];
              var activityName = item['ActivityName'];
              var activityResponsible = item['Responsible'];
              var activityEstimatedSavings = parseFloat(item['EstimatedSavings']).toFixed(2);
              var activityEstimatedStart = item['EstimatedStart'];
              var activityEstimatedEnd = item['EstimatedEnd'];
              var activityStatus = item['Status'];
              // TODO: Make more user-friendly Status Descriptions instead of C# enum values.
              // move id  attr on on &lt;tr&gt; 
              return '&lt;tr id="activityId_' + index + '"&gt;' +
                      '&lt;td data-id="' + activityId + 
                      '" style = "vertical-align: middle; align: center;"&gt;'
                      + activityId + '&lt;/td&gt;' +
                      '&lt;td style = "vertical-align: middle;"&gt;' +
                      '&lt;div class="status-circle" data-toggle="tooltip" data-placement="right"' +
                      'title=" ' + activityStatus + '" style="background-color:' +
                      GetColumnColor(activityStatus) + ';"&gt;&lt;/div&gt;&lt;/td&gt;' +
                      '&lt;td id = "activityName_' + index + '" style = "vertical-align: middle;"&gt;'
                      + activityName + '&lt;/td&gt;' +
                      //Add index for ids here
                      '&lt;td style = "vertical-align: middle;"&gt;'
                      + activityResponsible + '&lt;/td&gt;' +
                      '&lt;td style = "vertical-align: middle;"&gt;'
                      + activityEstimatedSavings + '&lt;/td&gt;' +
                      '&lt;td style = "vertical-align: middle;"&gt;'
                      + activityEstimatedStart + '&lt;/td&gt;' +
                      '&lt;td style = "vertical-align: middle;"&gt;'
                      + activityEstimatedEnd + '&lt;/td&gt;' +
                      '&lt;/tr&gt;';
  
          });
          // Add HTML into activityTable
          activityTable.html(html);
          // Add event by using delegate event.
          debugger
          AddActivityAbstractOnClickEvent();
          $('#current-data-table').append(activityTable);
  
          /* This call is necessary because the table is added dynamically */
          $('[data-toggle="tooltip"]').tooltip();
      });
  }
  </code></pre>
  
  <p>Then I run this:</p>
  
  <pre><code>function AddActivityAbstractOnClickEvent() {
      $('#activityTable').on('click', 'tr', function () {
          var id = $(this).find('td').find('data-id').children();
          GetActivityFullDescription(id);
      });
  }
  
  function GetActivityFullDescription(id) {
      alert(id);
  }
  </code></pre>
  
  <p>As a simple test to make sure I got the right ID. But doing so doesn't get me the ID and I also feel I'm doing it overly complicated ._.</p>
  
  <p>Running the code above I see this value below in the debugger. But I can't access it and that's probably because I am doing it wrong to begin with.</p>
  
  <p><a href="https://i.stack.imgur.com/HUjOP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HUjOP.png" alt="I want this from the debugger"></a></p>
  
  <p>What I tried to get around this selection method I used, was to add "data-id" to the <code>&lt;td&gt;</code> element and then access it, but that didn't really work out...any ideas?</p>