Alle überprüften Tabellenzeilen anzeigen

Question

Ich habe eine Tabelle mit mehreren Spalten, wobei eine Spalte Kontrollkästchen enthält. Wenn Sie ein Kontrollkästchen aktivieren und dann auf die Schaltfläche "Zur Kasse" klicken, werden die angegebenen Zeilen angezeigt und im Text einer E-Mail angezeigt.

Ich bringe ursprünglich die obersten 100 Reihen herein, um das Informationslicht für den Benutzer zu halten. Ich habe auch eine Suchfunktion, wo der Benutzer nach bestimmten Zeilen suchen kann. Während Sie verschiedene Suchvorgänge manövrieren können und alle Checkboxen weiterhin im Sitzungsspeicher aktiviert sind, werden beim Drücken von "Checkout" nur die überprüften und aktuell auf der Seite angezeigten Tabellenzeilen angezeigt. Wenn ich also nach einer Tabellenzeile suchte und sie überprüfte, aber dann zu den ursprünglichen obersten 100 Zeilen zurückkehrte, indem ich auf Home klickte, wurde diese Zeile in der E-Mail nicht angezeigt.

Wie kann ich das beheben und ALLE Zeilen anzeigen, die überprüft wurden, ob sie auf der Seite sichtbar sind oder nicht?

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 für keeping Kontrollkästchen aktiviert, überprüft, während der gesamten Sitzung:

$(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, das in Daten aus der Tabelle bringt eine E-Mail:

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

Überarbeitete basierend Ihre Kommentare/neuen Code:

Auch mit Ihrem neuen eingefügten Code bleibt das Problem bestehen, dass Sie nur das ausgeben können, was aktuell auf dem Bildschirm verfügbar ist, da die Zeilen in der Schleife durchlaufen werden. Stattdessen müssen Sie einen Schritt weiter gehen und Objekte erstellen, die die Informationen enthalten, die Sie zum Erstellen Ihrer E-Mails benötigen, und diese Objekte dann für den späteren Abruf speichern.

Wenn Sie erneut Ihren Code ansehen, haben Ihre Checkboxen das Präfix "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 
} 

Ich habe nicht in vollem Umfang den Code für Ihre Zwecke getestet, aber Sie bekommen die Idee, Ihre Objekte bauen dann diejenigen, die während Ihrer Iteration verwenden.