显示所有选中的表格行

Question

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

我最初引入前 100 行是为了为用户保留信息灯。我还有一个搜索功能，用户可以搜索特定的行。虽然您可以在不同的搜索中进行操作，并且仍然使用会话存储检查所有复选框，但当您点击“结帐”时，它只会显示已选中且当前在页面上可见的表格行。因此，如果我搜索了一个表格行并检查了它，然后通过单击主页返回到原来的前 100 行，那么该行将不会显示在电子邮件中。

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

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 type="textbox" style="width: 100px;" class="spinner" id="spin-<?php echo intval ($row['ID'])?>"></td>
        </tr>

    <?php } ?>

    </tbody>
</table>

用于在整个会话期间保持选中复选框的 JavaScript：

$(function(){
    $(':checkbox').each(function() {
        var $el = $(this);
        $el.prop('checked', sessionStorage[$el.prop('id')] === 'true');
    });

    $('input:checkbox').on('change', function() { 
        var $el = $(this);
        sessionStorage[$el.prop('id')] = $el.is(':checked');
    });
});

将数据从表格导入电子邮件的 JavaScript：

function sendMail() {
    var link = "mailto:me@example.com"
             + "?subject=" + encodeURIComponent("Order")
             + "&body=";

    var body = '';

  $('table tr input[name="check"]:checked').each(function(){
    var current_tr = $(this).parent().parent();

    var data = current_tr.find('.loc').data('loc');
    body +=  encodeURIComponent(data) + '\xa0\xa0';

    var data =current_tr.find('.rp-code').data('rp-code');
    body +=  encodeURIComponent(data) + '\xa0\xa0';

    var data =current_tr.find('.sku').data('sku');
    body +=  encodeURIComponent(data) + '\xa0\xa0';

    var data =current_tr.find('.special-id').data('special-id');
    body +=  encodeURIComponent(data) + '\xa0\xa0';

    var data =current_tr.find('.description').data('description');
    body +=  encodeURIComponent(data) + '\xa0\xa0';

    var data =current_tr.find('.quantity').data('quantity');
    body +=  encodeURIComponent(data) + '\xa0\xa0';

    var data =current_tr.find('.unit').data('unit');
    body +=  encodeURIComponent(data) + '\xa0\xa0';

    var data =current_tr.find('.spinner').data('spinner');
    body +=  encodeURIComponent(data) + '\xa0\xa0';

    body += '%0D%0A';

  });

  body += '';
  link += body;
  console.log(link);

  window.location.href = link;
}

Answer 1

根据您的 cmets/新代码进行了修改：

即使使用新粘贴的代码，问题仍然存在，即由于循环遍历表格行，您只能输出屏幕上当前可用的内容。相反，您需要更进一步，构建对象来容纳构建电子邮件所需的信息，然后将这些对象放入存储中以供以后检索。

再次查看您的代码，您的复选框具有“check-id”前缀。

$('input:checkbox').on('change', function() {
    var $el = $(this);
    var key = $el.prop('id');
    var rowObject = {};

    //check if already in storage
    if(sessionStorage.getItem(key) !== null){
     rowObject = JSON.parse(sessionStorage.getItem(key));
     rowObject.checkedVal = $el.is(':checked'); //update it's check value
    }else{
     //build entire row object
     var current_tr = $(this).parent().parent();

     rowObject.loc = current_tr.find('.loc').data('loc');
     rowObject.rpCode = current_tr.find('.loc').data('rp-code');
     rowObject.sku = current_tr.find('.loc').data('sku');
     //etc. as many pieces as you need
    }

    //set to session
    sessionStorage.setItem(key, JSON.stringify(rowObject));

});

//then later for your send email method
function sendEmail(){
  var link = "mailto:me@example.com"
            + "?subject=" + encodeURIComponent("Order")
            + "&body=";

   var body = '';

  //loop over the row objects instead
  $.each(sessionStorage, function(key, value){
    //sort out the ones we want
    if(key.indexOf("checkid-") > -1){
      var rowObject = JSON.parse(sessionStorage.getItem(key));
      body +=  encodeURIComponent(rowObject.loc + '\xa0\xa0');
      body +=  encodeURIComponent(rowObject.rpCode + '\xa0\xa0');
      body +=  encodeURIComponent(rowObject.sku + '\xa0\xa0');
      //etc. as many pieces as you need

      body += '%0D%0A';
    }
  });

  //whatever other logic you have
}

我还没有针对您的目的完全测试此代码，但您明白了，构建您的对象，然后在您的迭代过程中使用它们。