Pull HTML Value into Javascript Variable

Question

I have a table with multiple columns with one column being a checkbox. Whenever that is checked, it displays another column cell to the right of the table with an up/down spinner to set a value.

The problem I am having is that I cannot have the spinner go past the number that is in the Quantity column that I have. So I need to pull the current value of the Quantity column in the corresponding row into a javascript variable and use that with my spinner function. I have been able to get the value using getElementById but that only gets the first value in the table and does not work for any further values down in the table. I keep trying getElementsByClassName but am having no luck.

How could I do this successfully?

PHP/HTML:

<table id="merchTable" cellspacing="5" class="sortable">
    <thead>
        <tr class="ui-widget-header">
            <th class="sorttable_nosort"></th>
            <th class="sorttable_nosort">Loc</th>
            <th class="merchRow">Report Code</th>
            <th class="merchRow">SKU</th>
            <th class="merchRow">Special ID</th>
            <th class="merchRow">Description</th>
            <th class="merchRow">Quantity</th>
            <th class="sorttable_nosort">Unit</th>
            <th style="display: none;" class="num">Quantity #</th>
        </tr>
    </thead>
    <tbody>

        <?php foreach ($dbh->query($query) as $row) {?>

        <tr>
            <td class="ui-widget-content"><input type="checkbox" class="check" name="check"></td>
            <td class="loc ui-widget-content" id="loc-<?php echo intval ($row['Loc'])?>"><?php echo $row['Loc'];?></td>
            <td class="rp-code ui-widget-content" align="center" id="rp-code-<?php echo intval ($row['Rp-Code'])?>"><?php echo $row['Rp-Code'];?></td>
            <td class="sku ui-widget-content" id="sku-<?php echo intval ($row['SKU'])?>"><?php echo $row['SKU'];?></td>
            <td class="special-id ui-widget-content" align="center" id="special-id-<?php echo intval ($row['Special-ID'])?>"><?php echo $row['Special-ID'];?></td>
            <td class="description ui-widget-content" id="description-<?php echo intval ($row['Description'])?>"><?php echo $row['Description'];?></td>
            <td class="quantity ui-widget-content" align="center" id="quantity-<?php echo intval ($row['Quantity'])?>"><?php echo $row['Quantity'];?></td>
            <td class="unit ui-widget-content" id="unit-<?php echo intval ($row['Unit'])?>"><?php echo $row['Unit'];?></td>
            <td style="display: none;" class="quantity_num ui-widget-content"><input type="textbox" style="width: 100px;" class="spinner" name="value" id="test"></td>
        </tr>

    <?php } ?>

    </tbody>
</table>

JavaScript...I am trying to pull in the value using the quantity variable. Every time I select a checkbox, the console.log(quantity) comes back with undefined:

$(function () {
    $(".check").change(function(){
    $(this).closest('tr').find('td.quantity_num').toggle(this.checked);
    console.log($('input.check').is(':checked'));
    var quantity = document.getElementsByClassName('quantity').innerHTML;
        console.log(quantity);

  if($('input.check').is(':checked'))
    $(this).closest('table').find('th.num').toggle(true);
    else
    $(this).closest('table').find('th.num').toggle(false);



    $( ".spinner" ).spinner({
      spin: function( event, ui ) {
        if ( ui.value > quantity ) {
          $( this ).spinner( "value", quantity );
          return false;
        } else if ( ui.value <= 0 ) {
          $( this ).spinner( "value", 0 );
          return false;
        }
      }
    });
  });
});

Answer 1

var quantity = $(this).closest('tr').find('td.quantity').html();

It's recommended putting that value in a data property:

<td class="quantity ui-widget-content" data-quantity="<?php echo $row['Quantity'] ?>" align="center" id="quantity-<?php echo intval ($row['Quantity'])?>"><?php echo $row['Quantity'];?></td>

And then you can access that value from jQuery:

var quantity = $(this).closest('tr').find('td.quantity').data('quantity');

This way you don't depend on HTML. Imagine that tomorrow, in that cell, you want to use a <span> or add units to quantity. If your data is in a property, you don't depend on what is actually inside the cell.

Answer 2

You can't grab the innerHTML property for an entire class (list of nodes).

You have:

var quantity = document.getElementsByClassName('quantity').innerHTML;

If you change it to the line below, where, it should work:

var quantity = document.getElementsByClassName('quantity')[0].innerHTML;

Answer 3

you need to get current row value like this

var quantity = $(this).closest('tr').find('td.quantity').text();