1

我有一个包含多列的表，其中一列是一个复选框。无论何时选中，它都会在表格右侧显示另一个列单元格，并带有一个向上/向下微调器以设置一个值。

我遇到的问题是我不能让微调器超过我拥有的数量列中的数字。因此，我需要将相应行中 Quantity 列的当前值提取到一个 javascript 变量中，并将其与我的 spinner 函数一起使用。我已经能够使用该值获取值，getElementById但这仅获取表中的第一个值，并且不适用于表中的任何其他值。我一直在尝试getElementsByClassName，但没有运气。

我怎么能成功地做到这一点？

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 ...我正在尝试使用quantity变量提取值。每次我选择一个复选框时，console.log(quantity)都会返回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;
        }
      }
    });
  });
});
4

3 回答 3

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

建议将该值放在数据属性中：

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

然后您可以从 jQuery 访问该值：

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

这样你就不用依赖 HTML。想象一下，明天，在那个单元格中，您想使用 a<span>或将单位添加到数量。如果您的数据在属性中，则您不依赖于单元格内的实际内容。

于 2017-05-10T12:33:07.193 回答
2

您无法获取innerHTML整个类的属性（节点列表）。

你有：

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

如果将其更改为下面的行，它应该在哪里工作：

var quantity = document.getElementsByClassName('quantity')[0].innerHTML;
于 2017-05-10T12:36:21.663 回答
1

你需要像这样获取当前行值

var quantity = $(this).closest('tr').find('td.quantity').text();
于 2017-05-10T12:39:08.093 回答