显示所有选中的表行

Question

I have a multiple column table with one column being checkboxes. If you check a checkbox then press the "Checkout" button, it will take the specified rows and display them in the body of an email.

I originally bring in the top 100 rows to keep the info light for the user. I also have a search functionality where the user can search for specific rows. While you can maneuver throughout different searches and still keep all of the checkboxes checked with session storage, when you hit "Checkout" it only displays the table rows that are checked and currently visible on the page . So, if I searched for a table row and checked it, but then went back to the original top 100 rows by clicking home, then that row would not display on the email.

How can I fix this and show ALL rows that have been checked, whether they are visible on the page or not?

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 for keeping checked checkboxes, checked, throughout the session:

$(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 that brings in data from table to email:

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

Revised based your comments/new code:

Even with your new pasted code, the issue still remains that you can only output whats currently available on screen due looping over the table rows. Instead you need to take it a step further and build objects to house the information you need for building your email, then place those objects in storage for later retrieval.

Again looking at your code your checkboxes have a prefix of "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
}

I haven't fully tested this code for your purposes but you get the idea, build your objects then use those during your iteration.