Can't loop in Table Rows with jQuery

Question

The conditions to apply a given action to each table row are :

contains the word "keyword"
value attribute of input tag equals to "2"

With this code, it works only with the first row :

$('table.tab-shopping-cart > tbody > tr.hproduct').each(function () {
        var qtty = $('input.basketstep_update').val();
        var product = $('td.col-description a').text().indexOf("keyword"); 
        if (product >=0 && qtty == 2) { 
        $(this).css('background-color','green') // dumb action to the row
        }
})

HTML

<table class="tab-shopping-cart">
    <tbody>
        <tr class="hproduct">
            <td class="col-description"><a>keyword</a></td>
            <td class="col-qty">
                <div>
                    <input class="basketstep_update" value="3">
                </div>
            </td>           
        </tr>
        <tr class="hproduct">
            <td class="col-description"><a>keyword</a></td>
            <td class="col-qty">
                <div>
                    <input class="basketstep_update" value="2">
                </div>
            </td>           
        </tr>
    </tbody>
</table>

Thanks for helping

raina77ow · Accepted Answer · 2015-09-22 11:43:53Z

2

You should supply a context to restrict those finders:

var qtty = $('input.basketstep_update', this).val();
var product = $('td.col-description a', this).text().indexOf("keyword");

... or, slightly better:

var $row = $(this);
var qtty = $row.find('input.basketstep_update').val();
var isProduct = $row.find('td.col-description a').text().indexOf("keyword") !== -1;
if (isProduct && +qtty === 2) {
  $this.css('background-color','green');
}

Otherwise the whole DOM will be searched for the elements matching the selectors, and the very first element of the findings will be used (that's why it works only for the first row - it contains those firsties).

edited Sep 22, 2015 at 11:43

answered Sep 22, 2015 at 11:38

raina77ow

107k16 gold badges205 silver badges240 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adrien Lafond Over a year ago

That's very clear, thank you and every fellow who contributed. Didnt know about the context parameter inside the jquery search !

Bhadresh · Accepted Answer · 2015-09-22 11:44:29Z

0

I hope this helpFul

  $('table.tab-shopping-cart > tbody > tr.hproduct').each(function () {

         var $currentRow = $(this);
         var qtty = $currentRow .find('input.basketstep_update').val();
         var product = $currentRow .find('td.col-description a').text().indexOf("keyword");

            if (product >=0 && qtty == 2) { 
                $currentRow.css('background-color','green') // dumb action to the row
            }

    })

answered Sep 22, 2015 at 11:44

Bhadresh

2613 silver badges14 bronze badges

Comments

Ashish Takrani · Accepted Answer · 2015-09-22 11:44:58Z

0

Try with below code:
$('table.tab-shopping-cart > tbody > tr.hproduct').each(function () {
        var qtty = $(this).find('input.basketstep_update').attr('value');
        var product = $("td.col-description a:contains('keyword')"); 
        if (product && qtty == 2) { 
            $(this).css('background-color','green') // dumb action to the row
        }
})

answered Sep 22, 2015 at 11:44

Ashish Takrani

213 bronze badges

Comments

Jai · Accepted Answer · 2015-09-22 11:48:58Z

As you can see you are missing the context of each loop with this but you can use with .css() using a callback function:

 $('table.tab-shopping-cart > tbody > tr.hproduct').css('background-color', function() {
   var qtty = $('input.basketstep_update', this).val();
   var product = $('td.col-description a', this).text().indexOf("keyword");
   if (product >= 0 && qtty == 2) {
     return 'green' // return dumb action to the row
   }
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tab-shopping-cart">
  <tbody>
    <tr class="hproduct">
      <td class="col-description"><a>keyword</a>
      </td>
      <td class="col-qty">
        <div>
          <input class="basketstep_update" value="3">
        </div>
      </td>
    </tr>
    <tr class="hproduct">
      <td class="col-description"><a>keyword</a>
      </td>
      <td class="col-qty">
        <div>
          <input class="basketstep_update" value="2">
        </div>
      </td>
    </tr>
  </tbody>
</table>

Leiko · Accepted Answer · 2015-09-22 11:49:47Z

0

The correct way to go is by using parseInt() for val() and also use the context selector within the each. Also remember to use === and not == when doing such comparison.

$('table.tab-shopping-cart > tbody > tr.hproduct').each(function() {
  var qtty = parseInt($(this).find('input.basketstep_update').val(), 10);
  var produitpneu = $(this).find('td.col-description a').text().indexOf("Pneu");
  if (produitpneu !== -1 && qtty === 2) {
    $(this).css('background-color', 'green')
  }
})

answered Sep 22, 2015 at 11:49

Leiko

9528 silver badges10 bronze badges

Comments

romuleald · Accepted Answer · 2015-09-22 11:49:59Z

You should use data to simplify your code

$('.tab-shopping-cart .hproduct').each(function() {
  var $row = $(this);
  var qtty = $row.find('.basketstep_update').val();
  if ($row.data('type') === 'pneu' && qtty == 2) {
    $(this).css('background-color', 'green')
  }
})

So your HTML looks like

  <table class="tab-shopping-cart">
    <tbody>
      <tr class="hproduct" data-type="pneu">
        <td class="col-description"><a>Pneu</a></td>
        <td class="col-qty">
          <div>
            <input class="basketstep_update" value="3">
          </div>
        </td>
      </tr>
      <tr class="hproduct" data-type="pneu">
        <td class="col-description"><a>Pneu</a></td>
        <td class="col-qty">
          <div>
            <input class="basketstep_update" value="2">
          </div>
        </td>
      </tr>
    </tbody>
  </table>

Also, avoid selector too strict, like table.foo or even div.bar > div.foo > div.bar it's too complicate, and your HTML could not change in the future.

Collectives™ on Stack Overflow

Can't loop in Table Rows with jQuery

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related