Question

我有一个表格，我可以勾选一个复选框，它会记录行中的所有内容。选中复选框后，将出现另一列（Quantity＃），其中包含单元格内的文本框/微调器。如果未选中，则相应的文本框/微调器将消失。

如果在整个刷新期间检查行直到页面关闭，我想使用会话存储来保持Quantity＃列中的任何单元格可见。我能够使用会话存储来保持选中复选框，但是只要选中该行的复选框，我就会遇到使Quantity＃列保持可见的问题。

我该怎么做？

我已经包含了复选框行的HTML和用于保持复选框选中的JavaScript，因此可以根据需要使用它来作为答案。

复选框和显示的表格单元格的HTML：

<td class="ui-widget-content"><input type="checkbox" class="check" name="check" id="checkid-<?php echo intval ($row['ID'])?>"></td>
<td class="quantity_num ui-widget-content" name="rows[0][0][quant]" style="display: none;"><input type="textbox" style="width: 100px;" class="spinner" id="spin-<?php echo intval ($row['ID'])?>"></td>

用于复选框和出现的表格单元格中的微调器的会话存储的JavaScript：

$(function(){
    $(':checkbox').each(function() {
        // Iterate over the checkboxes and set their "check" values based on the session data
        var $el = $(this);
        $el.prop('checked', sessionStorage[$el.prop('id')] === 'true');
    });

    $('input:checkbox').on('change', function() {
        // save the individual checkbox in the session inside the `change` event, 
        // using the checkbox "id" attribute
        var $el = $(this);
        sessionStorage[$el.prop('id')] = $el.is(':checked');
    });
});


$(function () {
    $(".check").change(function(){
    $(this).closest('tr').find('td.quantity_num').toggle(this.checked);
    console.log($('input.check').is(':checked'));
    var quantity = $(this).closest('tr').find('td.quantity').data('quantity');
        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);



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

编辑：
表格的HTML / PHP：

<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" id="checkid-<?php echo intval ($row['ID'])?>"></td>
            <td class="loc ui-widget-content"><input type="hidden"><?php echo $row['Loc'];?></td>
            <td name="rows[0][0][rp-code]" class="rp-code ui-widget-content" align="center" id="rp-code-<?php echo intval ($row['Rp-Code'])?>"><?php echo $row['Rp-Code'];?></td>
            <td name="rows[0][0][sku]" class="sku ui-widget-content" id="sku-<?php echo intval ($row['SKU'])?>"><?php echo $row['SKU'];?></td>
            <td name="rows[0][0][special-id]" class="special-id ui-widget-content" align="center" id="special-id-<?php echo intval ($row['Special-ID'])?>"><?php echo $row['Special-ID'];?></td>
            <td name="rows[0][0][description]" class="description ui-widget-content" id="description-<?php echo intval ($row['Description'])?>"><?php echo $row['Description'];?></td>
            <td name="rows[0][0][quantity]" 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>
            <td name="rows[0][0][unit]" class="unit ui-widget-content" id="unit-<?php echo intval ($row['Unit'])?>"><?php echo $row['Unit'];?></td>
            <td name="rows[0][0][quant]" style="display: none;" class="quantity_num ui-widget-content"><input type="textbox" style="width: 100px;" class="spinner" id="spin-<?php echo intval ($row['ID'])?>"></td>
        </tr>

    <?php } ?>

    </tbody>
</table>

使用会话存储保持隐藏表格列/单元格可见

0 个答案: