JQuery получить значения из таблицы html

Question

Я пытаюсь извлечь данные из динамической таблицы с помощью JQuery, но каждый путь, который я пробовал, превращает значения во что-то другое (ниже код вернет «l» вместо N/AI ожидал. Я пробовал использовать .each и .map как функцию, а также .val .html и, как вы можете видеть .text, чтобы вытащить данные. Я зациклен на том, почему и что я делаю неправильно. было бы весьма признателен.

HTML

<table id="attendees" class="attendees"> 
    <thead> 
     <tr style="border-bottom: double;border-color: #007fff" ;=""> 
      <th>Full Name</th> 
      <th>Membership Type</th> 
      <th>Membership Expiration Date</th> 
      <th>Free Vouchers</th> 
      <th>Classes From Pack Remaining</th> 
      <th>Yelp Check in</th> 
      <th>Payment Option</th> 
      <th>Remove</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="data"> 
      <td>Students Name</td> 
      <td>N/A</td> 
      <td>N/A</td> 
      <td>0</td> 
      <td>0</td> 
      <td>Yes</td> 
      <td> 
       <ul id="list"> 
        <select id="payment" name="payment"> 
         <option>Cash/Credit</option> 
         <option>Free Voucher</option> 
         <option>Yelp Check-in</option> 
        </select> 
       </ul> 
      </td> 
      <td> 
       <div><a href="#" class="remove"><p>Remove</p></a> 
       </div> 
      </td> 
     </tr> 
    </tbody> 
</table> 

JQuery

$("#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(); 

     }); 

Окончательное решение

Благодаря первую очередь всем, кто вмешался, я честно узнал кое-что от каждого лица отвечать. В конце концов, это то, о чем я остановился ниже. Оглядываясь назад, я, вероятно, должен был дать более подробное описание того, что я пытался выполнить. Который должен был сканировать несколько строк данных и делать что-то на основе информации, найденной в каждой строке. Для этого мне пришлось отделить функции tr и td.each. Это позволило мне сканировать ряд за строкой и получать отдельные данные.
Еще раз спасибо за помощь каждого особенно @TechHunter

$("#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(); 
     } 
    }); 
}); 

Answer 1

Простейшим ответ будет заключаться в том, чтобы добавить класс, когда вам нужно получить значение:

HTML

<table id="attendees" class="attendees"> 
    <thead> 
     <tr style="border-bottom: double;border-color: #007fff" ;=""> 
      <th>Full Name</th> 
      <th>Membership Type</th> 
      <th>Membership Expiration Date</th> 
      <th>Free Vouchers</th> 
      <th>Classes From Pack Remaining</th> 
      <th>Yelp Check in</th> 
      <th>Payment Option</th> 
      <th>Remove</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="data"> 
      <td class="inputValue">Students Name</td> 
      <td class="inputValue">N/A</td> 
      <td class="inputValue">N/A</td> 
      <td class="inputValue">0</td> 
      <td class="inputValue">0</td> 
      <td class="inputValue">Yes</td> 
      <td> 
       <ul id="list"> 
        <select id="payment" class="inputValue" name="payment"> 
         <option>Cash/Credit</option> 
         <option>Free Voucher</option> 
         <option>Yelp Check-in</option> 
        </select> 
       </ul> 
      </td> 
      <td> 
       <div><a href="#" class="remove"><p>Remove</p></a> 
       </div> 
      </td> 
     </tr> 
    </tbody> 
</table> 

Javascript

$("#submit").on('click', function (e) { 
    e.preventDefault(); 
    var data = $("#attendees tr.data").map(function (index, elem) { 
     var ret = []; 
     $('.inputValue', this).each(function() { 
      var d = $(this).val()||$(this).text(); 
      ret.push(d); 
      console.log(d); 
      if (d == "N/A") { 
       console.log(true); 
      } 
     }); 
     return ret; 
    }); 
    console.log(data); 
    console.log(data[0]); 
}); 

Это проще, и вы только получить значение, которое вы хотите получить. Быстро выполнять и поддерживать.

Fiddle here

Answer 2

пару вещей, предполагая, что вы используете последнюю версию JQuery, вы будете хотеть, чтобы заменить live() с on().

Кроме того, вам нужно перебирать ячейки, чтобы найти то, что вы ищете, просто поместить его в переменную не поможет.

$(document).on('click', '#submit' function (e) { 
    e.preventDefault(); 

    //time to iterate over the cells 
    $("#attendees tr.data td").each(function(i) { 
     if ($(this).text() == "N/A") { 
      alert("Found it on cell index: " +i); 
     } 
    }); 
}); 

Если вы хотите использовать .map(), чтобы вернуть массив из td текста, вы можете сделать:

var tdArray = $("#attendees tr.data td").map(function() { 
    return $(this).text(); 
}).get(); 

Answer 3

Вы должны использовать on() вместо live()(если ваша версия JQuery поддерживает)REASON. Просто Изменив JQuery немного, как это, и она работала :

JQuery-

$("#submit").on('click', function (e) { 

     $("#attendees tr.data").map(function (index, elem) { 
      $(this).find('td').each(function(){ 
      var $data = $(this).html(); 
      alert($data); 
      if ($data == "N/A") { 
      alert(true);  
      } 
     }); 
     }); 
     e.preventDefault(); 

    }); 

UPDATE: -

Просто проверьте, есть ли переключатель в td.Если это так, то вы можете получить его, как показано ниже :

if($(this).find("select").length > 0) 
    { 
     alert("found select") 
     alert($(this).find("select").val()) 
    } 

Демо здесь : -FIDDLE (Обновленный один показывает значение, выбранное в переключателе)