HTML-Wert in Javascript-Variable ziehen

Question

Ich habe eine Tabelle mit mehreren Spalten, wobei eine Spalte ein Kontrollkästchen ist. Wenn diese Option aktiviert ist, wird eine andere Spaltenzelle rechts neben der Tabelle mit einem Aufwärts-/Abwärtsdrehfeld angezeigt, um einen Wert festzulegen.

Das Problem, das ich habe, ist, dass ich den Spinner nicht über die Zahl gehen lassen kann, die in der Menge-Spalte ist, die ich habe. Also muss ich den aktuellen Wert der Quantity-Spalte in der entsprechenden Zeile in eine Javascript-Variable ziehen und diese mit meiner Spinner-Funktion verwenden. Ich konnte den Wert mit getElementById erhalten, aber das erhält nur den ersten Wert in der Tabelle und funktioniert nicht für weitere Werte in der Tabelle. Ich versuche weiter getElementsByClassName, aber ich habe kein Glück.

Wie konnte ich das erfolgreich machen?

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 ... Ich versuche, in dem Wert mit dem quantity Variable zu ziehen. Jedes Mal, wenn ich eine Checkbox auswählen, kommt die console.log(quantity) zurück mit 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(); 

Es wird empfohlen, diesen Wert in einem Datum Eigenschaft setzen:

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

Und dann können Sie diesen Wert von jQuery zugreifen :

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

So sind Sie nicht auf HTML angewiesen. Stellen Sie sich vor, dass Sie morgen in dieser Zelle eine <span> verwenden oder Einheiten zur Menge hinzufügen möchten. Wenn sich Ihre Daten in einer Eigenschaft befinden, sind Sie nicht darauf angewiesen, was sich tatsächlich in der Zelle befindet.

Answer 2

Sie können die innerHTML-Eigenschaft für eine gesamte Klasse (Liste der Knoten) nicht abrufen.

Sie haben:

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

Wenn Sie es auf der Linie unten ändern, wo, sollte es funktionieren:

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

Answer 3

Sie aktuelle Zeile Wert wie folgt

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

erhalten müssen