將表格中的JavaScript Spinner值拖入電子郵件中

Question

我有一個多列表格，其中一列是複選框。我可以檢查不同的行，然後點擊「結賬」按鈕，它會在電子郵件正文中顯示相應的選定表格行數據。

每當選中某個複選框時，它還會顯示一個額外的列Quantity #，其中包含一個微調器，用戶可以在其中輸入數字或使用向上/向下箭頭選擇一個數字。 但是，當我輸入一個數字，然後點擊「Checkout」按鈕時，該值始終顯示爲未定義。

我在控制檯中獲得微調器的值，但不確定如何使其顯示在我的電子郵件中。 我該如何獲取它，以便將值讀取並正確顯示在電子郵件正文上？

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

    <?php } ?> 

    </tbody> 
</table> 

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('.quantity_num').data('spinner'); 
    body += encodeURIComponent(data) + '\xa0\xa0'; 

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

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

    window.location.href = link; 
} 

JavaScript進行微調：

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

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



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

    var test = ui.value; 
    sessionStorage.setItem("test", JSON.stringify(test)); 
    var testtrue = sessionStorage.getItem("test"); 
    console.log(JSON.parse(testtrue)); 

     } 
    }); 
    }); 
    }); 

Answer 1

據我所知，你想獲得所謂的spinner的當前值，其由以下給出：

$(selector).spinner('value') 

因此，在充分，這樣的事情應該建立必要的字符串：

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:me@example.com" + "?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')) + '\xa0\xa0'; 
      return str; 
     }).join('') + '%0D%0A'; 
    console.log(link); 
    window.location.href = link; 
} 

注意使用.map()（兩次）對象的數組映射到字符串數組，並.join('')放碎片在一起。