title: JQuery get values from html table
body: <p>I am attempting to pull data from a dynamic table using JQuery, but every way I've tried turns the values into something else (the below code will return an "l" instead of the N/A I was expecting.  I have tried using .each and .map as the function as well as .val .html and as you can see .text to pull the data.  I am stuck as to why and what I am doing wrong.  Any help would be greatly appreciated.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;table id="attendees" class="attendees"&gt;
      &lt;thead&gt;
          &lt;tr style="border-bottom: double;border-color: #007fff" ;=""&gt;
              &lt;th&gt;Full Name&lt;/th&gt;
              &lt;th&gt;Membership Type&lt;/th&gt;
              &lt;th&gt;Membership Expiration Date&lt;/th&gt;
              &lt;th&gt;Free Vouchers&lt;/th&gt;
              &lt;th&gt;Classes From Pack Remaining&lt;/th&gt;
              &lt;th&gt;Yelp Check in&lt;/th&gt;
              &lt;th&gt;Payment Option&lt;/th&gt;
              &lt;th&gt;Remove&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr class="data"&gt;
              &lt;td&gt;Students Name&lt;/td&gt;
              &lt;td&gt;N/A&lt;/td&gt;
              &lt;td&gt;N/A&lt;/td&gt;
              &lt;td&gt;0&lt;/td&gt;
              &lt;td&gt;0&lt;/td&gt;
              &lt;td&gt;Yes&lt;/td&gt;
              &lt;td&gt;
                  &lt;ul id="list"&gt;
                      &lt;select id="payment" name="payment"&gt;
                          &lt;option&gt;Cash/Credit&lt;/option&gt;
                          &lt;option&gt;Free Voucher&lt;/option&gt;
                          &lt;option&gt;Yelp Check-in&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/ul&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;div&gt;&lt;a href="#" class="remove"&gt;&lt;p&gt;Remove&lt;/p&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>JQuery</strong></p>
  
  <pre><code>$("#submit").live('click', function (e) {
             $("#attendees tr.data").map(function (index, elem) {
                 var x = $(this);
                 var cells = x.find('td');
                 var $data = cells.text();
                 //alert($data[1]);
                  if ($data[1] == "N/A") {
                  alert(true);    
                 }
  
            });
              e.preventDefault();
  
          });
  </code></pre>
  
  <p><strong>Final Solution</strong></p>
  
  <p>Thanks first of all to everyone who chimed in, I honestly learned a little something from each persons answer.  In the end this is what I settled on below.  In hindsight I probably should of given a more thorough description on what I was attempting to accomplish.  Which was to scan multiple rows of data and do something based on the info found in each row.  To accomplish this I was forced to separate the <code>tr</code> and <code>td</code> <code>.each</code> functions.  This allowed me to scan row by row and still get the individual data.<br>
  Thanks again for everyone's help  especially @TechHunter</p>
  
  <pre><code>$("#submit").on('click', function (e) {
      e.preventDefault();
  
      $("#attendees tbody tr").each(function(i) {
      var $data= [];
      var x = $(this);
      var cells = x.find('td');
      $(cells).each(function(i) {
      var $d= $("option:selected", this).val()||$(this).text();
      $data.push($d);
      });      
          if ($data[1] == "N/A") {
             doSomething(); 
          }
      });
  });
  </code></pre>