通过会话存储获取所有表行值

我有一个 HTML 表格，其中一列带有复选框。如果您选中一个复选框，然后按“结帐”按钮，它将采用指定的行并将它们显示在电子邮件正文中。

页面加载时显示前 100 行。我还有一个搜索功能，用户可以在其中搜索特定的行。用户可以在不同的搜索中进行操作，并且仍然使用会话存储检查所有复选框。但是，当用户点击“结帐”时，电子邮件正文仅显示已选中且当前在页面上可见的表格行。

因此，如果用户搜索表格行并检查它，然后导航回原始的前 100 行，则该检查行将不会显示在电子邮件中，因为它在当前时刻未显示在页面上。

如何解决此问题并显示已检查的所有行，无论它们是否在页面上可见？

有人告诉我，我将复选框存储在会话中，但随后返回 UI 以读取所选项目的列表。但是，我不确定如何解决此问题，非常感谢您的帮助！谢谢！

JavaScript 包含在整个会话期间保持所有复选框处于选中状态的代码：

$(function(){
    $(':checkbox').each(function() {
        // Iterate over the checkboxes and set their "check" values based on the session data
        var $el = $(this);
        //console.log('element id: ',$el.prop('id'),' sessionStorage[id]: ',sessionStorage[$el.prop('id')]);
        $el.prop('checked', sessionStorage[$el.prop('id')] === 'true');
        if ($el.prop('checked')) {          
            //show the quantity cell in the column under header with class num
            $el.closest('tr').find('td.quantity_num').toggle(this.checked);
            var quantity = sessionStorage['value_'+$el.prop('id')];
            if (quantity) {
                $el.closest("tr").find(".spinner" ).spinner( "value", quantity );
            }
        }
    });

    $('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');
    });
});

将信息发送到电子邮件正文的 JavaScript：

function sendMail() {
    var dataItems = [
        { 'clss':'.loc',         'prop':'loc' },
        { 'clss':'.rp-code',     'prop':'rpCode' },
        { 'clss':'.sku',         'prop':'sku' },
        { 'clss':'.special-id',  'prop':'specialId' },
        { 'clss':'.description', 'prop':'description' },
        { 'clss':'.quantity',    'prop':'quantity' },
        { 'clss':'.unit',        'prop':'unit' }
    ];
    var link = "mailto:[email protected]" + "?subject=" + encodeURIComponent("Order") + "&body=";
    link += $('#merchTable tr input[name="check"]:checked').closest('tr').get().map(function(tr) {
            var str = dataItems.map(function(item) {
                return encodeURIComponent($(tr).find(item.clss).data(item.prop)) + '\xa0\xa0';
            }).join('');
            str += encodeURIComponent($(tr).find('.spinner').spinner('value')) + '%0D%0A';
            return str;
        }).join('') + '%0D%0A';
    console.log(link);
    window.location.href = link;
}

HTML表：

<section id="checkout-btn"> 
<button id="checkout" name="order" onclick="sendMail(); return false">Checkout</button>
</section>

<br>

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

    <?php } ?>

    </tbody>
</table>

编辑：

Quantity #选中一行时显示列的函数：

$(function () {
    $(".check").change(function(){
        $(this).closest('tr').find('td.quantity_num').toggle(this.checked);
        setupSpinner(this);
        console.log('input - checked: ',$('input.check').is(':checked'));
        //var quantity = $(this).closest('tr').find('td.quantity').data('quantity');

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

    });
});

旋转器的功能：

function setupSpinner(checkbox) {
     var quantity = $(checkbox).closest('tr').find('td.quantity').data('quantity');
    console.log('quantity: ',quantity);
    $(checkbox).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;
        }
          //store value
        var test = ui.value;
        sessionStorage.setItem('value_'+$(checkbox).prop('id'), JSON.stringify(test));
        var testtrue = sessionStorage.getItem('value_'+$(checkbox).prop('id'));
          console.log('testtrue: ', JSON.parse(testtrue));
      }
    });        
}

从选中的表格行中的每个单元格获取值的函数：

$(function () {
  $(document).on("click", "#merchTable .check", function () {
  var $this = $(this);
  var tds = $this.closest('tr').find('td').filter(function () {
    return $(this).find('.check').length === 0;
  });
    var isValid = true;
    var errors = '';
    var elements = tds;
    if (tds.find('td').length > 0) {
      elements = tds.find('td');
    }
    var dict = {}; 
    elements.each(function (index, element) {
      var type = $(this).attr('class');
      var value = (element.tagName == 'td') ? $(this).val() : $(this).text();
      console.log(type);
      // ----- Switch statement that provides validation for each table cell -----
      switch (type) {
        case "loc ui-widget-content":
              dict["Loc"] = value;
          break;
        case "rp-code ui-widget-content":
              dict["Rp-Code"] = value;
          break;
        case "sku ui-widget-content":
              dict["SKU"] = value;
          break;
        case "special-id ui-widget-content":
              dict["Special-ID"] = value;
          break;
        case "description ui-widget-content":
              dict["Description"] = value;
          break;
        case "quantity ui-widget-content":
              dict["Quantity"] = value;
          break;
        case "unit ui-widget-content":
              dict["Unit"] = value;
          break;
        case "quantity_num ui-widget-content":
              dict["spinner"] = value;
          break;
      }
    })
    if (isValid) {
        console.log(dict);
    } else {
      alert(errors);
    }
});
});