CODEWITHSUNDEEP
javascriptjqueryhtml
Ricardo Raz
Ricardo Raz

Reputation: 523

jQuery selector not working on table

I want to access each td on the table but it returns nothing. I try to use the jquery each function like this:

$('div.daterangepicker > div.calendar-table > table.table-condensed > tr').each(function(index, element){ 
console.log(index); 
});

or this

$('table.table-condensed > tbody > tr').each(function(index, element){
 console.log(element);
});

Here's the html element where I want to use the jquery selector

<div class="daterangepicker dropdown-menu ltr single opensleft show-calendar">
      <div class="calendar left single">
        <div class="daterangepicker_input">
          <div class="calendar-table">
            <table class="table-condensed">
             <tbody>
               <tr>
                 <td class="weekend off available" data-title="r0c0">24</td>
                 <td class="off available" data-title="r0c1">25</td>
                 <td class="off available" data-title="r0c2">26</td>
                 <td class="off available" data-title="r0c3">27</td>
                 <td class="off available" data-title="r0c4">28</td><td class="off available" data-title="r0c5">29</td>
                 <td class="weekend off available" data-title="r0c6">30</td>
              </tr>
              <tr>
                 <td class="weekend available" data-title="r1c0">1</td>
                 <td class="available" data-title="r1c1">2</td>
                 <td class="available" data-title="r1c2">3</td>
                 <td class="available" data-title="r1c3">4</td>
                 <td class="available" data-title="r1c4">5</td>
                 <td class="available" data-title="r1c5">6</td>
                 <td class="weekend available" data-title="r1c6">7</td>
              </tr>
           </tbody>
          </table>
        </div>
      </div>
    </div>
    </div>

I made a codepen with the actual code: CodePen. I dunno why some answers which seems to be working doesn't work with my code.

Upvotes: 0

Views: 1990

Answers (8)

G. Nachtigal
G. Nachtigal

Reputation: 41

The actual Jquery script will be:

$('.table-condensed tr').each(function(index, element){
  $(element).find('td').each(function(i, e){
   console.log(e.innerHTML);
  });
  console.log('\n');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="daterangepicker dropdown-menu ltr single opensleft show-calendar">
      <div class="calendar left single">
        <div class="daterangepicker_input">
          <div class="calendar-table">
            <table class="table-condensed">
             <tbody>
               <tr>
                 <td class="weekend off available" data-title="r0c0">24</td>
                 <td class="off available" data-title="r0c1">25</td>
                 <td class="off available" data-title="r0c2">26</td>
                 <td class="off available" data-title="r0c3">27</td>
                 <td class="off available" data-title="r0c4">28</td><td class="off available" data-title="r0c5">29</td>
                 <td class="weekend off available" data-title="r0c6">30</td>
              </tr>
              <tr>
                 <td class="weekend available" data-title="r1c0">1</td>
                 <td class="available" data-title="r1c1">2</td>
                 <td class="available" data-title="r1c2">3</td>
                 <td class="available" data-title="r1c3">4</td>
                 <td class="available" data-title="r1c4">5</td>
                 <td class="available" data-title="r1c5">6</td>
                 <td class="weekend available" data-title="r1c6">7</td>
              </tr>
           </tbody>
          </table>
        </div>
      </div>
    </div>
    </div>

Upvotes: 0

Andre Gusmao
Andre Gusmao

Reputation: 224

According to jquery documentation the E > F selector works only for first-level descendants. So you can find the tdusing:

$('table.table-condensed > tbody > tr > td')

//better option
$('table.table-condensed').find('td')


console.log($('table.table-condensed > tbody > tr > td').length);
console.log($('tr > td').length);
console.log($('table.table-condensed').find('td').length);

$('table.table-condensed').find('td').css({'background': 'red'})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="daterangepicker dropdown-menu ltr single opensleft show-calendar">
      <div class="calendar left single">
        <div class="daterangepicker_input">
          <div class="calendar-table">
            <table class="table-condensed">
             <tbody>
               <tr>
                 <td class="weekend off available" data-title="r0c0">24</td>
                 <td class="off available" data-title="r0c1">25</td>
                 <td class="off available" data-title="r0c2">26</td>
                 <td class="off available" data-title="r0c3">27</td>
                 <td class="off available" data-title="r0c4">28</td><td class="off available" data-title="r0c5">29</td>
                 <td class="weekend off available" data-title="r0c6">30</td>
              </tr>
              <tr>
                 <td class="weekend available" data-title="r1c0">1</td>
                 <td class="available" data-title="r1c1">2</td>
                 <td class="available" data-title="r1c2">3</td>
                 <td class="available" data-title="r1c3">4</td>
                 <td class="available" data-title="r1c4">5</td>
                 <td class="available" data-title="r1c5">6</td>
                 <td class="weekend available" data-title="r1c6">7</td>
              </tr>
           </tbody>
          </table>
        </div>
      </div>
    </div>
    </div>

Upvotes: 0

Farhad Bagherlo
Farhad Bagherlo

Reputation: 6699

$('table.table-condensed  tbody  tr').each(function(){
    $(this).find("td").each(function(key,value){
      $(".result").append($(value).text()+" | ");
    });
    $(".result").append("<hr>");
});
.result{color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="daterangepicker dropdown-menu ltr single opensleft show-calendar">
      <div class="calendar left single">
        <div class="daterangepicker_input">
          <div class="calendar-table">
            <table class="table-condensed">
             <tbody>
               <tr>
                 <td class="weekend off available" data-title="r0c0">24</td>
                 <td class="off available" data-title="r0c1">25</td>
                 <td class="off available" data-title="r0c2">26</td>
                 <td class="off available" data-title="r0c3">27</td>
                 <td class="off available" data-title="r0c4">28</td><td class="off available" data-title="r0c5">29</td>
                 <td class="weekend off available" data-title="r0c6">30</td>
              </tr>
              <tr>
                 <td class="weekend available" data-title="r1c0">1</td>
                 <td class="available" data-title="r1c1">2</td>
                 <td class="available" data-title="r1c2">3</td>
                 <td class="available" data-title="r1c3">4</td>
                 <td class="available" data-title="r1c4">5</td>
                 <td class="available" data-title="r1c5">6</td>
                 <td class="weekend available" data-title="r1c6">7</td>
              </tr>
           </tbody>
          </table>
        </div>
      </div>
    </div>
    </div>
    <hr>
    <div class="result"></div>

Upvotes: 1

Jo&#227;o Cunha
Jo&#227;o Cunha

Reputation: 3766

Your selector is both wrong and unnecessarily long. The > "child combinator" selector will only select immediate children, hence ignoring the element you're after. Learn more about the child combinator selector at Mozilla.

Always try using a shorter, direct selector, for example:

$('.your-table tr');

Upvotes: 0

brk
brk

Reputation: 50291

You need to loop each td for a tr.The first .each will iterate each tr.Again loop each tr to get td

$('table.table-condensed  tr').each(function(index, element) {
  $(element).each(function(el, em) {
    console.log($(em).text())
  })
});
or this $('table.table-condensed > tbody > tr').each(function(index, element) {
  console.log(element);
}

);
Here's the html element where I want to use the jquery selector
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="daterangepicker dropdown-menu ltr single opensleft show-calendar">
  <div class="calendar left single">
    <div class="daterangepicker_input">
      <div class="calendar-table">
        <table class="table-condensed">
          <tbody>
            <tr>
              <td class="weekend off available" data-title="r0c0">24</td>
              <td class="off available" data-title="r0c1">25</td>
              <td class="off available" data-title="r0c2">26</td>
              <td class="off available" data-title="r0c3">27</td>
              <td class="off available" data-title="r0c4">28</td>
              <td class="off available" data-title="r0c5">29</td>
              <td class="weekend off available" data-title="r0c6">30</td>
            </tr>
            <tr>
              <td class="weekend available" data-title="r1c0">1</td>
              <td class="available" data-title="r1c1">2</td>
              <td class="available" data-title="r1c2">3</td>
              <td class="available" data-title="r1c3">4</td>
              <td class="available" data-title="r1c4">5</td>
              <td class="available" data-title="r1c5">6</td>
              <td class="weekend available" data-title="r1c6">7</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Nisarg Shah
Nisarg Shah

Reputation: 14531

You don't have to select the td elements using the children selector. table.tablec-condensed td will select the td elements from all table elements having table-condensed class. Which should be enough.

You can make it slightly more specific by adding daterangepicker in the front: $('.daterangepicker table.table-condensed td')

$('.daterangepicker table.table-condensed td').each(function(index, element){
 console.log(element);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="daterangepicker dropdown-menu ltr single opensleft show-calendar">
      <div class="calendar left single">
        <div class="daterangepicker_input">
          <div class="calendar-table">
            <table class="table-condensed">
             <tbody>
               <tr>
                 <td class="weekend off available" data-title="r0c0">24</td>
                 <td class="off available" data-title="r0c1">25</td>
                 <td class="off available" data-title="r0c2">26</td>
                 <td class="off available" data-title="r0c3">27</td>
                 <td class="off available" data-title="r0c4">28</td><td class="off available" data-title="r0c5">29</td>
                 <td class="weekend off available" data-title="r0c6">30</td>
              </tr>
              <tr>
                 <td class="weekend available" data-title="r1c0">1</td>
                 <td class="available" data-title="r1c1">2</td>
                 <td class="available" data-title="r1c2">3</td>
                 <td class="available" data-title="r1c3">4</td>
                 <td class="available" data-title="r1c4">5</td>
                 <td class="available" data-title="r1c5">6</td>
                 <td class="weekend available" data-title="r1c6">7</td>
              </tr>
           </tbody>
          </table>
        </div>
      </div>
    </div>
    </div>

Upvotes: 0

ilrein
ilrein

Reputation: 3923

Using (class > childClass) means the child must be a DIRECT descendant (source). So you can't skip levels. Try using either

Closest()

or

Children()

Upvotes: 0

Fenton
Fenton

Reputation: 250842

The part of the selector:

table.table-condensed > tr

Says "get table rows that are direct children of my table" - but they are actually one more level down...

table.table-condensed > tbody > tr

And if you don't care so much about it being exactly so, you can just find all descendants:

table.table-condensed tr

Upvotes: 2

Related Questions