Pull HTML Value Into Javascript Variable

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 t

Solution 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.

Solution 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;

Solution 3:

you need to get current row value like this

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