チェックされているすべてのテーブル行を表示

Question

私は1つの列がチェックボックスである複数の列テーブルを持っています。チェックボックスをオンにして[チェックアウト]ボタンを押すと、指定した行が電子メールの本文に表示されます。

私はもともとトップ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

あなたのコメント/新しいコードに基づいて改訂されました：

新しい貼り付けコードでも、テーブル行をループするため、画面上で現在利用可能なものだけを出力できるという問題は依然として残ります。代わりに、それをさらに進めて、あなたの電子メールを構築するために必要な情報を格納するためのオブジェクトを構築し、後で取得するためにこれらのオブジェクトをストレージに配置する必要があります。

もう一度コードを確認すると、チェックボックスの接頭辞は「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 
} 

私は完全にあなたの目的のためにこのコードをテストしていませんが、あなたのアイデアを得る、あなたの反復中にそれらを使用して、あなたのオブジェクトを構築します。